Hallo!

Ich kämpfe seit Stunden mit einem Shadowbox-Problem und hoffe es kann mir wer weiterhelfen. Ich habe eine Wordpress-Seite, auf der ich alle Einträge inkl. Bilder auf einmal ausgebe. Da aber immer nur 1 Eintrag inkl. dessen Bilder sichtbar sein soll (das steuere ich über ein Javascript-Menü), sind alle Inhalte in DIVs versteckt. Abhängig von der Selektion (auf das Element <a class="element" id="...">...</a>) wird ein Eintrag und seine Bilder in das sichtbare DIV PortfolioContainer kopiert.

Mein Problem: Shadowbox will nicht funktionieren (es wird kein Javascript-Fehler ausgegeben). Ich hab schon alles probiert und es muss irgendwie am Initialisieren von Shadowbox liegen.

Hier ist das Javascript:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

<script type="text/javascript">   var oldPrjId = ""; var oldPrjContent = "";   // Initialisiere shadowbox Shadowbox.init();   $(function() {         // Navigation wird geklickt     $("a.element").click(function() {           // Fuelle das vorhin geleerte (und versteckte) DIV wieder mit seinen Inhalten         if(oldPrjId !== "") {             $('#item'+oldPrjId).append(oldPrjContent);         }                 // ID des selektierten Elements (z.B. "p2")         var SelectedId = $(this).attr('id');                 // Blende Container (in dem Inhalt dargestellt wird) aus, leere seinen Inhalt, kopiere Inhalt und Bilder hinein, und blende ihn wieder ein         $("#PortfolioContainer").fadeTo("fast", 0, function() {             // Container leeren             $("#PortfolioContainer").empty();                         // Hole Inhalt von versteckten DIV (z.B. "itemp2")             $("#PortfolioContainer").append($('#item'+SelectedId).html());                         // Damit nicht 2mal die gleich DIV-Ids vorkommen muss der Inhalt des versteckten DIVs geloescht werden. Dafuer wird er in Variablen zwischen-gespeichert.             oldPrjId = SelectedId;             oldPrjContent = $('#item'+SelectedId).html();                         // Inhalt des versteckten DIVs leeren (z.B. "itemp2"). Damit vermeide ich, dass 2mal die selben IDs vorkommen             $('#item'+SelectedId).empty();               // Container wieder einblenden             $("#PortfolioContainer").fadeTo("medium", 1);         });             // Leere den Shadowbox Cache und initialisiere Shadowbox neu            Shadowbox.clearCache();         Shadowbox.setup();     }); }); </script>

Und hier die Struktur des HTML:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<h1>Inhalt dynamisch</h1> <div id="PortfolioContainer"></div>   <a class="element" id="p1" href="javascript:;">     <div>Zeige Projekt 1</div> </a> <div id="itemp1" style="display: none">     <a href="Bild1.jpg" rel="shadowbox[1]"><img src="Bild1_thumb.jpg" /></a>     <a href="Bild2.jpg" rel="shadowbox[1]"><img src="Bild2_thumb.jpg" /></a>     <p>         Projektbeschreibung zu Projekt 1     </p> </div>     <a class="element" id="p2" href="javascript:;">     <div>Zeige Projekt 2</div> </a> <div id="itemp2" style="display: none">     <a href="Bild3.jpg" rel="shadowbox[2]"><img src="Bild3_thumb.jpg" /></a>     <a href="Bild4.jpg" rel="shadowbox[2]"><img src="Bild4_thumb.jpg" /></a>     <a href="Bild5.jpg" rel="shadowbox[2]"><img src="Bild5_thumb.jpg" /></a>     <p>         Projektbeschreibung zu Projekt 2     </p> </div>

Danke für die Hilfe!

Grüße
debugger

Damit man sich darunter auch etwas vorstellen kann hab ich mal ein kleines Demo gebastelt. Es ist in dem ZIP anbei oder auch hier anzusehen:

http://app.uidesign.at/shadowbox/

Es zeigt im oberen Bereich den dynamischen Inhalt (der nicht funktioniert) und im unteren den funktionierenden statischen Teil.

Hi,

füge den neuen Inhalt nicht mit html ein. Stattdessen klonst du den Inhalt, entfernst die IDs und hängst ihn in den Container ein.

Die Shadowbox-Funktionalität wird in der callback-Funktion der Methode fadeTo zugefügt.

Allerdings hat der IE ein Problem, da offensichtlich die Elemente noch nicht existieren, wenn die Shadowbox-Funktionalität über die Methode setup zugefügt wird. Aus diesem Grund wird das Öffnen über die open-Methode realisiert.

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

$(function() {     // Navigation wird geklickt   $("a.element").click(function() {       // ID des selektierten Elements (z.B. "p2")     var SelectedId = $(this).attr('id');       // Blende Container (in dem Inhalt dargestellt wird) aus, leere seinen Inhalt, kopiere Inhalt und Bilder hinein, und blende ihn wieder ein     $("#PortfolioContainer").fadeTo("fast", 0, function() {       // Container leeren       $("#PortfolioContainer").empty();         // Hole Inhalt von versteckten DIV (z.B. "itemp2")       $("#PortfolioContainer").append($('#item'+SelectedId).clone());       $("#PortfolioContainer *").show().attr('id', '');         // Container wieder einblenden       $("#PortfolioContainer").fadeTo("medium", 1, function(){         $('#PortfolioContainer a').click(function(evt){           Shadowbox.open(this);           evt.preventDefault();         });       });     });   }); });

Ciao
Quaese

Wow. Danke! Funktioniert!