CODEWITHSUNDEEP
jquerycsswordpress
nellygrl
nellygrl

Reputation: 657

jQuery Slideshows on Same Page Move Together on Click

I am creating a jQuery slideshow and I've made the slideshow work well, the only problem is, once I have more than one slideshow on the page, when you click the next button on one of them, the other slideshow moves to the next slide as well and I can't figure out why.

EDIT: A stackoverflow user suggested a fix (thank you) of adding a slideshow ID to each of the slides so that each would have a unique selector. The only issue is the slideshows are being generated in the WordPress loop and I'm not sure of any way to make WordPress assign each one a unique ID...

If anyone could help me figure this out, it would be greatly appreciated. I've duplicated the issue on this jsFiddle: http://jsfiddle.net/RsLAA/1/ and here's my code.

CSS:

.slideshow {
    background-color: #DEDFCC;
    width: 100%;
    height: 320px;
    position: relative;
    }

.slideContainer {
    padding: 10px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    }

.slide {
    width: 60%;
    height: 300px;
    float: left;
    text-align: center;
    background-color: #C9B7B7;
    }

.slideMiddle {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.slide img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    }

.slideInfo {
    width: 40%;
    height: 80%;
    float: right;
    padding: 10px;
    }

.slideNav {
    width: 100%;
    padding: 10px;
    background-color: #C9B7B7;
    color:  #DEDFCC;
    }

.prevSlide {
    width: 33.3%;
    float: left;
    }

.slideCount {
    width: 33.3%;
    float: left;
    text-align: center;
    font-weight: bold;
    }

.nextSlide {
    width: 33.3%;
    float: right;
    text-align: right;
    }

.slideCredit {
    width: 40%;
    font-style: italic;
    font-size: 12px;
    }

.fix {
    clear: both;
    }

HTML:

<div class="postContainer">
    <h1><?php the_title(); ?></h1>
    <?php the_content(); ?>

    <?php $slides = types_child_posts('slideshow'); ?>
    <?php if($slides) { ?>
        <div class="slideshow">
            <?php foreach ($slides as $slide) { ?>

              <?php if (get_post_meta($slide->ID, 'wpcf-image', true)) {
                  $image = get_post_meta($slide->ID, 'wpcf-image', true);
                  $caption = get_post_meta($slide->ID, 'wpcf-caption', true);
                  $credit = get_post_meta($slide->ID, 'wpcf-credit', true);
                  ?>

                <div class="slideContainer">
                  <div class="slide">
                    <span class="slideMiddle"></span><img src="<?php echo $image; ?>">
                  </div>
                  <div class="slideInfo">
                    <p class="slideCaption">


  <p><?php the_title(); ?></p>
                  <?php echo $caption; ?>
                </p>
                <p class="slideCredit">
                  <?php echo $credit; ?>
                </p>
              </div> <!--slideInfo end-->
              <div class="fix"></div>
            </div> <!--slideContainer end-->
          <?php } ?> <!--end if each if-->
        <?php } ?> <!--end each-->
    </div><!--slideshow end-->
    <div class="slideNav">
        <div class="prevSlide">
          <i class="fa fa-chevron-left fa-2x"></i>
        </div>
        <div class="slideCount"></div>
        <div class="nextSlide">
          <i class="fa fa-chevron-right fa-2x"></i>
        </div>
        <div class="fix"></div>
    </div>
<?php } ?> <!--end if-->

jQuery:

$(document).ready(function() {

  $(".slideshow").each(function() {
    var slideshow = $(this);
    var slides = $(slideshow).children().length;
    var n = 1;

    slideshow.children().hide();

    if(n == 1){
        $(".prevSlide").hide();
    }

    slideshow.children(':nth-child(' + n + ')').show();

    $( ".slideCount" ).append(  n + "/" + slides );

    $('.nextSlide').click(function (){
        if(n == 1){
            n++;
            $(".prevSlide").show();
            $(".nextSlide").show();
            slideshow.children().hide();
            slideshow.children(':nth-child(' + n + ')').show();
            $( ".slideCount" ).empty();
            $( ".slideCount" ).append(  n + "/" + slides );
        }else if(n > 1) {
            n++;
            slideshow.children().hide();
            slideshow.children(':nth-child(' + n + ')').show();
            $( ".slideCount" ).empty();
            $( ".slideCount" ).append(  n + "/" + slides );
            if(n == slides){
                $(".prevSlide").show();
                $(".nextSlide").hide();
            }
        }
    });
    $('.prevSlide').click(function (){
        if(n == slides) {
            n--;
            $(".prevSlide").show();
            $(".nextSlide").show();
            slideshow.children().hide();
            slideshow.children(':nth-child(' + n + ')').show();
            $( ".slideCount" ).empty();
            $( ".slideCount" ).append(  n + "/" + slides );
        }else if(n > 1) {
            n--;
            slideshow.children().hide();
            slideshow.children(':nth-child(' + n + ')').show();
            $( ".slideCount" ).empty();
            $( ".slideCount" ).append(  n + "/" + slides );
            if(n == 1){
                $(".prevSlide").hide();
                $(".nextSlide").show();
            }
        }
    });


  }); // each 1 end

}); // ready method end​​​​​​​​​​​

Upvotes: 0

Views: 104

Answers (2)

Devima
Devima

Reputation: 1566

After a bit of testing I found the solution to your problem.
Fiddle
In this way no html tag is renamed or changed, the only thing that changes is the jquery code and a css rule:

.slideContainer {
    //this property
    background-color: #DEDFCC;
    padding: 10px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

For me this is a good sloution jquery code is less and final result seems also the same:

   <script type="text/javascript">
$(document).ready(function() {
    $('.slideCount').each(function(){
        var text='1/'+$(this).parents('div.postContainer').find('.slideContainer').length
        $(this).text(text)
        })

    $('.prevSlide,.nextSlide').show()   

    $('div.nextSlide').click(function (){
        var count=parseInt($(this).siblings('.slideCount').text())
        var slideshow=$(this).parents('div.postContainer').find('.slideshow')
        var slides = $(slideshow).children().length;
        if(count===slides){count=1}else{count++}
        $(this).parents('div.postContainer').find('div.slideContainer:first').appendTo(slideshow) 
        $(this).siblings('.slideCount').text(count+'/'+slides)
    });

    $('.prevSlide').click(function (){
        var count=parseInt($(this).siblings('.slideCount').text().slice(0,-2))
        var slideshow=$(this).parents('div.postContainer').find('.slideshow')
        var slides = $(slideshow).children().length;
        if(count===1){count=slides}else{count--}
        $(this).parents('div.postContainer').find('div.slideContainer:last').prependTo(slideshow) 
        $(this).siblings('.slideCount').text(count+'/'+slides)  
    });
}); // ready method end​​​​​​​​​​​
</script>

If you want the Gallery behave exactly like your example (arrows sx dx that disappear when all the images have been browsed).
Watch this other Fiddle
in this case the css changes are slightly more, check the css section of fiddle page.
If you like these solution remember to vote me;)
thanks.

Upvotes: 0

user3591116
user3591116

Reputation: 9

Thank you for posting such detailed question. From quick view of code I can tell you are using class selector. jQuery needs someway to tell which slideshow's next/previous button was clicked. For that you can enclose the functionality into a function like this

function addSlideShow(div_id){

$(div_id+".slideshow").each(function(){
 //rest of your function with embedded div id

});

}

addSlideShow('#slideshow1');

For html

<div id="slideshow1" class="slideshow">...

Upvotes: 1

Related Questions