toggling a div with caption/description within a for loop processed by galleriffic.js
<p>Here is the website: <a href="http://www.unamore.berioza.nl/series/parijs/" rel="nofollow">http://www.unamore.berioza.nl/series/parijs/</a></p>

<p>galleriffic creates a list of thumbs on the bottom which fire the larger images in the center. When you click "Pour en savoir plus sur cette peinture" a div with a description toggles over the larger image. </p>

<p>It all works fine .. unless you try to toggle a description of an image you have fired a second time. (Go to any other painting and go back to the first painting and try to toggle again. Doesnt work no more.) </p>

<p>The code: </p>

<p>// basic galleriffic stuff </p>

<pre><code>&lt;div id="thumbs"&gt;
&lt;ul class="thumbs noscript"&gt;
</code></pre>

<p>// getting images from wordpress attachments pro plugin </p>

<pre><code>&lt;?php $attachments = new AttachmentsPro();
$args   = array( 'instance'  =&gt; 'attachments', 'details'   =&gt; true  );
$attachments = $attachments-&gt;get_attachments( $args ); 
$total_attachments = count( $attachments );
</code></pre>

<p>// looping the images</p>

<pre><code>if( $total_attachments ) : for( $i=0; $i&lt;$total_attachments; $i++ ) : ?&gt; 
</code></pre>

<p>// image + caption html </p>

<pre><code>&lt;li&gt;&lt;a class="thumb" href="&lt;?php echo $attachments [$i]['url']; ?&gt;" name="&lt;?php echo      $attachments[$i]['fields'][3]; ?&gt;" title="&lt;?php echo $attachments[$i]['fields'][0]; ?&gt;"&gt;
            &lt;img src="&lt;?php echo $attachments [$i] ['src'] ['medium'] ['url']; ?&gt;" alt="&lt;?php echo $attachments[$i]['fields'][0]; ?&gt;" /&gt;
        &lt;/a&gt;
        &lt;div class="caption"&gt;
              &lt;div class="onder_image"&gt;
</code></pre>

<p>// the span that needs to be clicked </p>

<pre><code>&lt;span class="open_overlay"&gt;Pour en savoir plus sur cette peinture&lt;/span&gt;
</code></pre>

<p>// the div that needs to appear </p>

<pre><code>               &lt;div class="omschrijving"&gt;&lt;h4&gt;&lt;?php echo $attachments[$i]['fields'][0]; ?&gt;&lt;/h4&gt;&lt;?php echo $attachments[$i]['fields'][1]; ?&gt;
</code></pre>

<p>// the share buttons (yes problem persists when removed)</p>

<pre><code>&lt;div class="share"&gt;&lt;span class='st_facebook_large' displayText='Facebook'&gt;&lt;/span&gt;&lt;span class='st_twitter_large' displayText='Tweet'&gt;&lt;/span&gt;&lt;span class='st_pinterest_large'    displayText='Pinterest'&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;stLight.options({publisher: "364b319e-4f23-486e-9166-  2dee38333f31"}); &lt;/script&gt;
</code></pre>

<p>// 1st attempt with simple jquery (now turned off) </p>

<pre><code>&lt;script type="text/javascript"&gt;
//   $('.onder_image').click(function() { $('.omschrijving').toggle('slow'); return true; });
&lt;/script&gt;
</code></pre>

<p>// 2nd attempt with jquery .each loop (now turned on) </p>

<pre><code>&lt;script type="text/javascript"&gt;

$(document).ready(function() {

$('span').each(function() {
$(this).bind('click', function() {
$('.omschrijving').toggle('slow');
return false;
});
});
});
&lt;/script&gt;


&lt;/div&gt; &lt;/div&gt;&lt;/li&gt;&lt;?php endfor; endif; ?&gt;&lt;/ul&gt;&lt;/div&gt;
</code></pre>

<p>// the galleriffic (inc history) script </p>

<pre><code>&lt;script type="text/javascript"&gt;
        // We only want these styles applied when javascript is enabled

        $('div.content').css('display', 'block');

        $(document).ready(function() {              
            // Initialize Minimal Galleriffic Gallery
            $('#thumbs').galleriffic({
                imageContainerSel:      '#slideshow',
                controlsContainerSel:   '#controls',
                enableHistory:             true 
            });


function pageload(hash) { if(hash) { $.galleriffic.gotoImage(hash); } else {  }}

$.history.init(pageload);
$("a[rel='history']").live('click', function(e) { if (e.button != 0) return true;
var hash = this.href;
hash = hash.replace(/^.*#/, '');
$.history.load(hash);

return true;
});

});&lt;/script&gt;
</code></pre>

<p>First thing: script to toggle div only works when placed inside the for loop. At one point i thought i could do a separate each loop, outside the for loop, but to no avail. </p>

<p>Second, i have been reading about problems with jquery inside for loops, but then problem is described as jquery only working on last item in loop. In my case it works on all items, only never on the same item twice.</p>

<p>I am getting a little desperado here, so any sort of leads is much appreciated. </p>

<p>Thanks, Joera </p>
