✔ Shadowbox.setup() bei dynamischen Inhalten

[deb_ugger]

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:

<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:

<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

 

[deb_ugger]

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.

 

[Quaese]

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.

$(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

 

[deb_ugger]

Wow. Danke! Funktioniert!