View Full Version : How pause banner with mouseover?

10-06-2011, 09:46 AM
I have a banner but it keeps rotating even when you mouse over it.

Is there a simple code I can add to the code below so that the banner will paused when you mouse over it?



<script type="text/javascript">
$(function() {
//some elements..
var $ps_container = $('#ps_container'),
$ps_image_wrapper = $ps_container.find('.ps_image_wrapper'),
$ps_next = $ps_container.find('.ps_next'),
$ps_prev = $ps_container.find('.ps_prev'),
$ps_nav = $ps_container.find('.ps_nav'),
$tooltip = $ps_container.find('.ps_preview'),
$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
$links = $ps_nav.children('li').not($tooltip),
total_images = $links.length,
currentHovered = -1,
current = 0,
$loader = $('#loader');

/*check if you are using a browser*/
var ie = false;
if ($.browser.msie) {
ie = true;//you are not!Anyway let's give it a try
opacity : 0

/*first preload images (thumbs and large images)*/
var loaded = 0;
var $link = $(this);
onComplete : function(){
if(loaded == total_images){
//all images preloaded,
//show ps_container and initialize events
//when mouse enters the pages (the dots),
//show the tooltip,
//when mouse leaves hide the tooltip,
//clicking on one will display the respective image
//navigate through the images

function showTooltip(){
var $link = $(this),
idx = $link.index(),
linkOuterWidth = $link.outerWidth(),
//this holds the left value for the next position
//of the tooltip
left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
//the thumb image source
$thumb = $link.find('a').attr('rel'),

//if we are not hovering the current one
if(currentHovered != idx){
//check if we will animate left->right or right->left
if(currentHovered != -1){
if(currentHovered < idx){
imageLeft = 75;
imageLeft = -75;
currentHovered = idx;

//the next thumb image to be shown in the tooltip
var $newImage = $('<img/>').css('left','0px')

//if theres more than 1 image
//(if we would move the mouse too fast it would probably happen)
//then remove the oldest one (:last)
if($ps_preview_wrapper.children().length > 1)

//prepend the new image

var $tooltip_imgs = $ps_preview_wrapper.children(),
tooltip_imgs_count = $tooltip_imgs.length;

//if theres 2 images on the tooltip
//animate the current one out, and the new one in
if(tooltip_imgs_count > 1){
//remove the old one
.css('left',imageLeft + 'px')
//if we are not using a "browser", we just show the tooltip,
//otherwise we fade it
$tooltip.css('left',left + 'px').show();
left : left + 'px',
opacity : 1

function hideTooltip(){
//hide / fade out the tooltip
opacity : 0

function showImage(e){
var $link = $(this),
idx = $link.index(),
$image = $link.find('a').attr('href'),
$currentImage = $ps_image_wrapper.find('img'),
currentImageWidth = $currentImage.width();

//if we click the current one return
if(current == idx) return false;

//add class selected to the current page / dot

//the new image element
var $newImage = $('<img/>').css('left',currentImageWidth + 'px')

//if the wrapper has more than one image, remove oldest
if($ps_image_wrapper.children().length > 1)

//prepend the new image

//the new image width.
//This will be the new width of the ps_image_wrapper
var newImageWidth = $newImage.width();

//check animation direction
if(current > idx){
$newImage.css('left',-newImageWidth + 'px');
currentImageWidth = -newImageWidth;
current = idx;
//animate the new width of the ps_image_wrapper
//(same like new image width)
width : newImageWidth + 'px'
//animate the new image in
left : '0px'
//animate the old image out
left : -currentImageWidth + 'px'


function nextImage() {
var cache='';
cache = cache==''?current+':'+total_images:cache;
if(current < total_images)
if(cache == (current+':'+total_images))

function prevImage(){
if(current > 0){
setInterval( function(){
},4000 );

10-06-2011, 02:45 PM
See, my application here. (http://www.hotscripts.com/listing/multiple-fading-slideshows/)