Блог

Я сделал слайд-шоу в WordPress с помощью php jQuery, в основном это работает следующим образом: В сообщениях я создал пользовательские поля с именами «sliderPhotoImg1», «sliderPhotoImg2» и т.д. С помощью php он берет все фотографии из пользовательских полей и помещает внутрь как

После этого с помощью jQuery я делаю слайд-шоу, это просто и работает только для одного поста, но если у меня есть слайд-шоу в каждом посте, то оно не работает для каждого div $ («#Slider-«), но индекс img, который должен отображаться, переходит от поста к посту.

Вы можете найти проблему на www.acroart.pl

 <div id="Slider-<?php the_ID(); ?>">
<?php 
$dot = (int)get_post_meta($post->ID, "dots", true); 

for($i = 0; $i< $dot; $i  ){
if($i <= $dot){
    echo '<div><img src="';
    echo get_post_meta($post->ID, "sliderPhotoImg".($i 1), true);
    echo '"></div>';
}
}                               
?>

</div>
<script>
$( "#Slider-<?php the_ID();?> > div:gt(0)" ).hide();
setInterval( function () {
    $( "#Slider-<?php the_ID();?> > div:first" )
        .fadeOut( 1000 )
        .next()
        .fadeIn( 1000 )
        .end()
        .appendTo( "#Slider-<?php the_ID();?>");
    }, 3000 );
    $("#Slider-<?php the_ID();?> > div > img").css({
        "position": "relative",
        "width": "600px",
        "height": "400px"
});
</script>
  

Я добавил echo в php-код внутри jquery, попробуйте это и расскажите нам

 <div id="Slider-<?php the_ID(); ?>">
<?php 
$dot = (int)get_post_meta($post->ID, "dots", true); 

for($i = 0; $i< $dot; $i  ){
if($i <= $dot){
    echo '<div><img src="';
    echo get_post_meta($post->ID, "sliderPhotoImg".($i 1), true);
    echo '"></div>';
}
}                               
?>

</div>
<script>
$( "#Slider-<?php echo the_ID();?> > div:gt(0)" ).hide();
setInterval( function () {
    $( "#Slider-<?php echo the_ID();?> > div:first" )
        .fadeOut( 1000 )
        .next()
        .fadeIn( 1000 )
        .end()
        .appendTo( "#Slider-<?php the_ID();?>");
    }, 3000 );
    $("#Slider-<?php the_ID();?> > div > img").css({
        "position": "relative",
        "width": "600px",
        "height": "400px"
});
</script>