Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: cycling divs?

  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts

    cycling divs?

    Hello, I have a sort of slideshow, and the thumbnails can be cycled by clicking a right or left arrow. Currently the thumbnails are referenced in the script like this, captions = ["<div id=thumb1></div>", "<div id=thumb2></div>", "<div id=thumb3></div>"]; . But what I'm trying to figure out is how to reference them by the divs integer, so the default image that shows up would be #thumb1, then when I click the right arrow, it would switch to #thumb2, then #thumb3 and so on. And of course I would then want the thumbnails to cycle backwards when using the left arrow. I want to do this because there will be hundreds of thumbnails to cycle through, so it would make things simpler. I believe it can be done somehow using the +i or +r (like "#thumb"+i ) as I've seen similar scripts use those, but don't know how to implement that into the script?

    Also, with the current script I have, the divs that are placed in the 'captions', aren't working with my jQuery. For instance I want an element (#full1) to show when I click on #thumb1, but instead nothing happens. Apparently the divs aren't looked at the same way by jQuery when placed in 'captions'. The function I'm using for this is, $("#thumb1").click(function(){$("#full1").show();}); .

    The script I have currently is pretty simplistic and I may just need to go with something completely different. Honestly I'd like to do this completely with jQuery if possible. But JavaScript would also probably do fine. Any ideas would be greatly appreciated. Here is the test page- http://resin.webs.com/new2.html and the script-

    Code:
    captions = ["<div id=thumb1></div>", "<div id=thumb2></div>", "<div id=thumb3></div>"];
    
    var curPic = 0;              
    function movePix(moveBy)
    {
        curPic = (curPic + moveBy + captions.length) % captions.length;
        document.getElementById("caption").innerHTML = captions[curPic];
    }
    function SETUP( )
    {
        movePix(0);
    }
    
    $("#thumb1").click(function(){
    $("#full1").show();
    });

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    OK, if you want that done with jQuery and you are also using jQuery in your code then clearly moving it to the jQuery section would be appropriate in my opinion. You know, the thing with jQuery (or JS in general) is that it should be used to enhance an already working site. That means ideally you would have the thumbnail images (what you call “caption” here) in your HTML already and wrapped with an anchor element linking to the big image (or whatever “#full” is supposed to be). Then you use jQuery to loop through these images and instead of going to the big image the image would be shown right in the page without reloading. So, effectively this would result in code like this:

    Code:
    <div class="thumbs">
    	<a href="fullimage1.jpg"><img src="thumb1.jpg" alt="" /></a>
    	<a href="fullimage2.jpg"><img src="thumb2.jpg" alt="" /></a>
    	<a href="fullimage3.jpg"><img src="thumb3.jpg" alt="" /></a>
    </div>
    Then you use jQuery to generate your functionality (the back/forward buttons, the full image display area, etc.) on the fly rather than hard coding it into the HTML because if JS was disabled nothing would work so there is no point in having empty or non-functional elements in your HTML. So, jQuery generates the buttons etc.:
    PHP Code:
        $('.thumbs')
            .
    wrap($('<div>', {'class''thumb_wrapper'}))
            .
    before($('<a>', {'class''back'}))
            .
    after($('<a>', {'class''forward'}))
            .
    find('a:first-child')
                .
    addClass('current')
                .
    end()
            .
    parent() // that’s the thumb_wrapper
                
    .after($('<div>', {'class''full'})); 
    Here I’ve just added two anchors as buttons and the arrow images should be applied by CSS as background images. Also, jQuery is adding a class “current” to the first anchor. In the CSS you’d hide all anchors except those with that class. This way, later on, jQuery only needs to change the class name to hide or show the images. If you inspect that in Firebug or any debugging tool you’ll see that it has generated HTML like this:
    Code:
    <div class="thumb_wrapper">
      <a class="back"></a>
      <div class="thumbs">
    	<a class="current" href="fullimage1.jpg"><img src="thumb1.jpg" alt=""></a>
    	<a href="fullimage2.jpg"><img src="thumb2.jpg" alt=""></a>
    	<a href="fullimage3.jpg"><img src="thumb3.jpg" alt=""></a>
      </div>
      <a class="forward"></a>
    </div>
    <div class="full"></div>
    Now you would add an onclick event to the buttons that shows the next or previous images, respectively:
    PHP Code:
        $('.thumbs')
            .
    wrap($('<div>', {'class''thumb_wrapper'}))
            .
    before($('<a>', {
                
    'class''back',
                
    click: function() {
                    var 
    currImg = $(this).next().find('.current');
                    
    currImg
                        
    .removeClass('current')
                        .
    prev()
                            .
    addClass('current');
                }
            }))
            .
    after($('<a>', {
                
    'class''forward',
                
    click: function() {
                    var 
    currImg = $(this).prev().find('.current');
                    
    currImg
                        
    .removeClass('current')
                        .
    next()
                            .
    addClass('current');
                }
            }))
            .
    find('a:first-child')
                .
    addClass('current')
                .
    end()
            .
    parent() // that’s the thumb_wrapper
                
    .after($('<div>', {'class''full'})); 
    This isn’t perfect yet as it doesn’t take the situation into account when you’re at the first or last item and click the back/forward buttons, respectively. You can use jQuery’s index() function to check whether the item with the “current” class is the first or last one and take appropriate action (I don’t have the time right now, maybe later, if you haven’t found out yourself).

    Now, you still need to show the big image when you click the small ones. Therefore we add to our script the following:
    PHP Code:
        $('.thumbs')
            .
    wrap($('<div>', {'class''thumb_wrapper'}))
            .
    before($('<a>', {
                
    'class''back',
                
    click: function() {
                    var 
    currImg = $(this).next().find('.current');
                    
    currImg
                        
    .removeClass('current')
                        .
    prev()
                            .
    addClass('current');
                }
            }))
            .
    after($('<a>', {
                
    'class''forward',
                
    click: function() {
                    var 
    currImg = $(this).prev().find('.current');
                    
    currImg
                        
    .removeClass('current')
                        .
    next()
                            .
    addClass('current');
                }
            }))
            .
    find('a:first-child')
                .
    addClass('current')
                .
    end()
            .
    parent() // that’s the thumb_wrapper
                
    .after($('<div>', {'class''full'}))
                .
    end()
            .
    children('a')
                .
    click(function(e) {
                    
    e.preventDefault();
                    var 
    ref = $(this).attr('href');
                    var 
    full = $(this).closest('.thumb_wrapper').next();
                    if(!
    full.children('img').length) {
                        
    full.append($('<img>', {srcref}))
                    }
                    else {
                        
    full.children('img').attr('src',ref);
                    }
                }); 
    This is how it’s done all without manual adjustments. You can add as many thumbnail images as you want.

  • #3
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you very much for your detailed reply. But unfortunately this is not working at all for me. Not sure what I'm missing. I believe I've done everything you listed. Here's the test page- http://resin.webs.com/new2b.html . Wasn't sure what you meant by 'hide' the anchors, I tried setting them to display:none but then those images never show up at all. And the arrow images are each displaying twice, not sure what's going on here, looks a total mess!

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    You have done more than I listed. You don’t need the backforward buttons in the HTML, the script is generating them itself as well as the “current” class (I just posted that as example what it looks like when JS is done generating it). That’s why you see the buttons twice: you see your buttons and the script generated buttons. All you need as static HTML is what I posted first:
    Code:
    <div class="thumbs">
    	<a href="fullimage1.jpg"><img src="thumb1.jpg" alt="" /></a>
    	<a href="fullimage2.jpg"><img src="thumb2.jpg" alt="" /></a>
    	<a href="fullimage3.jpg"><img src="thumb3.jpg" alt="" /></a>
    </div>
    And the jQuery is building everything around that. It’s adding the buttons, it’s adding the “.full” div etc.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •