28.03.2012, aktualisiert um 07:37:45 Uhr

4759

QJuery - Lightbox

Guten Morgen,

bei meinem Testshop wird eine Lightbox (class="modal_open") vwerwendet um die Versandkosten in einem kleinen Fenster darzustellen.
Vorerst funktioniert das auch wunderbar, solange keine Artikelvariante ausgewählt ist.

Beispiel: http://testshop.ottscho.de/mode-fashion/schuhe/10/lunaracer?c=1119

Wird aber eine Artikelvariante ausgewählt, so funktioniert der Lightbox-Effekt nicht mehr.
Ich hoffe ihr könnt mir weiterhelfen. Bis jetzt konnte ich noch keine Lösung finden.

Ich denke es hat mit den verschiedenen disyplay:none DIV Boxen der anderen Varianten zu tun. Aber sicher bin ich mir auch nicht.

Besten Dank

MFG

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 182702

Url: https://administrator.de/contentid/182702

Ausgedruckt am: 22.11.2024 um 10:11 Uhr

11 Kommentare

Neuester Kommentar

Moin ottscho,

es sollte reichen, wenn das Konstrukt

<p class="tax_attention modal_open">  
...
</p>

nur einmal am Ende der Artikelliste erscheint.
Du hast es je Artikel einmal stehen (Zeile 449-451; 470-472, 491-493ff)

Freundliche Grüße von der Insel - Mario

Hallo Mario,

danke für deine AW.

Was heißt nur am Ende?
Die Funktion ist ja auf die a Tags gelegt, welche in einem Element mit class modal_open stehen müssen.

Es steht dort öfter, da die Zeilen ja je nach Artikelvariante eingeblendet/ausgeblendet werden.
Das macht das Templatesystem automatisch.

Soll ich mal ein DIV mit der Class modal_open machen, welches die Zeilen 449 - 493 etc. beinhalten und die zusätzlichen Classen mit modal_open entfernen?

Moin ottscho,

Zitat von @ottscho:

Was heißt nur am Ende?

Am Ende aller Artikeldaten (-varianten), da der Link 'Versandkosten' immer erscheint (erscheinen muss).

Die Funktion ist ja auf die a Tags gelegt, welche in einem Element mit class modal_open stehen müssen.

Dieses Element gibt es aber dann pro Artikel im Quelltext - nur einmal ist notwendig.

Es steht dort öfter, da die Zeilen ja je nach Artikelvariante eingeblendet/ausgeblendet werden.
Das macht das Templatesystem automatisch.

Den Link 'Versandkosten' ausblenden?

Soll ich mal ein DIV mit der Class modal_open machen, welches die Zeilen 449 - 493 etc. beinhalten und die zusätzlichen
Classen mit modal_open entfernen?

Ja, und der Container muss in Zeile 495/496 (vor dem Relaunch gezählt)

Freundliche Grüße von der Insel - Mario

Hi,

so jetzt habe ich alle class modal_open entfernt und nur noch ein DIV (kompletter Mittelbereich des Artikels) damit bestückt.

Aber gleiches Probelm. Die Lightbox funktionert beim ersten Aufruf des Artikels. Wird eine Variante ausgewählt, so wechselt der Inhalt und die Lightbox geht nicht mehr.

Kann es sein, wenn die Seite z.B. so geladen wird:

<div class="modal_open">  
 <div id="sichtbar"><a href="test.htm">Link</a>  
 <div id="display_none"><a href="test.htm">Link2</a>  
 <div id="display_none"><a href="test.htm">Link3</a>  
</div>

Der erste Links mit der Lightbox funktioniert, die anderen Beiden sind ja nichts sichbar. Wird jetzt durch eine User-Interatkion (Auswahl der Variante) der erste Link ausgeblendet und der zeite Link eingeblendet. Dann sollte doch die Lightbox für den zweiten Link nun auch gehen...

Moin ottscho,

prinzipiell so:

<div class="irgendeine">  
 <div id="Artikel-01">Artikeldaten</div>  
 <div id="Artikel-02">Artikeldaten</div>  
 ...
 <div id="Artikel-99">Artikeldaten</div>  
 <div id="Versandkosten" class="modal_open">Versanddaten</div>  
</div>

Die <div> mit der id="Artikel-##" werden jeweils mit der Artikelauswahl sichtbar gemacht (immer nur einer), der <div> mit der id="Versandkosten" ist so nur einmal vorhanden und immer sichtbar.
Bitte immer die Eindeutigkeit der IDs beachten!

Freundliche Grüße von der Insel - Mario

[Edit] Zeile 6 Klasse nachgetragen [/Edit]

Hallo Mario,

jetzt verstehe ich nicht ganz was du meinst.
Anbei ein Screenshot mit Markierungen.
http://www.myimg.de/?img=screenddbfb.jpg

Ich habe meinen Haupt DIV (blauer Bereich). Dieser hat die Class modal_open.
Darin gibt es mehrere DIV

- Für jede Variante ein DIV, welche ausgeblendet sind.
- Eine DIV, welche angezeigt wird wenn keine Variante ausgewählt ist.

Jeder der DIVs beinhaltet einen eigenen Versandkostentext.

Was meinst du nun mit ID Versandkosten? Kann ich nicht finden.
Mir fallen im Quellcode keine doppelten ID's auf!

Danke dir

Zitat von @ottscho:

Jeder der DIVs beinhaltet einen eigenen Versandkostentext.

Was meinst du nun mit ID Versandkosten? Kann ich nicht finden.

Ich hatte geschrieben: prinzipiell.

Mir fallen im Quellcode keine doppelten ID's auf!

In Deinem letzten Post schon:

- Für jede Variante ein DIV, welche ausgeblendet sind.
- Eine DIV, welche angezeigt wird wenn keine Variante ausgewählt ist.

Das ist korrekt - nur warum das Nächste:

Jeder der DIVs beinhaltet einen eigenen Versandkostentext.

Macht er nicht - nur einen Link. Und hier liegt das Problem: Wenn der Aufruf der Lightbox immer dann klappt, wenn kein Artikel gewählt ist, gilt:

- Eine DIV, welche angezeigt wird wenn keine Variante ausgewählt ist.

Aus diesem <div> kommt der funktionierende Aufruf.

Also heißt ein Lösungsvorschlag: Nimm den redundanten Code raus und setze den 'Versandkosten-Div' im Quelltext dorthin, wo er im Browser auch optisch erscheint - an das Ende aller 'Artikel-Divs'.

Genau das meint das letzte Posting von mir.

Freundliche Grüße von der Insel - Mario

PS: Wenn Du wirklich unterschiedliche Versandkosten/-hinweise brauchst, gib dem Link die Artikelnummer mit ...

naja, leider kann ich das nicht so machen.
Was den Versandtext angeht schon. Dieser ist bei allen Artikel gleich.
(Der Shop bzw. Code ist ja original. Ist also leider von Shopware schon so programmiert!)

Ich will die Lightbox auch noch auf die Lieferzeit-Angabe anwenden. Diese ist definitiv bei jedem Artikel anderst. Daher bleibt mein Problem somit erhalten, weil ich den redudanzen Code brauche.
Zwar nicht für die Versandkosten, aber für die zukünftige Lieferzeit Einblendung.

Moin ottscho,

ich beziehe mich auf den von Dir geposteten FireBug-Auszug.

Wenn Du zu jedem Artikel einzelnen 'Versandcode' brauchst - nun gut.

Was aber bewirkt dann der Container ab Zeile 26 (<div id="article_details"> - Versandkosten für 'keinen' Artikel? (Ein Artikel wird doch immer angezeigt - zumindest in der mit obigem Link erreichbaren Testversion)

Nimm den Block einmal heraus und teste die Geschichte.

Freundliche Grüße von der Insel - Mario

der Container ab Zeile 26 <div id="article_details"> wird angezeigt wenn keine Variante des Artikels ausgewählt ist.
Sprich, beim öffnen der URL, welche ich im ersten Posting geschrieben habe.

Hier ist aber im Dropdown nichts ausgewählt und daher wird dieses <div id="article_details"> angezeigt.
Sobald ich aber eine Variante auswähle, wird dieses div ausgeblendet und die artikelspezifischen Informatuionen angezeigt.

Es muss sich hierbei ja auch um einen Bug vom Hersteller handeln, da das Template ein default Template ist.

Dann muss ich das wohl so hinnehmen.

So, nach dem das jQuery angepasst wurde, funktioniert es nun:

/*
$('.modal_open a').click(function(event) { 
			event.preventDefault();
			$.post(this.href, function(data) {
				$.modal(data, '', {'position':'fixed'}).find('.close').remove();			 
			});
		});
*/
		
		$('.modal_open a').live('click', function(event) {  
		  event.preventDefault();
		  $.post(this.href, function(data) {
		  $.modal(data, '', {'position':'fixed'}).find('.close').remove();  
		  });
		});