Results 1 to 2 of 2

Thread: Ultimate Fade-in slideshow (v2.4) Go to first

  1. #1
    Join Date
    Feb 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Ultimate Fade-in slideshow (v2.4) Go to first

    I have multiple slideshows on my page, which I show/hide depending on the selected gallery title. So far, so good, but...

    I'd like the hidden slideshows to return to the first image, so when the visitor views slideshow A, then slideshow B and then goes back to slideshow A, they see the first image in slideshow A and not the one they saw last before viewing slideshow B.
    (I hope I make sense here, haha!)

    I just can't seem to grasp how to do this... Here's a link, so you can see how I've implemented the slideshows. In the page source, you can also see the script used to show/hide the different slideshows.

    http://www.studio-le-bb.com/2011/fotografie.html

    I do hope someone can help me with this. Thanks in advance!!!

    Edit: Whoops! I just realized I put this thread in the wrong subforum... Sorry about that! If the mods could move it, I'd be much obliged

  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

    The browser cache may need to be cleared and/or the page refreshed to see changes.

    In your showHide function, add the highlighted:

    Code:
    <script type="text/javascript">
    function showHide(id) {
    	window['slideshow' + id].navigate(0);
    	var el = document.getElementsByClassName('slider');
    	var L , i=0;
    	while(L = el[i++]) { 
    		L.style.display=(L.getAttribute('id') == 'div-'+id) ? "block" : "none";
    	}
    	var el2 = document.getElementsByTagName('li');
    	var M , u=0;
    	while(M = el2[u++]) { 
    		M.className=(M.getAttribute('id') == 'a-'+id) ? "active" : "";
    	}
    }
    </script>
    Or, since you're using jQuery, replace it with this one:

    Code:
    <script type="text/javascript">
    function showHide(id) {
    	window['slideshow' + id].navigate(0);
    	var $ = jQuery;
    	$('.slider').hide().filter('#div-' + id).show();
    	$('li').removeClass('active').filter('#a-' + id).addClass('active');
    }
    </script>
    That way it will work in IE 8 and less. (IE 8 and less do not support document.getElementsByClassName)

    Or even:

    Code:
    <script type="text/javascript">
    function showHide(id) {
    	var $ = jQuery;
    	$('.slider').each(function(i){
    		window['slideshow' + (i + 1)].navigate(0);
    	}).hide().filter('#div-' + id).show();
    	$('li').removeClass('active').filter('#a-' + id).addClass('active');
    }
    </script>
    which will not show a 'ghost' transition as you switch slideshows when the one being switched to is not already at the 0 position.

    BTW, if you want the captions to show up at the beginning of the slide fade in instead of after, I have a script for that, let me know.
    Last edited by jscheuer1; 10-12-2011 at 01:37 AM. Reason: add - Or, since you're using . . .
    - 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
  •