[Erledigt] jQuery - Lightbox

Willfri · 02.12.2011, 16:56

Hallo,
ich versuche gerade eine einfach Lightbox selber zu machen, doch ich habe ein Problem beim Schließen.

Hier mein Code:

Code:

<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery('a').click(function() {
		if(jQuery(this).attr('rel') == 'lightbox') {
			jQuery('body').append('<div id="lightbox_back"><div class="lightbox_cross" title="Schlie&szlig;en"></div><table width="100%" height="100%"><tr><td align="center" valign="middle"><img src="'+jQuery(this).attr('href')+'" /><div class="lightbox_title" style="width: '+jQuery('#lightbox_back').find('img').width()+'px; margin-top: -30px; padding: 5px; background-color: #000000; opacity: 0.8; color: #FFFFFF; position: relative; display: none;">'+jQuery(this).attr('title')+'</div></td></tr></table></div>');
			jQuery('#lightbox_back').show().animate({opacity: '1'}, 500, function() { jQuery('#lightbox_back img').fadeIn('fast'); });
			setTimeout('jQuery(\'#lightbox_back .lightbox_title\').fadeIn(\'slow\')', 1000);
			return false;
		}
	});

	jQuery('.lightbox_cross').click(function() {
		jQuery('#lightbox_back').remove();
		alert('Es funktioniert');
	});
});
</script>

Das öffnen funktioniert auch aber halt das Schließen nicht. Wenn ich also auf den Div mit der Klasse "lightbox_cross" klicke, soll sie wieder geschlossen werden, es passiert aber nichts.

mfg Willfri

nikosch · 02.12.2011, 19:26

Willfri · 02.12.2011, 19:54

Zitat:

Zitat von nikosch

Ja.

Was "ja"?

Ich möchte wissen wo der Fehler ist, bitte!

nikosch · 02.12.2011, 19:57

Schön und gut.
1. hast Du keine Frage gestellt.
2. „Hier macht mal“ ist hier nicht drin.
3. Willst Du das Rad unbedingt neu erfinden. Da darf man dann wohl auch erwarten, dass Du zumindest die ersten Schritte der Fehlersuche auch aktiv unterstützt. Welche Schritte des Debuggings erfolgt sind, lese ich hier mit keiner SIlbe.

Willfri · 02.12.2011, 20:37

Man kann sich ja wohl denken, worum es bei meinem Problem geht. Trotzdem nochmal: "Weis jemand, wo der Fehler liegt, das er Zeile 12 nich ausführt?"
Ich habe schon nach Fehlern gesuch aber Keinen gefunden. Wenn ich in Zeile 12 das "'.lightbox_cross'" in "document" ändere, geht es ja.

nikosch · 02.12.2011, 20:50

Tja, vermutlich daran, dass zum Zeitpunkt der Scriptausführung dieses DOM-Element noch gar nicht existiert. Deine setTimeout-Umsetzung ist auch sehr fragwürdig und erst recht Deine Einstellung hier.

Zitat:

Man kann sich ja wohl denken, worum es bei meinem Problem geht

Forenrichtlinien

Willfri · 02.12.2011, 21:03

Ok, entschuldigung, wenn ich mich daneben benommen habe.
Das mit dem setTimeout hab ich schon weg gemacht.
Trotzdem verstehe ich das jetzt noch nicht, wo der fehler ist, enschuldigung das ich so blind bin

Willfri · 02.12.2011, 21:12

So, habs jetzt anders gelöst, und zwar durch ein onclick Event.

nikosch · 02.12.2011, 21:17

('a').click erzeugt erst das X-Element. Und zwar erst, wenn der User was klickt. Folglich kann der andere Code gar kein Event an das X zuweisen, weil die Ausführung onDOMReady, also bevor der User auch nur etwas klicken kann, bereits erfolgt (ist).
Der Ausweg ist, das click-Event bei der Erzeugung mit anzulegen. Ein Inline-Attribut ist da eher die veraltete Variante.

Dass

Zitat:

PHP-Code:

      jQuery('a').click(function() {
        if(jQuery(this).attr('rel') == 'lightbox') {

Bei jedem Klick auf Deine Website ausgeführt wird, ist Dir aber auch klar ja? Warum benutzt Du nicht gleich nen passenden Selktor für rel="lightbox"?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
jQuery datatable + lightbox	Chriz	JavaScript, Ajax und mehr	1	29.10.2011 12:38
jQuery UI Tabs komplett mit AJAX laden und letzt gewählten Tab wählen	K00S	JavaScript, Ajax und mehr	6	10.09.2011 13:54
[Erledigt] Jquery mobile form action verhalten unterdrücken	drsoong	JavaScript, Ajax und mehr	1	21.07.2011 14:57
jQuery: Select Area in Input Feld umwandeln	Elementus	JavaScript, Ajax und mehr	1	12.07.2011 20:31
Einsatz von Milestones (jQuery)	dreamcatcher	JavaScript, Ajax und mehr	4	28.06.2011 12:07
PHP und jquery	mehlwurm	PHP Einsteiger	13	30.05.2011 23:09
Einfaches JQuery resize und scoll läuft nicht	smilla	JavaScript, Ajax und mehr	5	08.02.2011 20:44
JQuery beslide Plugin in Funktion aufrufen?!	pfump	JavaScript, Ajax und mehr	5	21.01.2011 00:10
Bin noch ein Anfänger mit jquery bitte um hilfe	bomber007	JavaScript, Ajax und mehr	4	19.08.2010 23:34
jquery lightbox mit gallery	flflfl	JavaScript, Ajax und mehr	8	18.08.2010 15:01
[Erledigt] Statistik mit jQuery	DJ_RhoxxZ	JavaScript, Ajax und mehr	6	25.07.2010 17:47
jQuery findet Element nicht	ByStones	JavaScript, Ajax und mehr	8	11.06.2010 14:03
Zwei Fragen: Lightbox (<noscript> Lightbox 2.0?)	theCORE	Scriptbörse	7	18.12.2009 14:40
[Erledigt] simpleviewer und lightbox verbinden?!	TAZweb	JavaScript, Ajax und mehr	6	16.10.2009 12:56
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

02.12.2011, 19:26
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ja. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

02.12.2011, 19:57
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Schön und gut. 1. hast Du keine Frage gestellt. 2. „Hier macht mal“ ist hier nicht drin. 3. Willst Du das Rad unbedingt neu erfinden. Da darf man dann wohl auch erwarten, dass Du zumindest die ersten Schritte der Fehlersuche auch aktiv unterstützt. Welche Schritte des Debuggings erfolgt sind, lese ich hier mit keiner SIlbe. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

02.12.2011, 20:37
Willfri Neuer Benutzer Registriert seit: 02.09.2011 Beiträge: 18 PHP-Kenntnisse: Anfänger	Man kann sich ja wohl denken, worum es bei meinem Problem geht. Trotzdem nochmal: "Weis jemand, wo der Fehler liegt, das er Zeile 12 nich ausführt?" Ich habe schon nach Fehlern gesuch aber Keinen gefunden. Wenn ich in Zeile 12 das "'.lightbox_cross'" in "document" ändere, geht es ja.

02.12.2011, 21:03
Willfri Neuer Benutzer Registriert seit: 02.09.2011 Beiträge: 18 PHP-Kenntnisse: Anfänger	Ok, entschuldigung, wenn ich mich daneben benommen habe. Das mit dem setTimeout hab ich schon weg gemacht. Trotzdem verstehe ich das jetzt noch nicht, wo der fehler ist, enschuldigung das ich so blind bin

02.12.2011, 21:12
Willfri Neuer Benutzer Registriert seit: 02.09.2011 Beiträge: 18 PHP-Kenntnisse: Anfänger	So, habs jetzt anders gelöst, und zwar durch ein onclick Event.