2010-08-06 7 views
0

J'ai un curseur sur l'image jquery, mais il ne montre que 2 toboggans, donc je ne peux pas vraiment ajouter plus d'images que ce qui est dans ces 2 diapositives est-il possible que je peux créer plusieurs diapositives ici est le codeJquery Image Slider

/* Slideshow 

*/ 

$(document).ready(function() { 

    slideshow_loading = true; 

    slideshow_busy = true; 

    current_slide = 1; 

    slideshow_loop_interval = 0; 

    total_slideshow_images = $('#slideshow-thumbs li').length; 

    add_action('slideshow_after_preload', slideshow_ready); 

    slideshow_init(); 

    slideshow_clicks(); 

    slideshow_preload(); 

}); 

function slideshow_init() { 

    clicked_by_loop = false; 

    // Resize Slideshow Wrapper 

    $('#slideshow .wrap').height(610); 

    // Add current slide reflection 

    $('#current-slide').reflect({ 
     height: 150, 
     opacity: 0.4 
    }); 

    $('#slideshow').css('marginBottom', '-150px'); 

    // Separate chunks of thumbnails 

    $('#slideshow-thumbs li').each(function(i) { 

     var c = i+1; 

     if (c % 6 == 0) { 

      $(this).css('marginRight', '50px'); 

     } 

    }); 

    // Slideshow thumbs reflection 

    $('#slideshow-thumbs li img').reflect({ 
     height: 24, 
     opacity: 0.3 
    }); 

    // Slideshow video frame reflection 

    $('#slideshow .wrap #slideshow-video-reflection img').reflect({ 
     height: 60, 
     opacity: 0.3 
    }); 

    // Add rel=index to slideshow thumbs 

    $('#slideshow-thumbs li a').each(function(i) { 

     $(this).attr('rel', i); 

    }); 

    // Configure Slideshow Mode 

    slideshow_transition_init(); 

    // Configure hover & clickevent for #slideshow-video (only image, excluding the map) 

    if (slideshow_add_permalink) { 

     $('#slideshow-video, #current-slide') 
     .hover(function() { $(this).css('cursor', 'pointer'); }, function() { $(this).css('cursor', 'default'); }) 
     .click(function() { 

      var href = $('#slideshow-meta .meta-name').attr('href'); 

      window.location = href; 

     }); 

    } 

    // Slideshow Keyboard Shortcuts 

    $(document).keyup(function(e) { 

     //alert(e.keyCode); 

     switch (e.keyCode) { 

      case 39: // Right Key 

       if (slideshow_busy) { return false; } 

       if (NOT_IE) { 
        $('#slideshow-right a').stop().animate({opacity: 1}, slideshow_transition_delay*0.5).animate({opacity: 0}, slideshow_transition_delay*0.5); 
       } else { 
        $('#slideshow-right a').css('visibility', 'visible'); 
        setTimeout(function() { $('#slideshow-right a').css('visibility', 'hidden'); }, slideshow_transition_delay*0.5); 
       } 

       $('#slideshow-right a').click(); 

       break; 

      case 37: // Left Arrow 

       if (slideshow_busy) { return false; } 

       if (NOT_IE) { 
        $('#slideshow-left a').stop().animate({opacity: 1}, slideshow_transition_delay*0.5).animate({opacity: 0}, slideshow_transition_delay*0.5); 
       } else { 
        $('#slideshow-left a').css('visibility', 'visible'); 
        setTimeout(function() { $('#slideshow-left a').css('visibility', 'hidden'); }, slideshow_transition_delay*0.5); 
       } 

       $('#slideshow-left a').click(); 

       break; 

     } 

    }); 

    // If Slideshow has no posts, remove loading indicator 

    if (slideshow_images.length > 0) { 

     $('#slideshow-thumbs-container span.loading').css('visibility', 'visible'); 

    } 

} 


function slideshow_clicks() { 

    // Thumbnail controls Click Event 

    slideshow_thumbs_easing = 'easeOutSine'; 

    slideshow_thumbs_scroll_time = 700; 

    $('#slideshow-thumb-left, #slideshow-thumb-right').click(function() { 

     /* Exit event if Slideshow is loading, or Slideshow UI is busy, or No Images in Slideshow */ 

     if (slideshow_loading || slideshow_busy || total_slideshow_images == 0) {return false;} 

     slideshow_busy = true; /* Lock slideshow interface */ 

     var where = $(this).attr('rel'); 

     var left_coord = $('#slideshow-thumbs').css('left'); 

     left_coord = Math.abs(parseInt(left_coord.replace('px', ''))); 

     var x = 811; // Total offset distance between spans 

     switch (where) { 

      case 'left': 

       if (left_coord == 49) { 

        // Left limit reached 

        var t1 = 100; 

        var t2 = 80; 

        $('#slideshow-thumbs').stop().animate({left: '63px'}, t1).animate({left: '49px'}, t2); 

        setTimeout(function() { 

         slideshow_busy = false; 

        }, t1+t2+50); // Add 50 miliseconds offset, to prevent bad behavior on rapid clicks 

        return false; 

       } else { 

        // Scroll left 

        var next_coord = x - left_coord; 

        var t = slideshow_thumbs_scroll_time; 

        $('#slideshow-thumbs').stop().animate({left: next_coord + 'px'}, t, slideshow_thumbs_easing); 

        setTimeout(function() { 

         slideshow_busy = false; 

        }, t); 

        return false; 

       } 

       break; 

      case 'right': 

       var next_coord = left_coord - x; 

       var right_limit = Math.abs((Math.floor((total_slideshow_images - 1)/6) * x) - 49); 

       if (left_coord < right_limit) { 

        // Scroll right 

        var t = slideshow_thumbs_scroll_time; 

        $('#slideshow-thumbs').stop().animate({left: next_coord + 'px'}, t, slideshow_thumbs_easing); 

        setTimeout(function() { 

         slideshow_busy = false; 

        }, t); 

        return false; 

       } else { 

        // Right limit reached 

        var t1 = 100; 

        var t2 = 80; 

        if (total_slideshow_images > 6) { 

         $('#slideshow-thumbs').stop().animate({left: '-' + left_coord - 14 + 'px'}, t1).animate({left: '-' + left_coord + 'px'}, t2); 

        } else { 

         $('#slideshow-thumbs').stop().animate({left: '35px'}, t1).animate({left: '49px'}, t2); 

        } 

        setTimeout(function() { 

         slideshow_busy = false; 

        }, t1+t2+50); // Add 50 miliseconds offset, to prevent bad behavior on rapid clicks 

        return false; 

       } 

       break; 

     } 

    }); 


    // Thumbnails Click Event 

    $('#slideshow-thumbs li a').click(function(evt) { 

     /* Exit event if Slideshow is loading, or Slideshow UI is busy, or No Images in Slideshow */ 

     if (slideshow_loading || slideshow_busy || total_slideshow_images == 0) {return false;} 

     slideshow_busy = true; 

     if (evt.which == 1) { 

      /* evt.which is 1 when clicked, undefined when triggered by click(); 
      * http://api.jquery.com/category/events/event-object/ */ 

      clearInterval(slideshow_loop_interval); 

     } 

     var rel = parseInt($(this).attr('rel')); 

     var next = rel; 

     if (current_slide == (rel + 1)) { slideshow_busy = false; return false;} // Exit event if it's the same slide 

     current_slide = rel + 1; 

     slideshow_fade_transition(next, evt); 

     return false; 

    }); 

} 

function slideshow_preload() { 

    var counter = 0; 

    var total_images = slideshow_images.length; 

    do_action('slideshow_before_preload'); 

    $.cacheImage(slideshow_images, { 
     load  : function(e) {counter += 1;}, 
     error : function(e) {total_images -= 1;}, 
     complete : function(e) { 
      if (counter == total_images) { 

       //setTimeout(function() { 
        slideshow_loading = false; 
        do_action('slideshow_after_preload'); 
       //},2000); 

      } 
     } 

    }); 

} 

function slideshow_ready() { 

    var t = 500; 

    $('#slideshow-thumbs-container span.loading').fadeOut(t); 

    setTimeout(function() { 

     $('#slideshow-thumbs').stop().animate({left: '49px'}, t+100, 'easeOutExpo'); 

     // Enable slideshow video frame 

     if (total_slideshow_images > 0) { 

      var video = slideshow_meta[0]['video']; 

      if (video != '') { 

       $('#slideshow-video-trigger, #slideshow map area').attr('href', video); 

       if (NOT_IE) { 
        $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').fadeIn(t+100); 
       } else { 
        $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').show(); 
       } 

      } 

     } 

     setTimeout(function() { 

      slideshow_busy = false; // Unlock the Slideshow UI 

      slideshow_loop(); 

     }, t+120); 

    }, t+20); 

} 

function slideshow_thumbs_autoscroll(next, rel) { 

    /* Do nothing if nothign to scroll */ 

    if (total_slideshow_images <= 6) { return false; } 

    switch(rel) { 

     case 1: 

      // Slide Right 

      if (current_slide % 6 == 0 || current_slide == total_slideshow_images) { 

       if (next != 0) { 

        // Scroll right 

        slideshow_busy = false; 

        $('#slideshow-thumb-right').click(); 

        return false; 

       } else { 

        // Go to the beginning 

        slideshow_busy = true; 

        $('#slideshow-thumbs').stop().animate({left: '49px'}, slideshow_thumbs_scroll_time, slideshow_thumbs_easing); 

        setTimeout(function() { 

         slideshow_busy = false; 

        }, slideshow_thumbs_scroll_time + 50); 

        return false; 

       } 

      } 

      break; 

     case -1: 

      // Slide Left 

      if ((current_slide - 1) % 6 == 0) { 

       if (current_slide == 1) { 

        // Go to the end 

        slideshow_busy = true; 

        var x = 811; 

        var right_limit = Math.abs((Math.floor((total_slideshow_images - 1)/6) * x) - 49); 

        $('#slideshow-thumbs').stop().animate({left: '-' + right_limit + 'px'}, slideshow_thumbs_scroll_time, slideshow_thumbs_easing); 

        setTimeout(function() { 

         slideshow_busy = false; 

        }, slideshow_thumbs_scroll_time + 50); 

        return false; 

       } else { 

        // Scroll left 

        slideshow_busy = false; 

        $('#slideshow-thumb-left').click(); 

        return false; 

       } 

      } 

      break; 

    } 

} 

function slideshow_transition_init() { 

    $('#slideshow-left a, #slideshow-right a').click(function(evt) { 

     /* Exit event if Slideshow is loading, or Slideshow UI is busy, or No Images in Slideshow */ 

     if (slideshow_loading || slideshow_busy || total_slideshow_images == 0) {return false;} 

     slideshow_busy = true; 

     if (evt.which == 1) { 

      /* evt.which is 1 when clicked, undefined when triggered by click(); 
      * http://api.jquery.com/category/events/event-object/ */ 

      clearInterval(slideshow_loop_interval); 

     } 

     var rel = parseInt($(this).attr('rel')); 

     var next = cycle(rel, current_slide, total_slideshow_images) - 1; 

     slideshow_thumbs_autoscroll(next, rel); 

     current_slide = next + 1; 

     slideshow_fade_transition(next, evt); 

     return false; 

    }); 

} 

function slideshow_fade_transition(next, evt) { 

    // Add slideshow video (if any) 

    var video = slideshow_meta[next]['video']; 

    if (video == '') { 

     if (NOT_IE) { 
      $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').fadeOut(slideshow_transition_delay); 
     } else { 
      $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').hide(); 
     } 

    } else { 

     $('#slideshow-video-trigger, #slideshow map area').attr('href', video); 

     if (NOT_IE) { 
      $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').fadeIn(slideshow_transition_delay); 
     } else { 
      $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').show(); 
     } 

    } 

    // Configure Transition 

    var title = $(slideshow_meta[next]['title']); 

    var category = slideshow_meta[next]['category']; 

    $('#slideshow .wrap').append('<img alt="" width="960" height="460" class="below" src="' + slideshow_images[next] + '" />'); 

    $('#slideshow .wrap .below').reflect({height: 150, opacity: 0.4}); 

    var t = slideshow_transition_delay; 

    $('#slideshow .wrap .above').stop().fadeOut(t); 

    $('#slideshow .wrap .below').stop().fadeIn(t); 

    $('#slideshow-thumbs li.active').removeClass('active'); 

    $('#slideshow-thumbs li a[rel=' + next + ']').parents('li').addClass('active'); 

    $('#slideshow-meta .meta-name, #slideshow-meta .meta-category').stop().animate({opacity: 0}, t*0.5); 

    setTimeout(function() { 

     $('#slideshow-meta .meta-name').html(title.html()).attr('href', title.attr('href')); 

     $('#slideshow-meta .meta-category').html(category); 

     $('#slideshow-meta .meta-name, #slideshow-meta .meta-category').stop().animate({opacity: 1}, t*0.5); 

    }, t*0.3); 

    setTimeout(function() { 

     $('#slideshow .wrap .above').remove(); 

     $('#slideshow .wrap .below').removeClass('below').addClass('above'); 

     slideshow_busy = false; 

     if (slideshow_add_permalink) { 

      $('#slideshow .wrap .above') 
      .hover(function() { $(this).css('cursor', 'pointer'); }, function() { $(this).css('cursor', 'default'); }) 
      .click(function() { var href = $('#slideshow-meta .meta-name').attr('href'); window.location = href; }); 

     } 

     if (evt.which == 1) { 

      // Reinitiate loop if control buttons clicked 

      slideshow_loop(); 

     } 

    }, t+10); 

} 

function slideshow_loop() { 

    if (slideshow_loop_enabled == false) { return false; } 

    slideshow_loop_interval = setInterval(function() { 

     $('#slideshow-right a').stop().animate({opacity: 1}, slideshow_transition_delay*0.5).animate({opacity: 0}, slideshow_transition_delay*0.5); 

     $('#slideshow-right a').click(); 

    }, slideshow_loop_time * 1000); 

} 

Répondre

0

total_slideshow_images = $('#slideshow-thumbs li').length;

var next = cycle(rel, current_slide, total_slideshow_images) - 1;

Ces lignes impliquent que le code ajuste à cependant de nombreuses images que vous avez avec cette classe particulière. Il semble que vous ayez juste besoin de copier-coller l'une de vos images existantes et de changer le lien source.

+0

voici mon site http://ninjaparadise.co.cc/, le curseur dont je parle est celui en haut de la page sous la navigation et comme vous pouvez le voir lorsque vous cliquez sur la flèche de droite 2 fois ça remonte à la première diapositive, je ne sais pas où je vais mal. – Hey

+0

Voir mon autre réponse. –

0

Le problème est ici (en shiny-slider.js):

left_coord = Math.abs(parseInt(left_coord.replace('px', '')));

Le script utilise la valeur absolue de la coordonnée gauche du cadre de curseur pour calculer la position suivante. Donc, la première diapositive de droite l'amène à 49 - 811 = -762, mais la diapositive suivante utilise 762 au lieu de -762, conduisant à 762 - 811 = -49, ce qui est la mauvaise direction.

Si vous supprimez le Math.abs(), le curseur continue de glisser vers la droite. Cependant, il y a d'autres problèmes avec le script, car il continuera à glisser au-delà de la dernière image, ainsi que certains problèmes de marge, etc. J'espère que cela vous aidera à démarrer.

+0

merci cela fonctionne, des conseils sur la résolution des problèmes de marge? – Hey