zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden jQuery Lightbox Overlay

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.09.2011, 15:09
vincento
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard 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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.09.2011, 13:03
vincento
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

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:



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>

Geändert von vincento (20.09.2011 um 16:24 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.09.2011, 18:16
$("#mettbröttchen");
XHTMLforum-Mitglied
 
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard

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...
Mit Zitat antworten
  #4 (permalink)  
Alt 21.09.2011, 10:42
vincento
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

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)
Mit Zitat antworten
Antwort

Stichwörter
bilder, galerie, javascript, jquery, overlay, thumbnails

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:57 Uhr.