Hello and welcome to our community! Is this your first visit?
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
    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?



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

  2. #2
    Regular Coder
    Join Date
    Nov 2009
    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