Проблемы с простой галереей изображений jQuery с плагином Colorbox

Я собираю галерею изображений для сайта электронной коммерции и хочу использовать colorbox для запуска больших изображений. Моя проблема заключается в том, что изображение, запущенное в colorbox, остается первым запущенным и должно отражать изображение, показанное как img#bigpic - ссылка на изображение действительно обновляется правильно.

Вот jQuery, который у меня есть:

$(document).ready(function(){

$("#largeimage").colorbox();
imageSwapper(".thumbnails a");


function imageSwapper(link) {
$(link).click(function(){
$("#bigpic").attr("src", this.href);
$("#largeimage").attr("href", this.rel);
return false;
});
};


$("#largeimage").bind('mouseenter mouseleave', function(event) {
        $("#largeimage span").toggleClass('showspan');
    });

});

...и HTML

<a href="_images/products/large/bpn0001_1.jpg" id="largeimage"><span></span><img src="_images/products/bpn0001_1.jpg" id="bigpic" /></a>
        <div class="thumbnails">
            <ul>
                <li><a href="_images/products/bpn0001_1.jpg" rel="_images/products/large/bpn0001_1.jpg"><img src="_images/products/mini/bpn0001_1.jpg" /></a></li>
                <li><a href="_images/products/bpn0001_2.jpg" rel="_images/products/large/bpn0001_2.jpg"><img src="_images/products/mini/bpn0001_2.jpg" /></a></li>
                <li><a href="_images/products/bpn0001_3.jpg" rel="_images/products/large/bpn0001_3.jpg"><img src="_images/products/mini/bpn0001_3.jpg" /></a></li>
          </ul>
        </div>

Любая помощь приветствуется!


javascript jquery colorbox
person Chris    schedule 17.06.2010    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я не думаю, что вам нужна функция imageSwapper(). Попробуйте заменить это:

imageSwapper(".thumbnails a");


function imageSwapper(link) {
 $(link).click(function(){
  $("#bigpic").attr("src", this.href);
  $("#largeimage").attr("href", this.rel);
  return false;
 });
};

С участием:

$(".thumbnails a").click(function(){
  $("#bigpic").attr("src", $(this).attr("href"));
  $("#largeimage").attr("href", $(this).attr("rel"));
  return false;
});
person Pablo    schedule 17.06.2010
comment
Спасибо за это. Намного лучше. - person Chris; 17.06.2010

arrow_upward
0
arrow_downward

Вместо того, чтобы привязывать поле цвета непосредственно к ссылке, вызовите поле цвета, нажав на эту ссылку, и передайте текущий href, поскольку может показаться, что он не перепроверяет текущее значение.

$("#largeimage").click(function(){
  $.fn.colorbox({href:$(this).attr("href")});
  return false;
});
person Jeff Beck    schedule 17.06.2010
comment
Без проблем. надеюсь, что остальная часть сайта пойдет хорошо. - person Jeff Beck; 17.06.2010