Results 1 to 2 of 2

Thread: Slideshow with scrolling thumbnails.

  1. #1
    Join Date
    Sep 2010
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Slideshow with scrolling thumbnails.

    I currently use Flash for my galleries. I'd really like to change this to something iPhone/iPad compatible. It seems easy enough to use the ultimate fading slideshow for the main slideshow but was wondering if there were any great thumbnail solutions out there. I really like the way it works already, with scrolling through on the side (or bottom) of the main image. Here is the example: http://www.andreahalseyphotography.c...llery=newborns

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Currently published are (vertical):

    http://www.dynamicdrive.com/dynamici...ongallery2.htm

    and (horizontal):

    http://www.dynamicdrive.com/dynamici...iongallery.htm

    There's also another horizontal script of this type, but it duplicates the images for a continuous train:

    http://www.dynamicdrive.com/dynamici...wler/index.htm

    I'm currently working on a sort of hybrid of all three. But it isn't ready for release yet.

    I also have a unit for simplifying adding thumbnail controls to the Ultimate Fade In Slideshow. It's ready for release (just):

    Code:
    // Extra Buttons Script (c)2011 John Davenport Scheuer
    // as first seen in http://www.dynamicdrive.com/forums/
    // add on for Ultimate Fade In Slideshow
    // username: jscheuer1 - This Notice Must Remain for Legal Use
    jQuery.extend(fadeSlideShow.prototype, {
    	extraButtons: function(pend, pause){
    		var $ = jQuery, dm = this.setting.displaymode, ims = this.setting.imagearray.length,
    		$nav, $tog, $stopbut, $gobut, numbut, uFObj = this, i = 1, timer,
    		nav = function(num){
    			uFObj.navigate(num);
    			if(pause){
    				clearTimeout(uFObj.setting.playtimer);
    				clearTimeout(timer);
    				timer = setTimeout(resume, pause);
    			}
    		},
    		stop = function(e){
    			e.preventDefault();
    			uFObj.navigate(uFObj.setting.imgindex);
    		},
    		resume = function(e){
    			if(e && e.preventDefault){e.preventDefault();}
    			if(dm.type !== 'auto'){
    				dm.type = 'auto';
    				uFObj.showslide('next');
    			}
    		}, $buts;
    		if(pend){
    			++ims;
    			$stopbut = dm.type === 'auto' || dm.wraparound? $(this.setting.stopbut || '<input type="button" value="Stop" />').addClass('stop') : '';
    			$gobut = dm.type === 'auto' || dm.wraparound? $(this.setting.gobut || '<input type="button" value="Go" />').addClass('resume') : '';
    			numbut = this.setting.numbut || '<input type="button" value="%i" />';
    			$buts = $('<span class="stopgonums"></span>').append($stopbut);
    			for(i; i < ims; ++i){
    				$buts.append(function(){return $(numbut.replace(/%i/g, i)).addClass('numbut');});
    			}
    			$buts.append($gobut);
    			--ims;
    		}
    		$(function(){
    			$tog = uFObj.setting.$togglerdiv.add('.' + uFObj.setting.togglerid);
    			$nav = (pend? $tog[pend]($buts) : $tog)
    				.find('.stop').click(stop).end()
    				.find('.resume').click(resume).end()
    				.find('.numbut').click(function(e){
    					e.preventDefault();
    					nav(this.getAttribute('data-index') || ($nav.index(this) % ims));
    				});
    		});
    	}
    });
    Place that at the very end, after everything else in fadeslideshow.js.

    The way you use it is to declare a togglerid in the slideshow, and invoke it like so:

    Code:
    var mygallery = new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [700, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["image-3.jpg", "", "", "Leaves"],
    		["image-4.jpg", "http://en.wikipedia.org/wiki/Leaves", "_new", "Some day I'd like to explore these leaves!"],
    		["image-5.jpg", "", "", "Old Leaves"],
    		["image-6.jpg", "", "", "More Leaves"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:true},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "fadeshow1toggler"
    }).extraButtons(null, 6000);
    The null tells it you are supplying the markup, the 6000 is how many milliseconds to wait before resuming the slideshow if it is stopped by one of the thumbnail buttons. Omit that or set it to 0 to have the slideshow remain stopped after a thumbnail is clicked.

    Now, in addition to the usual class names that you could put in the toggler division, you may also have a pause, resume, and numbut. The numbuts will be counted in order for you. As long as you have one for each image, they will navigate to that image. Like:

    HTML Code:
    <div class="fadeshow1toggler">
    <img src="thumb-3.jpg" alt="" class="numbut">
    <img src="thumb-4.jpg" alt="" class="numbut">
    <img src="thumb-5.jpg" alt="" class="numbut">
    <img src="thumb-6.jpg" alt="" class="numbut">
    </div>
    so if you have another script to handle the scrolling of the thumbnails, just make sure they each have that class and that the toggler division is the outermost wrapper.

    If you have twice as many, three times as many, whatever - as long as they are still in order, the code will determine which slide they go to. Like this would also work:

    HTML Code:
    <div class="fadeshow1toggler">
    <img src="thumb-3.jpg" alt="" class="numbut">
    <img src="thumb-4.jpg" alt="" class="numbut">
    <img src="thumb-5.jpg" alt="" class="numbut">
    <img src="thumb-6.jpg" alt="" class="numbut">
    <img src="thumb-3.jpg" alt="" class="numbut">
    <img src="thumb-4.jpg" alt="" class="numbut">
    <img src="thumb-5.jpg" alt="" class="numbut">
    <img src="thumb-6.jpg" alt="" class="numbut">
    </div>
    You'd probably not want to hard code that, but the crawler script mentioned above would generate markup like that.

    There are other options with this add on. You can have the buttons generated automatically and can specify a template for the HTML to be used (defaults to numbered input buttons).

    The code also extends what the toggler division can be. Instead of a single division with an id as set in the on page call, it is extended to also include any division with that class. This can be useful if you want top and bottom controls, or want to split up the controls to different areas on the page. The numbut elements if split up, will still fire in the order they're found on the page. But you can always give each one its own data-index attribute to override that if need be:

    HTML Code:
    <div class="fadeshow1toggler">
    <img src="thumb-3.jpg" alt="" class="numbut" data-index="0">
    <img src="thumb-4.jpg" alt="" class="numbut" data-index="1">
    <img src="thumb-5.jpg" alt="" class="numbut" data-index="2">
    <img src="thumb-6.jpg" alt="" class="numbut" data-index="3">
    </div>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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