XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   jQuery Lightbox Overlay (http://xhtmlforum.de/showthread.php?t=65789)

vincento 19.09.2011 14:09

jQuery Lightbox Overlay
 
Hallo,

ich möchte ein eigenes Lightbox-Script bauen, was nicht ganz klappt.

Das Overlay funktioniert, das Href des IMG wird übergeben und in der zentrierten Overlay Box wird ein IMG generiert, das auch noch (von einem Plugin) vorgeladen wird, damit jQuery widerum die Größe etc. auslesen kann.

Allerdings ist irgendwo der Wurm drin und wenn man nochmals auf ein Bild klickt, so wird die Box nicht mehr richtig zentriert.

Hier ist meine lightbox.js:
Code:

$.fn.lightBox = function() {
       
        $(this).click(function(){
                $("#overlay_box").addClass("loadingPic");
                var windowWidth = $(window).width();
                var windowHeight = $(window).height();
                var boxHeight = $("#overlay_box").height()/2;
                var boxWidth = $("#overlay_box").width()/2;

                var imgSrc = $(this).attr("href");
                $("#overlay_box").empty().html("<img src='"+imgSrc+"' />").css({
                        "left":windowWidth/2-boxWidth,
                        "top":windowHeight/2-boxHeight
                });
                $("#overlay_box").children("img").css({
                        "display":"none",
                        "max-width":windowWidth-50,
                        "max-height":windowHeight-50
                }).onImagesLoaded(function(_img){
                        $(_img).fadeIn(1000);
                        var boxHeight = $("#overlay_box").height()/2;
                        var boxWidth = $("#overlay_box").width()/2;
                        $("#overlay_box").css({
                                "left":windowWidth/2-boxWidth,
                                "top":windowHeight/2-boxHeight
                        }).removeClass("loadingPic");
                });
               
                $('#overlay_wrap').fadeIn('fast');
                return false;
        });

        $('#overlay').click(function(){
                $('#overlay_wrap').fadeOut('fast');
        });

};


$(document).ready(function(e) {
    $("a").has("img").lightBox();       
});

Bin noch neu in jQuery und hoffe, jemand hat den Durchblick und kann mir da helfen ;)

Tipps und Kritik an meinem Stil werden gern gesehen!

vincento 20.09.2011 12:03

Kann mir da keiner helfen oder ist es so lächerlich einfach, dass ich es selbst checken sollte?

Habe ein wenig weitergefeilt. Jetzt ist das Bild beim ersten Klick richtig positioniert, allerdings beim Zweiten wird wieder nur die Hälfte der Fensterbreite als Höhe und als Breite genommen.

Code:

$.fn.lightBox = function() {
       
        $(this).click(function() {
                $("#overlay_box").addClass("loadingPic");
               
                var windowWidth = $(window).width();
                var windowHeight = $(window).height();
                var imgSrc = $(this).attr("href");
               
                $("#overlay_box").empty().html("<img src='"+imgSrc+"' />").css({
                        "left":"0px",
                        "top":"0px"
                });
               
                $("#overlay_box").children("img").css({
                        "display":"none",
                        "max-width":windowWidth-50,
                        "max-height":windowHeight-50
                }).onImagesLoaded(function(_img){
                        $(_img).fadeIn(1000);
                        var boxHeight = $("#overlay_box").height();
                        var boxWidth = $("#overlay_box").width();
                        var centerWidth = windowWidth/2 - boxWidth/2;
                        var centerHeight = windowHeight/2 - boxHeight/2;
                       
                        $("#overlay_box").css({
                                "left":centerWidth,
                                "top":centerHeight
                        }).removeClass("loadingPic");
                });
               
                $('#overlay_wrap').fadeIn('fast');
                return false;
        });

        $('#overlay').click(function(){
                $('#overlay_wrap').fadeOut('fast');
        });

};

hier mal ein Screenshot:

http://www.abload.de/thumb/bildschir...11-09-d7q8.png

EDIT: Auch wenn es nur wenig Fantasie bedarf, sich auszumalen, wie das HTML dazu aussieht, schreibe ich es dennoch dazu:

HTML-Code:

<a href="link.html">
    <img src="bild.jpg" />
    <span>Bild-Unterschrift</span>
</a>


zeji 20.09.2011 17:16

Die Frage ist doch, wozu das Rad neu erfinden? Es gibt mehrere Lightbox-Alternativen, die man leichter anpassen kann, als dass man alles neu schreibt...

vincento 21.09.2011 09:42

ich baue eben lieber alles selbst.
meine methode scheint doch auch zu funktionieren, also warum nicht?

EDIT: Oh mann, bin ich blöd. Statt mir ein Plugin zu suchen, dass Bilder cached, hätte ich gleich .load() nutzen können.
Einfach ausgetauscht und sofort funktioniert's wie gewünscht :)


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:03 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019