[GELÖST] Gallery Modul AE-Gallery Template & Lytebox - Problem

Publisher · 07. Mai 2012 12:11

Hallo Miteinander!

Link: http://strebelgmbh.ch.amphora.sui-inter … idung.html

Ich habe eine Website mit CMS MadeSimple (1.9.4.3) erstellt mit dem Gallery Modul (1.4.4).
Gallery Tamplate: AE-Gallery (1.2.4-1)

In JS File des Gallerietemplates habe ich für die grössere Ansicht des Bildes eine Anpassung gemacht damit Bild verlinkt ist auf sich selber und in einem Lytebox sich öffnen soll, das funktioniert auch. Lytebox verwendet von http://lytebox.com/

Wenn man in der Gallerie ohne die Thumbnails zu verwenden aufs grössere Bild klickt, erscheint die Lytebox korrekt. Sobald man aber ein anderes Thumbnail ankickt, danach das Grössere Bild, funktioniert die Lytebox nicht mehr.

An was crasht das?

Danke schon im Voraus für die Hilfe!

NaN · 07. Mai 2012 13:10

Das Problem ist das AE-Gallery-Script bzw. wie das Lytebox-Script seine Funktion an die Links mit den Bildern bindet.

Das Lytebox-Script belegt alle Links der Klasse "lytebox" mit einem onclick-Event der dann die dazu nötige Funktion ausführt. Solange das AE-Gallery-Script noch nicht aktiv geworden ist, funktioniert das auch. Sobald aber AE-Gallery aktiv wird (sobald man also auf eines der anderen kleineren Vorschaubilder klickt), wird der ursprüngliche Lytebox-Link mit dem Bild komplett durch einen neuen Link mit Bild ersetzt. Dadurch geht das onclick-Event, welches auf dem ursprünglichen Link lag, verloren, weil der ursprüngliche Link ja nicht mehr existiert. Der neue Link hat zwar auch die Klasse "lytebox" aber exakt dieser war noch garnicht da, als alle Links dieser Klasse mit dem onclick-Event belegt wurden. Er hat also kein onclick-Event.

Da Du ja ohnehin jQuery verwendest, könntest Du folgendermaßen vorgehen:
Alle Lytebox-Links werden mit der Klasse "launch-lytebox" versehen. Dadurch haben sie erstmal keine Lytebox-Funktionalität (um doppelte Effekte zu vermeiden). Stattdessen bindest Du die Lytebox-Funktion "launch()" selbst an diese Links, jedoch mit der jQuery .live() Funktion (anstelle eines einfachen .click() ). Dann gilt dieses Event nänlich auch für neue Links.
Bsp.:

Hier klicken, um den Code zum Kopieren zu markieren

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="modules/Gallery/templates/ae-gallery/jquery.ae-gallery.js" type="text/javascript"></script>
<script type="text/javascript">
    aeGallery-Script
</script>
<script src="/js/lytebox/lytebox.js" language="javascript" type="text/javascript"></script>
<link media="screen" type="text/css" href="/js/lytebox/lytebox.css" rel="stylesheet"></head>
<script type="text/javascript">
    $('a.launch-lytebox').live('click', function() {
        $lb.launch({url:this.href});
        return false;
    })
</script>

</head>

mike-r · 07. Mai 2012 14:58

Unabhängig von Deinem Problem würde ich empfehlen, das Jquery direkt von der Seite zu holen und nicht von Google. Zusätzlich wäre ein Fallback für ganz ohne JS anzuraten
Desweiteren hast Du ein Problem mit der Seitenbreite.

Die Probleme kannst Du im Screenshot sehen:

Beitrag geändert von mike-r (07. Mai 2012 15:00)

Publisher · 09. Mai 2012 08:21

NaN schrieb:

Da Du ja ohnehin jQuery verwendest, könntest Du folgendermaßen vorgehen:
Alle Lytebox-Links werden mit der Klasse "launch-lytebox" versehen. Dadurch haben sie erstmal keine Lytebox-Funktionalität (um doppelte Effekte zu vermeiden). Stattdessen bindest Du die Lytebox-Funktion "launch()" selbst an diese Links, jedoch mit der jQuery .live() Funktion (anstelle eines einfachen .click() ). Dann gilt dieses Event nänlich auch für neue Links.

Geil geil, habs genau so hinbekommen!

Danke vielmals!

Forum für CMS/made simple

#1 07. Mai 2012 12:11

[GELÖST] Gallery Modul AE-Gallery Template & Lytebox - Problem

#2 07. Mai 2012 13:10

Re: [GELÖST] Gallery Modul AE-Gallery Template & Lytebox - Problem

#3 07. Mai 2012 14:58

Re: [GELÖST] Gallery Modul AE-Gallery Template & Lytebox - Problem

#4 09. Mai 2012 08:21

Re: [GELÖST] Gallery Modul AE-Gallery Template & Lytebox - Problem

Fußzeile des Forums