|
|||
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(); }); Tipps und Kritik an meinem Stil werden gern gesehen! |
Sponsored Links |
Sponsored Links |
|
|||
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 Geändert von vincento (21.09.2011 um 11:39 Uhr) |
Stichwörter |
bilder, galerie, javascript, jquery, overlay, thumbnails |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
jQuery (coda slider) und prototype (Lightbox) konflikt | computernerd | Javascript & Ajax | 3 | 21.09.2011 20:04 |
jcarousel + jquery lightbox plugin | Thorolf | Javascript & Ajax | 0 | 23.02.2011 14:18 |
Jquery lightbox bei Seitenaufruf starten | connor | Javascript & Ajax | 14 | 23.01.2010 01:36 |
Lightbox mit zweiter CSS Datei funktioniert nicht | T4ke | CSS | 12 | 11.12.2007 20:20 |
Lightbox 2 wie Lightbox 1 öffnen | .wired | Javascript & Ajax | 3 | 31.10.2007 23:35 |