Stop image cycle on hyperlink hover?

cheffington · 09-06-2012, 05:12 PM

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

hdewantara · 09-07-2012, 08:06 AM

Is the http://www.escalier-trading.co.uk/js/image_fade.js modifiable?

Hendra

cheffington · 09-07-2012, 04:37 PM

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');

  }
}

hdewantara · 09-07-2012, 05:28 PM

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');

  }
}

cheffington · 09-07-2012, 08:38 PM

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.

hdewantara · 09-08-2012, 10:21 AM

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

cheffington · 09-09-2012, 09:31 AM

Quote:

Originally Posted by hdewantara

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 "Châ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>Château Bellevue Figeac, 1971 | <a href="/documentation/fr_1971.zip">PDF</a></li>"

..so that the "Châ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.

hdewantara · 09-10-2012, 12:42 AM

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 Courgeau, 1990 (<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 Corton, 1982 (<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 Vincent, 1979 |</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{

    display: none; /* hide it */

    width: 1em; /* 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({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); 

            $('#sidebar_container > .gallery > .images > li.show > img').attr('src', $(this).children('img').attr('src'));

        },  

        function () {

            timer = setInterval('gallery()',sp);

        }

    ); 

}

cheffington · 09-10-2012, 06:37 AM

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!

cheffington · 09-10-2012, 07:08 AM

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.

cheffington · 09-10-2012, 07:09 AM

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?

hdewantara · 09-10-2012, 07:33 AM

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);
		}
	); 
}

cheffington · 09-10-2012, 06:42 PM

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);
        }
    ); 
}

hdewantara · 09-10-2012, 07:19 PM

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

cheffington · 09-10-2012, 10:54 PM

A ruddy comma, that's all t'was.

Thanks for all your help.