prettyPhoto probleem

[TakkUNL]

Ik ben op dit moment bezig een website te maken in Wordpress, en hierbij gebruik ik een slider (Nivo Slider) op de homepage. Deze slider pakt de laatste 5 posts in de categorie Videos, en zet de titel + samenvatting in de caption.
De titel linkt naar een youtube adres, en de bedoeling is dat dit youtube filmpje laad in een prettyPhoto box. Het plaatje in de slider linkt ook naar deze prettyPhoto box, dit werkt echter zonder problemen.

Het probleem is dat dit alleen werkt bij de eerste slide, voordat er een animatie heeft plaats gevonden. In eerste instantie werkte dit helemaal niet, maar na jQuery in noconflict modus te gebruiken werkt het op de 1e slide.

Hieronder de code waarmee ik de slider activeer.

code:

 <div id="headline_slider" class="nivoSlider">            
                
          <?php
          $captions = array();
          $my_query = new WP_Query('showposts=5&category_name=videos');
          while ($my_query->have_posts()) : $my_query->the_post();
          $captions[] = '<a rel="prettyPhoto" class="caption_links" href="'.get_field("youtube").'" title="'.get_the_title($post->ID).'">'.get_the_title($post->ID).'</a><p class="headlinecaption">'.get_the_excerpt().'<a class="headlinecaption" href="'.get_permalink($post->ID).'">Lees Meer</a></p>';
          ?>
          <a rel="prettyPhoto" href="<?php the_field('youtube'); ?>"><img src="<?php the_field('nivoimage'); ?>" alt="<?php the_title_attribute(); ?>" title="#caption<?php echo count($captions)-1; ?>" /></a>
          <?php endwhile; ?>
        
        </div>
            
            <?php foreach($captions as $key => $caption) : ?>
            <div id="caption<?php echo $key; ?>" class="nivo-html-caption">
                <?php echo $caption; ?>
            </div>
            <?php endforeach; ?>

De pagina zelf is te zien op http://ijstapijt.nl/wp_test Op dit moment heeft alleen de 1e slider een Youtube link, maar wanneer je na een animatie van de slider teruggaat naar de 1e slide, stuurt de link je direct naar Youtube. de prettyPhoto box werkt niet meer.

[ Voor 5% gewijzigd door TakkUNL op 23-12-2012 16:46 ]

[m4ikel]

Beste TakkUNL,

Dit komt omdat de Nivo Slider de HTML elementen verplaatst / verwijderd in de DOM. Hierdoor zijn de events welke gebind zijn door jQuery / javascript verwijderd.

De oplossing is om het script:

code:

jQuery(function($) {
$('a[rel^="prettyPhoto"]').prettyPhoto();
});

Op callback van de Nivo Slider te plaatsen, of even te kijken of er een method binnen prettyPhoto bestaat die na initialisatie het toevoegen van nieuwe "listeners" toestaat. Beide scripts ken ik verder niet dus dat zou ik ook even moeten uitzoeken.

Zie hiervoor: http://www.no-margin-for-...tbox-clone/documentation/

code:

changepicturecallback: function(){}, /* Called everytime an item is shown/changed */

En zie: http://stackoverflow.com/...jquery-nivo-slider-plugin

Misschien kom je er zo al wel uit, zoniet dan hoor ik het graag!

[TakkUNL]

Bedankt! Dit heeft het inderdaad opgelost!

Heb uiteindelijk dit script

code:

jQuery(function($) {
$('a[rel^="prettyPhoto"]').prettyPhoto();
});

in de afterChange functie van de Nivo Slider geplaatst, en dit werkt inderdaad prima! Mijn dank is groot