使用转发器字段在一个页面上进行多个幻灯片放映

Question

I would like to display multiple slideshow on one page from my website. I'm using a repeater ACF to enter my images. I'm not able to know in advance how many slideshows are going to be displayed

when one slideshow is displayed, everything works perfectly, but when 2 are displayed, It doesn't work anymore.

does anyone knows how I can fix it ?

here is a basic code without the repeater and with 2 slideshows :

http://jsfiddle.net/XRpeA/13/

<div id="slideframe">
    <img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
    <img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
    <img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
    <div id="counter">image <span id="current">1</span> / <span id="total"></span></div>

 <br><br>

<div id="slideframe">
<img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
<img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
<img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
<div id="counter">image <span id="current">1</span> / <span id="total"></span></div>

and here is my code with the repeater :

http://jsfiddle.net/XRpeA/14/

<?php if(get_field('images')): ?>

<div id="counter_2"><span id="current">1</span> / <span id="total"></span></div>
    <div id="slideframe">

    <?php while(has_sub_field('images')): ?>
        <?php if(get_sub_field('image') != ''){ ?>
<img class="image_news" src="<?php the_sub_field('image'); ?>"/>

<?php } ?>
<?php endwhile; ?> 
</div>

<?php endif; ?>

thanks a lot

Answer 1

Ok, so I did it just for you as I promiced, thought I thought it will be faster :)

Result

http://skyloveagency.com/new/ (will remove tomorrow)

Fields:

photo_repeater - repeater

---photo_slider - repeater

------photo_block - image with URL output

Full script, not optimized but works perfectly

<?php
/**
* Template Name: Profiles2 
*/

get_header(); ?>

<?php

// query

$args = array(

'post_type'          => 'profiles',

'show'               => 1

);

$wp_query = new WP_Query($args);

?>



<?php $random = 0;  
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<?php if(get_field('photo_repeater')): ?>

<?php while(has_sub_field('photo_repeater')): ?>

<?php $random++;  ?>        
<div id="slideframe<?php echo $random; ?>">

    <?php if(get_sub_field('photo_slider')): ?>

         <?php while( has_sub_field('photo_slider') ): ?> 

            <?php 
        $img_url = get_sub_field('photo_block');
        $image = aq_resize( $img_url, 200, 200, true );
        ?>
        <img class="image_news" src="<?php echo $image; ?>"  alt="111" />
         <?php endwhile; ?>     

    <?php endif; ?>

</div>
<br>
<div id="counter<?php echo $random; ?>">image <span id="current<?php echo $random; ?>">1</span> / <span id="total<?php echo $random; ?>"></span></div>

<script>
var count<?php echo $random; ?> = $('#slideframe<?php echo $random; ?> .image_news').length;
$("#total<?php echo $random; ?>").text(count<?php echo $random; ?>);
// set display:none for all members of ".pic" class except the first
$('#slideframe<?php echo $random; ?> .image_news:gt(0)').hide();

// stores all matches for class="pic"
var $slides<?php echo $random; ?> = $('#slideframe<?php echo $random; ?> .image_news');

$slides<?php echo $random; ?>.click(function () {
// stores the currently-visible slide
var $current<?php echo $random; ?> = $(this);
if ($current<?php echo $random; ?>.is($slides<?php echo $random; ?>.last())) {
     $("#current<?php echo $random; ?>").text("1");
     $current<?php echo $random; ?>.hide();
     $slides<?php echo $random; ?>.first().show();
 }
// else, hide current slide and show the next one
else {
$("#current<?php echo $random; ?>").text($current<?php echo $random; ?>.next().index()+1);
$current<?php echo $random; ?>.hide().next().show();
    }
});
</script>
<br><br>    

<?php endwhile; ?> 


<?php endif; ?>     

<?php endwhile;  ?>

<?php get_footer(); ?>