несколько слайд-шоу на одной странице с использованием полей ретранслятора

Question

Я хотел бы отобразить несколько слайд-шоу на одной странице с моего сайта. Я использую повторитель ACF для ввода моих изображений. Я не могу заранее знать, сколько показов слайдов будет отображаться

Когда отображается одно слайд-шоу, все работает отлично, но когда отображается 2, оно больше не работает.

Кто-нибудь знает, как я могу это исправить?

здесь является основной код без ретранслятора и с 2-мя слайд-шоу:

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> 

и вот мой код с ретранслятором:

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; ?> 

большое спасибо

Answer 1

Хорошо, так что я сделал это только для вас, как я promiced, подумал я думал, что это будет быстрее :)

Результат

http://skyloveagency.com/new/ (удалит завтра)

Поля:

photo_repeater - повторитель

--- photo_slider - повторитель

------ photo_block - изображение с выходом URL

Полный сценарий, не оптимизирован, но работает отлично

<?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(); ?>