Jquery hierarchy problem.

**Levi_** · 07-08-2008, 09:30 PM

Hi, I am working on making a photo gallery and I am having a little trouble using jQuery to move through the div's I made and I am sure it has to do with how I am trying to do so. I was just looking for some fresh eyes to check it over and let me know if they see what I am doing wrong.

I set it up so that each image is wrapped in a div class tag and I am attempting to use the .next() function in jQuery to navigate them but am unable to. It acts as if I am using nextAll() instead.

Thanks,
Levi

jQuery

Code:

$(document).ready(function() {

    $("div#slideshow").children("div.slide_image").hide();
  $("div.slide_image:eq(0)").show();
  
  $("div#prev").click(function()
{
  $("div.slide_image").hide();
  $("div#slideshow").prev("div.slide_image").fadeIn();
});

  $("div#next").click(function()
{
  $("div.slide_image").hide();
  $("div#slideshow").next("div.slide_image").fadeIn();
});
  
});

HTML

Code:

<html>
<head>
<title>Youth Impact Windham County</title>
<link rel="stylesheet" type="text/css" href="youth-impact.css" />
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
</head>
<body>
        
<div id="main">
    
    <div id="banner"></div>
        <div id="left">
            <div id="inner">
                    <div class="link1"><a href="index.html">Home</a></div>
                    <div class="link1"><a href="about.html">About Us</a></div>
                    <div class="link1"><a href="partners.html">Partners</a></div>
                
                    <div class="link1"><a href="projects.html">Projects</a></div>
                    <div class="link1"><a href="involved.html">Become Involved</a></div>
                        <div class="link1"><a href="http://windhamyouth.wordpress.com/">Youth Blog</a></div>
            </div>    
        </div>
        
        <div id="right">
            <div class="header">Photo Voice</div>
            <div class="content">
                <div id="slideshow">
                    
<!--- Enclose each new image inside of these tags ---->
                    <div class="slide_image"><img class="slide" src="images/photovoicephotos/web-photovoice/123flowers-bf.jpg" alt="" />
                    <div class="caption">
                        Caption...
                    </div>    
                    </div>
<!---- End image tags ---->
        
                    <div class="slide_image"><img class="slide" src="images/photovoicephotos/web-photovoice/163shoes-bf.jpg" alt="" />
                    <div class="caption">
                        Caption2...
                    </div>    
                    </div>
                    
                    <div class="slide_image"><img class="slide" src="images/photovoicephotos/web-photovoice/167stairs-bf.jpg" alt="" />
                    <div class="caption">
                        Caption3...
                    </div>    
                    </div>
                    
                    <div class="slide_image"><img class="slide" src="images/photovoicephotos/web-photovoice/172building-bf.jpg" alt="" />
                    <div class="caption">
                        Caption4...
                    </div>    
                    </div>
                    
                    <div class="slide_image"><img class="slide" src="images/photovoicephotos/web-photovoice/176diner-bf.jpg" alt="" />
                    <div class="caption">
                        Caption5...
                    </div>    
                    </div>
                    
                    <div class="slide_image"><img class="slide" src="images/photovoicephotos/web-photovoice/177wurstdiner-bf.jpg" alt="" />
                    <div class="caption">
                        Caption6...
                    </div>    
                    </div>
                    
                    <div class="slide_image"><img class="slide" src="images/photovoicephotos/web-photovoice/190oneway-bf.jpg" alt="" />
                    <div class="caption">
                        Caption7...
                    </div>    
                    </div>
                    
                    <div class="slide_image"><img class="slide" src="images/photovoicephotos/web-photovoice/228cross-bg.jpg" alt="" />
                    <div class="caption">
                        Caption8...
                    </div>    
                    </div>
                    
                    <div class="slide_image"><img class="slide" src="images/photovoicephotos/web-photovoice/350clocktower-bf.jpg" alt="" />
                    <div class="caption">
                        Caption9...
                    </div>    
                    </div>
                    
                    <div class="slide_image"><img class="slide" src="images/photovoicephotos/web-photovoice/361burntbldg-bf.jpg" alt="" />
                    <div class="caption">
                        Caption10...
                    </div>    
                    </div>
                    
                    <div class="slide_image"><img class="slide" src="images/photovoicephotos/web-photovoice/385dam-bf.jpg" alt="" />
                    <div class="caption">
                        Caption11...
                    </div>    
                    </div>
                    
                    <div class="slide_image"><img class="slide" src="images/photovoicephotos/web-photovoice/400dairyguy-bg.jpg" alt="" />
                    <div class="caption">
                        Caption12...
                    </div>    
                    </div>
                    
                    <div class="slide_image"><img class="slide" src="images/photovoicephotos/web-photovoice/412steeple-bf.jpg" alt="" />
                    <div class="caption">
                        Caption13...
                    </div>    
                    </div>
                    
                    <div class="slide_image"><img class="slide" src="images/photovoicephotos/web-photovoice/495cigs-bf.jpg" alt="" />
                    <div class="caption">
                        Caption14...
                    </div>    
                    </div>
                    
                    <br />
                    <div id="prev"><a href="#">&lt;&lt;&lt;</a></div>
                    <div id="next"><a href="#">&gt;&gt;&gt;</a></div>
                </div>

</div>
</div>
<div id="bottom"></div>
</body>
</html>

http://levijackson.net/gallery/bellowfalls.html

I am uploading the images right now so they may not all be there yet.

**wayfarer07** · 11:07 PM

It it easier to use one of these plugins to accomplish what you are trying to do: http://www.gmarwaha.com/jquery/jcarousellite/index.php http://malsup.com/jquery/cycle/

***EDIT***
BTW, I think you misunderstand the .next() function.
When you do this:

Code:

$("div#slideshow").next("div.slide_image")

What you are doing is selecting the next sibling to div#slideshow that has a class of 'slide_image'. This doesn't work because the elements with that class are all children of #slideshow.

To select a certain child, you could do something like this:

Code:

$("div#slideshow .slide_image:nth-child(1)").fadeIn(400);

Then replace the (1) with a variable that increments or the reverse depending on which button is pushed. However, the plugins are still easier...

***EDIT AGAIN***

Oh, and I might point out, that with the above method you will have to restart the order when you reach the maximum length of the $("div#slideshow .slide_image) array, which means that you must evaluate the incrementing variable against $("div#slideshow .slide_image").length;

**Levi_** · 07-09-2008, 09:21 PM

Thanks! I'm going to get a jQuery book and read it now. For what I needed to do the Cycle plugin worked great!