2013-03-07 1 views
0

Я искал какую-нибудь галерею с предыдущими/соседними кнопками, и я ее нашел. У меня есть код:Галерея в jQuery со списком

var speed = 0; 
$('#mask-gallery, #gallery li').width($('#slider').width());  
$('#gallery').width($('#slider').width() * $('#gallery li').length); 
$('#mask-gallery, #gallery li').height($('#slider').height()); 
$('#gallery li:first').addClass('selected'); 

$('#btn-next, #gallery').click(function() { 
newsscoller(0);  
return false; 
}); 

$('#btn-prev').click(function() { 
newsscoller(1);  
return false; 
}); 

function newsscoller(prev) { 
    var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first'); 
    if (prev) { 
     var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last'); 
    } else { 
     var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first'); 
    } 

    $('#gallery li').removeClass('selected'); 
    next_image.addClass('selected'); 
    $('#mask-gallery').scrollTo(next_image, 250); 
} 

http://jsfiddle.net/R27FS/

И у меня есть один вопрос. У кого-нибудь есть идея, как этот скрипт может перенаправить пользователя для определенной страницы (location.href = '';) после последнего слайда?

Спасибо за ответы!

+1

noooooo никогда не перенаправлять на последнем слайде! нет такой галереи с такой функциональностью! скорее добавьте клик или создайте кнопку на последнем слайде и сделайте его кликабельным! подумайте о пользователях, если вы их удивите (плохо), они больше никогда не вернутся. Я один из них. –

+0

Согласен, никто не хотел этого. Почти так же плохо, как фоновая музыка! – Dom

+0

все равно буду благодарен за какое-то решение :) –

ответ

0

Один из вариантов - установить «следующую» ссылку на фактическое местоположение на последнем слайде. А потом return true; на click случае, если href!="#"

DEMO

var speed = 0; 
$('#mask-gallery, #gallery li').width($('#slider').width()); 
$('#gallery').width($('#slider').width() * $('#gallery li').length); 
$('#mask-gallery, #gallery li').height($('#slider').height()); 
$('#gallery li:first').addClass('selected'); 

$('#btn-next, #gallery').click(function() { 
    var href = $(this).attr("href"); 
    if (href != "#" && href != "") return true; 
    newsscoller(0); 
    return false; 
}); 

$('#btn-prev').click(function() { 
    newsscoller(1); 
    return false; 
}); 

function newsscoller(prev) { 
    var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first'); 
    var next_image; 
    $("#btn-next").attr("href", "#"); 
    if (prev) { 
     next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last'); 
    } else { 
     if (current_image.next().length) { 
      next_image = current_image.next(); 
     } 
     if (!next_image.next().length) { 
      $("#btn-next").attr("href", "http://www.google.com"); 
      //'target' required for it to work in jsFiddle b/c of 
      //iframe, remove in your code. 
      $("#btn-next").attr("target", "_blank"); 
     } 
    } 

    $('#gallery li').removeClass('selected'); 
    next_image.addClass('selected'); 
    $('#mask-gallery').scrollTo(next_image, 250); 
} 
+0

спасибо :)))) –