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 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    12
    Thanks
    6
    Thanked 0 Times in 0 Posts

    How pause banner with mouseover?

    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?

    Thanks!

    Jeremy

    </script>
    <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
    }
    if(!ie)
    $tooltip.css({
    opacity : 0
    }).show();


    /*first preload images (thumbs and large images)*/
    var loaded = 0;
    $links.each(function(i){
    var $link = $(this);
    $link.find('a').preload({
    onComplete : function(){
    ++loaded;
    if(loaded == total_images){
    //all images preloaded,
    //show ps_container and initialize events
    $loader.hide();
    $ps_container.show();
    //when mouse enters the pages (the dots),
    //show the tooltip,
    //when mouse leaves hide the tooltip,
    //clicking on one will display the respective image
    $links.bind('mouseenter',showTooltip)
    .bind('mouseleave',hideTooltip)
    .bind('click',showImage);
    //navigate through the images
    $ps_next.bind('click',nextImage);
    $ps_prev.bind('click',prevImage);
    }
    }
    });
    });

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

    //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;
    }
    else{
    imageLeft = -75;
    }
    }
    currentHovered = idx;

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

    //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)
    $ps_preview_wrapper.children(':last').remove();

    //prepend the new image
    $ps_preview_wrapper.prepend($newImage);

    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){
    $tooltip_imgs.eq(tooltip_imgs_count-1)
    .stop()
    .animate({
    left:-imageLeft+'px'
    },150,function(){
    //remove the old one
    $(this).remove();
    });
    $tooltip_imgs.eq(0)
    .css('left',imageLeft + 'px')
    .stop()
    .animate({
    left:'0px'
    },150);
    }
    }
    //if we are not using a "browser", we just show the tooltip,
    //otherwise we fade it
    //
    if(ie)
    $tooltip.css('left',left + 'px').show();
    else
    $tooltip.stop()
    .animate({
    left : left + 'px',
    opacity : 1
    },150);
    }

    function hideTooltip(){
    //hide / fade out the tooltip
    if(ie)
    $tooltip.hide();
    else
    $tooltip.stop()
    .animate({
    opacity : 0
    },150);
    }

    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
    $links.eq(current).removeClass('selected');
    $link.addClass('selected');

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

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

    //prepend the new image
    $ps_image_wrapper.prepend($newImage);

    //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)
    $ps_image_wrapper.stop().animate({
    width : newImageWidth + 'px'
    },350);
    //animate the new image in
    $newImage.stop().animate({
    left : '0px'
    },350);
    //animate the old image out
    $currentImage.stop().animate({
    left : -currentImageWidth + 'px'
    },350);

    e.preventDefault();
    }

    function nextImage() {
    var cache='';
    cache = cache==''?current+':'+total_images:cache;
    if(current < total_images)
    $links.eq(current+1).trigger('click');
    if(cache == (current+':'+total_images))
    $links.eq(0).trigger('click');

    }
    function prevImage(){
    if(current > 0){
    $links.eq(current-1).trigger('click');
    }
    }
    setInterval( function(){
    $('.ps_next').click();
    },4000 );

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    See, my application here.


  •  

    Posting Permissions

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