CODEWITHSUNDEEP
javascriptjquery
kamui
kamui

Reputation: 3419

jQuery homemade slideshow code seems to be not picking up the current context of the images

I know this is going to be a simple problem but I've been looking at it all day and struggling to find an answer so hopefully you wonderful people will be able to help.

I have created my own javascript function making use of jQuery to create a slideshow. I know there are loads of free ones out there that I could use but the few that i tried did not allow multiple slideshows on the same page and that got me thinking that this shouldn't be too difficult to do.

On the page I have 2 of these div elements containing images

<div class="slider">
    <img src="./images/Hashimadisaster.png" alt="" title="Hashima Island" class="alignnone size-full wp-image-842">
    <img src="./images/DSCN3674-1024x767.jpg" alt="" title="Legs glued together" class="alignnone size-large wp-image-834">
    <img src="./images/DSCN3672-768x1024.jpg" alt="" title="The front and rear legs together standing on an Eldar Falcon" class="alignnone size-large wp-image-836">
    <img src="./images/DSCN3671-1024x768.jpg" alt="" title="Left rear leg glued into position and balanced to stand on its own" class="alignnone size-large wp-image-835">
    <img src="./images/conseptiual-drawing-for-titan-base-1024x609.jpg" alt="Conceptual drawing for titan base" title="Conceptual drawing for titan base" class="alignnone size-large wp-image-841">
</div>

and the javascript code

1. function slidermethod(){
2.  var HeightOfBox= 400;
3.  var timeoutmilliseconds = 3000;
4.  if($('.slider').length){
5.      $('.slider').each(function(){
6.          $(this).css("position","relative");
7.          $(this).children('img').css("position","absolute").css("top","0").css("left","0");  
8.          if($(this).children('img').length){
9.              if($(this).children(".currentslide").length == 0){
10.                 //alert($(this).children("img").length);
11.                 //alert("1");
12.                 // this seems to occur every time it is called
13.                    $(this).children('img:first').addClass(".currentslide");
14.             }
15.             else{
16.                 if($(this).children('.currentslide').next().length)    {    
17.                     alert("2");
18.                     var nextchild = $(this).children('.currentslide').next();
19.                     $(this).children('img').removeClass('.currentslide');
20.                     $(nextchild).addClass(".currentslide");
21.                 }else{                  
22.                     alert("3");
23.                     $(this).children('img').removeClass('.currentslide');
24.                     $(this).children('img:first').addClass(".currentslide");
25.                 }
26.             }               
27.         }
28.         $(this).children('img').css("height",HeightOfBox + "px");
29.         $(this).css("height",HeightOfBox + "px");           
30.     });
31.     setTimeout("slidermethod();",timeoutmilliseconds); 
32.        // every 3 seconds call this method
33. }   
34.}
35.slidermethod(); // call the method

The code runs without any errors popping up and grabs all the images, resizes them and places them on top of one another. I have a css stylesheet which has .currentslide as z-index:2; and all the other images as 1. but when it gets to the bottom of the code, there is a settimeout() which calls the same method again 3 seconds later but it always seems to go into the if statement 

9.    if($(this).children(".currentslide").length == 0){

but if I firebug it I can see that the first image in the group of images has the class of "currentslide", so this should not be 0. not really sure why this is not working as expected.

Upvotes: 4

Views: 311

Answers (2)

mikakun
mikakun

Reputation: 2265

there is a mistake here

.addClass(".currentslide")

should be 

.addClass("currentslide")

in all your addclass/removeclass you made the same mistake

and a nicer path to start your plugin

$.fn.extend({

    slider : function() {
       $(this).each(function() {
           var $sldr=$(this);

            $sldr.css("position","relative")
                 .find("img").css("position","absolute").css("top","0").css("left","0").end()
                 .find("img:first-child").addClass("currentslide").end()

                .on("nextslide",function() {
                        var $current = $sldr.find(".currentslide").removeClass("currentslide")
                        if ($current.next().get(0)) $current.next().addClass("currentslide") 
                        else    $sldr.find("img:first-child").addClass("currentslide")

                  });        
                 setTimeout(function(){$sldr.trigger("nextslide"),3000 });
        });
   return this;
   }
});
   $(".slider").slider();

edit to add that i copied your code but you should move those css properties in your css file, they don't need to be set in the plugin, so it'd become 

$sldr.on("nextslide",function() {
                        var $current = $sldr.find(".currentslide").removeClass("currentslide")
                        if ($current.next().get(0)) $current.next().addClass("currentslide") 
                        else    $sldr.find("img:first-child").addClass("currentslide")

                  }).find("img:first-child").addClass("currentslide");

Upvotes: 4

Ryan Conaway
Ryan Conaway

Reputation: 446

The reason your checks are failing is because .children() is returning 0.

Do something like this instead:

if($('.slider img').hasClass('currentslide').length < 1){ /*your code*/ }

I agree with mikakun. you sure are jumping into the DOM a lot by calling $(this). Set $('.slider') to a variable and use the variable where you need to.

Upvotes: 2

Related Questions