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 15 of 15
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Stop image cycle on hyperlink hover?

    I downloaded a template from CSS3Templates and have been able to modify it to pretty much what I need, except I wanted to exert a little more control over it that it allows out of the box.

    The template defaults to load and cycles imagery on the left hand side of the page, with the text on the right. I would like to be able to allow the user to take control of the image shown by simply hovering over text from the right-hand side.

    The auto-cycle then resumes when removing the mouse from the text hyperlink, however when clicking the hyperlink text the link will take them to another page.

    My website: http://www.escalier-trading.co.uk

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    354
    Thanks
    9
    Thanked 52 Times in 51 Posts

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    The code in question

    Many thanks for your reply and yes, it certainly is an here it is:

    Code:
    $(document).ready(function() {    
      
      // execute the slideShow, set 4 seconds (4000) for each image
      slideShow(4000);
    
    });
    
    function slideShow(speed) {
    
      // append an 'li' item to the 'ul' list for displaying the caption
      $('ul.images').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><p></p></div></li>');
    
      // set the opacity of all images to 0
      $('ul.images li').css({opacity: 0.0});
      
      // get the first image and display it
      $('ul.images li:first').css({opacity: 1.0}).addClass('show');
      
      // call the gallery function to run the slideshow  
      var timer = setInterval('gallery()',speed);
      
      // pause the slideshow on mouse over
      $('ul.images').hover(
        function () {
          clearInterval(timer); 
        },  
        function () {
          timer = setInterval('gallery()',speed);     
        }
      );  
    }
    
    function gallery() {
    
      //if no images have the show class, grab the first image
      var current = ($('ul.images li.show')?  $('ul.images li.show') : $('#ul.images li:first'));
    
      // trying to avoid speed issue
      if(current.queue('fx').length == 0) {
    
        // get the next image, if it reached the end of the slideshow, rotate it back to the first image
        var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.images li:first') :current.next()) : $('ul.images li:first'));
          
        // get the next image caption
        var desc = next.find('img').attr('alt');  
      
        // set the fade in effect for the next image, show class has higher z-index
        next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
        
        // hide the current image
        current.animate({opacity: 0.0}, 1000).removeClass('show');
    
      }
    }

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    354
    Thanks
    9
    Thanked 52 Times in 51 Posts
    Okay,
    Maybe the following is the one you are after.
    It's the same as your existing image_fade.js,
    except for some bold, red lines:
    Code:
    var timer = null, sp; //SHOULD BE GLOBAL TO BE ACCESSIBLE BY ANONYM FUNC.
    
    $(document).ready(function() {    
      
      // execute the slideShow, set 4 seconds (4000) for each image
      slideShow(4000);
    
    });
    
    function slideShow(speed) {
    
      // append an 'li' item to the 'ul' list for displaying the caption
      $('ul.images').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><p></p></div></li>');
    
      // set the opacity of all images to 0
      $('ul.images li').css({opacity: 0.0});
      
      // get the first image and display it
      $('ul.images li:first').css({opacity: 1.0}).addClass('show');
      
      // call the gallery function to run the slideshow
      sp = speed;
      timer = setInterval('gallery()',sp);
      
      // pause the slideshow on mouse hovering slideshow
      $('ul.images').hover(
        function () {
          clearInterval(timer); 
        },  
        function () {
          timer = setInterval('gallery()',sp);
        }
      );  
    
      // pause the slideshow on mouse hovering links on right
      $('#content > ul > li > a').hover(
        function () {
          clearInterval(timer); 
        },  
        function () {
          timer = setInterval('gallery()',sp);
        }
      );
    }
    
    function gallery() {
    
      //if no images have the show class, grab the first image
      var current = ($('ul.images li.show')?  $('ul.images li.show') : $('#ul.images li:first'));
    
      // trying to avoid speed issue
      if(current.queue('fx').length == 0) {
    
        // get the next image, if it reached the end of the slideshow, rotate it back to the first image
        var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.images li:first') :current.next()) : $('ul.images li:first'));
          
        // get the next image caption
        var desc = next.find('img').attr('alt');  
      
        // set the fade in effect for the next image, show class has higher z-index
        next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
        
        // hide the current image
        current.animate({opacity: 0.0}, 1000).removeClass('show');
    
      }
    }
    Last edited by hdewantara; 09-07-2012 at 05:30 PM.

  • Users who have thanked hdewantara for this post:

    cheffington (09-07-2012)

  • #5
    New Coder
    Join Date
    Sep 2012
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I added the code to the site and it does indeed pause the slide show, however, I was hoping to control the imagery shown which would mean that each link could be assigned a specific image.

    I think that might have something to do with:

    "$('#content > ul > li > a').hover("

    It seems here that any link will affect the pause "timer" value, which is fine, but how would the code need to be changed to have imagery assigned to a link, it does not necessarily need to come from the existing gallery, perhaps, in fact it may well be better, to come from a separate source of imagery.

    Thanks for getting me this far. For the original use of the template this code would make sense, all code changes will be submitted back to the author for inspection to possibly be incorporated into future templates.

  • #6
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    354
    Thanks
    9
    Thanked 52 Times in 51 Posts
    I see...

    Just a note perhaps. If you want to revert back to the original imagery set, after any right-link-hovering, then you might need to save the original set first in an array.

    The target images within the slideshow are always identified by "ul.images > li > img".

    Hendra

  • #7
    New Coder
    Join Date
    Sep 2012
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    still unsure

    Quote Originally Posted by hdewantara View Post
    I see...

    Just a note perhaps. If you want to revert back to the original imagery set, after any right-link-hovering, then you might need to save the original set first in an array.

    The target images within the slideshow are always identified by "ul.images > li > img".

    Hendra

    I understand what you're saying, but I don't know how to implement it, I thought at first you meant that line of code had to go into the HTML, but studying the JS it looks like it appears in there?

    Presently the slideshow pauses for any hyperlink, regardless, while it should not necessarily stop, it should replace the image shown with a relevant one from the "ul.images > li > img" you mentioned, while ignoring those links without that call.

    So that change would need to be made to the "Château Bellevue Figeac, 1971", while the "PDF" link would be just a link, does that mean a different link to "<li>" which appears to b the standard for everything?

    "<li>Château Bellevue Figeac, 1971 | <a href="/documentation/fr_1971.zip">PDF</a></li>"


    ..so that the "Château Bellevue Figeac, 1971" were the link which changed the image what would I have to change on that line to reference to the JS?

    "ul.images > li > "photo_five"" for example? Really, I have no idea.


    As for the array thing, not sure about that one as the code already reverts back to the slideshow when not on hover, it just pauses right now.

  • #8
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    354
    Thanks
    9
    Thanked 52 Times in 51 Posts
    Well, I guess there are a few ways to achieve that. And it might require not only to your JS, but also the HTML structure and CSS as well. Have a look at one below:

    A new HTML structure:
    PHP Code:
    <ul>

        <
    li>
            <
    span>Domaine de Courgeau1990 (<i>pair</i>) |</span>
            <
    a href="/documentation/fr_1990.zip">
                <
    span>PDF</span>
                <
    img src="images/2_b.png" alt="photo_two" />
            </
    a>
        </
    li>
        
        <
    li>
            <
    span>Le Corton1982 (<i>pair</i>) |</span>
            <
    a href="/documentation/fr_1982.zip">
                <
    span>PDF</span>
                <
    img src="images/4_b.png" alt="photo_four" />
            </
    a>
        </
    li>
        
        <
    li>
            <
    span>Vieux Chateau Vincent1979 |</span>
            <
    a href="/documentation/fr_1979.zip">
                <
    span>PDF</span>
                <
    img src="images/3_b.png" alt="photo_three" />
            </
    a>
        </
    li>
        
        <
    li>
            <
    span>Cha&#770;teau Bellevue Figeac, 1971 |</span>
            
    <a href="/documentation/fr_1971.zip">
                <
    span>PDF</span>
                <
    img src="images/1_b.png" alt="photo_one" />
            </
    a>
        </
    li>
        
    </
    ul
    Right. There is an additional <img> in there, and you could hide or just iconize it with following CSS:
    PHP Code:
    #content > ul > li > a > img{
        
    displaynone/* hide it */
        
    width1em/* or iconize it */

    THen, add a few lines to your JS:
    PHP Code:
    function slideShow(speed) {

        
    // append an 'li' item to the 'ul' list for displaying the caption
        
    $('ul.images').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><p></p></div></li>');

        
    // set the opacity of all images to 0
        
    $('ul.images li').css({opacity0.0});
        
        
    // get the first image and display it
        
    $('ul.images li:first').css({opacity1.0}).addClass('show');
        
        
    // call the gallery function to run the slideshow  
        
    sp speed;
        
    timer setInterval('gallery()',sp);
            
        
    // pause the slideshow on mouse over
        
    $('ul.images').hover(
            function () {
                
    clearInterval(timer); 
            },  
            function () {
                
    timer setInterval('gallery()',speed);     
            }
        ); 
        
        
    // pause the slideshow on mouse hovering links on right
        
    $('#content > ul > li > a').hover(
            function () {
                
    clearInterval(timer); 
                $(
    '#sidebar_container > .gallery > .images > li.show > img').attr('src', $(this).children('img').attr('src'));
            },  
            function () {
                
    timer setInterval('gallery()',sp);
            }
        ); 


  • Users who have thanked hdewantara for this post:

    cheffington (09-10-2012)

  • #9
    New Coder
    Join Date
    Sep 2012
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Many thanks again for the solution, I'm quite happy with the way it worked out. I think this would make a lot of sense for the initial reason the template was designed: as a photography portfolio.

    I'll be sure to supply the feedback to CSSTemplates, referencing to yourself and this thread of course.

    I will have to adjust it so that the image fades in, much faster than the slide show, it's a little to abrupt right now, but I think I can figure that out.

    Once again, many thanks!

  • #10
    New Coder
    Join Date
    Sep 2012
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hmm, actually, just noticing now that some of the hyperlink rollover imagery is showing up in the main slideshow, which isn't something I wanted to happen, is that anything to do with the extra CSS for hiding imagery ("display: none;")?

    I wanted to have the slideshow imagery separate from the rollover calls, in fact I don't know why they're mixed in as I've not declared them in "gallery" section?!

    Thanks.

  • #11
    New Coder
    Join Date
    Sep 2012
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ah I see why it happens, it doesn't, unless a link is hovered over, then it will cycle through them all.

    What to do?
    Last edited by cheffington; 09-10-2012 at 07:11 AM.

  • #12
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    354
    Thanks
    9
    Thanked 52 Times in 51 Posts
    Yes, that's why I mentioned an array somewhere to save the original slideshow images, before hovering overrides any of it.

    But instead of an array, let's see whether one variable "origShown" would suffice:
    Code:
    var 
    	timer = null, 
    	sp,
    	origShown;
    	
    function slideShow(speed) {
    
    	// append an 'li' item to the 'ul' list for displaying the caption
    	$('ul.images').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><p></p></div></li>');
    
    	// set the opacity of all images to 0
    	$('ul.images li').css({opacity: 0.0});
    	
    	// get the first image and display it
    	$('ul.images li:first').css({opacity: 1.0}).addClass('show');
    	
    	// call the gallery function to run the slideshow  
    	sp = speed;
    	timer = setInterval('gallery()',sp);
    		
    	// pause the slideshow on mouse over
    	$('ul.images').hover(
    		function () {
    			clearInterval(timer); 
    		},  
    		function () {
    			timer = setInterval('gallery()',speed);     
    		}
    	); 
    	
    	// pause the slideshow on mouse hovering links on right
    	$('#content > ul > li > a').hover(
    		function () {
    			clearInterval(timer); 
    			origShown = $('#sidebar_container > .gallery > .images > li.show > img').attr('src');
    			$('#sidebar_container > .gallery > .images > li.show > img').attr('src', $(this).children('img').attr('src'));
    		},  
    		function () {
    			$('#sidebar_container > .gallery > .images > li.show > img').attr('src',origShown);
    			timer = setInterval('gallery()',sp);
    		}
    	); 
    }

  • #13
    New Coder
    Join Date
    Sep 2012
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I tried adding that to the JavaScript but now the imagery doesn't cycle and the links do not respond to changing the image in the slideshow either:

    Code:
    var timer = null, sp; //SHOULD BE GLOBAL TO BE ACCESSIBLE BY ANONYM FUNC.
    	origShown; //added in to stop linked imagery mixing with slideshow
    	
    $(document).ready(function() {    
      
      // execute the slideShow, set 4 seconds (4000) for each image
      slideShow(4000);
    
    });
    
    function slideShow(speed) {
    
      // append an 'li' item to the 'ul' list for displaying the caption
      $('ul.images').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><p></p></div></li>');
    
      // set the opacity of all images to 0
      $('ul.images li').css({opacity: 0.0});
      
      // get the first image and display it
      $('ul.images li:first').css({opacity: 1.0}).addClass('show');
      
      // call the gallery function to run the slideshow  
      sp = speed;
      timer = setInterval('gallery()',sp);
        
      // pause the slideshow on mouse over
      $('ul.images').hover(
        function () {
          clearInterval(timer); 
        },  
        function () {
          timer = setInterval('gallery()',speed);     
        }
      ); 
      
        // pause the slideshow on mouse hovering links on right
      $('#content > ul > li > a').hover(
        function () {
          clearInterval(timer); 
        },  
        function () {
          timer = setInterval('gallery()',sp);
        }
      ); 
    }
    
    function gallery() {
    
      //if no images have the show class, grab the first image
      var current = ($('ul.images li.show')?  $('ul.images li.show') : $('#ul.images li:first'));
    
      // trying to avoid speed issue
      if(current.queue('fx').length == 0) {
    
        // get the next image, if it reached the end of the slideshow, rotate it back to the first image
        var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.images li:first') :current.next()) : $('ul.images li:first'));
          
        // get the next image caption
        var desc = next.find('img').attr('alt');  
      
        // set the fade in effect for the next image, show class has higher z-index
        next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
        
        // hide the current image
        current.animate({opacity: 0.0}, 1000).removeClass('show');
    
      }
    }
    
    
     function slideShow(speed) {
    
        // append an 'li' item to the 'ul' list for displaying the caption
        $('ul.images').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><p></p></div></li>');
    
        // set the opacity of all images to 0
        $('ul.images li').css({opacity: 0.0});
        
        // get the first image and display it
        $('ul.images li:first').css({opacity: 1.0}).addClass('show');
        
        // call the gallery function to run the slideshow  
        sp = speed;
        timer = setInterval('gallery()',sp);
            
        // pause the slideshow on mouse over
        $('ul.images').hover(
            function () {
                clearInterval(timer); 
            },  
            function () {
                timer = setInterval('gallery()',speed);     
            }
        ); 
        
        // pause the slideshow on mouse hovering links on right
        $('#content > ul > li > a').hover(
            function () {
                clearInterval(timer); 
                			origShown = $('#sidebar_container > .gallery > .images > li.show > img').attr('src'); //added in to stop linked imagery mixing with slideshow
                $('#sidebar_container > .gallery > .images > li.show > img').attr('src', $(this).children('img').attr('src'));
            },  
            function () {
            				$('#sidebar_container > .gallery > .images > li.show > img').attr('src',origShown); //added in to stop linked imagery mixing with slideshow
                timer = setInterval('gallery()',sp);
            }
        ); 
    }

  • #14
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    354
    Thanks
    9
    Thanked 52 Times in 51 Posts
    Ahh, you'll be there soon...
    Just watch out where you should/ shouldn't put a semi-colon/ comma. Also, try not to use slideShow() function twice.

    Hint: You might want to use CHrome's/Firefox's Error Console to detect errors
    Good luck

  • #15
    New Coder
    Join Date
    Sep 2012
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    A ruddy comma, that's all t'was.

    Thanks for all your help.


  •  

    Posting Permissions

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