Results 1 to 9 of 9

Thread: Rotating banner - need to jump back to image 1! help pls

  1. #1
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Rotating banner - need to jump back to image 1! help pls

    Hi,

    I have a very simply rotating banner... it rotates fine, but when it gets to the fifth image, it stops

    i would like it to jump back to image one and start over again

    can anyone tell me the code to add?

    here's the script below... you can see right at the bottom, the setInterval, is where i command it to scroll images.................... im a noob at this... much thanks!

    <
    /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(){
    if(current < total_images){
    $links.eq(current+1).trigger('click');
    }
    }
    function prevImage(){
    if(current > 0){
    $links.eq(current-1).trigger('click');
    }
    }
    setInterval( function(){
    $('.ps_next').click();
    },4000 );
    $ps_image_wrapper

  2. #2
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    please someone give this a stab! there's been a lot of views but no comments.... if you even have a suggestion, it would be greatly appreciated

    ive spent hours looking all over the web for an answer...............

    thanks
    jeremy

  3. #3
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Please provide a link to the page or zip it here for further debugging.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  4. The Following User Says Thank You to rangana For This Useful Post:

    jemacba (10-04-2011)

  5. #4
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    thanks for the reply!!

    here's the link to the webpage:

    www.jeremybatesbooks.com

    cheers
    jeremy

  6. #5
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Try modifying your nextImage() function to:
    Code:
    function nextImage(){
      var tmp = 0;
      if(current < total_images){ tmp = current+1; }
      current = tmp;
      $links.eq(tmp).trigger('click');
    }
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  7. #6
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    i tried that...replacing the next image function with urs, but now the images won't slide.... just static

    any other ideas??

    thanks!

  8. #7
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    This should work:
    Code:
    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');
    }
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  9. #8
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by rangana View Post
    This should work:
    Code:
    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');
    }
    brilliant!!!!!

    works perfectly! thanks so much rangana! i posted this question on several help sites and ur the only one who got it working

    cheers! and thanks for ur time!

  10. #9
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    one final thing and not a big deal

    is it possible to have the banner fade from the last image to first, not scroll back??

    is this simply a matter of adding a line of code? if not, no worries

    thanks!

Bookmarks

Posting Permissions

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