JQuery галерея следующий / предыдущий кнопки - PullRequest
Новая
       9

JQuery галерея следующий / предыдущий кнопки

0 голосов
/ 13 декабря 2011

Я создал галерею jquery полгода назад (так мне помогло сообщество SO, потому что я недостаточно знаком с js / jquery), и теперь я хотел бы добавить следующие / предыдущие кнопки в эту галерею.Я пытался объединить его с другими галереями, но ничего не получалось.

вот js: 

<script type="text/javascript">
function showPic (whichpic) {
if (document.getElementById) {
$('#actimg').fadeOut(170);
setTimeout(function() {
document.getElementById('actimg').src = whichpic.href; 
$('#actimg').fadeIn(170);
}, 170);
return false; 
} else {
return true;
 } 
}
</script>

и html: 

<img id="actimg" src="" width="600" height="400" alt="main" />

<a onclick="return showPic(this)" href="example_1.jpg">
<img height="39px" width="58px" src="example_1.jpg" alt="thumbnail" />
</a>

<a onclick="return showPic(this)" href="example_2.jpg">
<img height="39px" width="58px" src="example_2.jpg" alt="thumbnail" />
</a>

<a onclick="return showPic(this)" href="example_3.jpg">
<img height="39px" width="58px" src="example_3.jpg" alt="thumbnail" />
</a>

галерея выглядит как http://www.rafsimons.com/collections/aw-11/ но это не флеш и нет следующего /Предыдущие кнопки, которые я хочу сделать сейчас.Заранее спасибо за помощь.

1 Ответ

1 голос
/ 13 декабря 2011

Сначала добавьте атрибут класса ко всем вашим превью (<a> теги), чтобы их можно было легко найти из jQuery: 

<a class="gallery_item" onclick="return showPic(this)" href="example_1.jpg">
<img height="39px" width="58px" src="example_1.jpg" alt="thumbnail" />
</a>
...

Нам нужен способ узнать, какой из них является текущим изображением.Мы можем сохранить эту информацию в пользовательском атрибуте в самом теге <a>.Для этого измените вашу функцию showPic следующим образом: 

function showPic (whichpic) {
  if (document.getElementById) {
    $('.gallery_item').removeAttr('current'); // <- remove 'current' attribute from all thumbs
    $('#actimg').fadeOut(170);
    setTimeout(function() {
      document.getElementById('actimg').src = whichpic.href; 
      $('#actimg').fadeIn(170);
      $(whichpic).attr('current', '1'); // <- set this one as current
    }, 170);
    return false; 
  } else {
    return true;
  }
}

Теперь добавьте 2 ссылки для кнопок «следующий / предыдущий» и разместите их в соответствующих местах.Укажите их идентификаторы 'next' и 'prev' 

<a href="#" id="prev" onclick="return nextPic()">Prev</a>

<a href="#" id="next" onclick="return prevPic()">Next</a>

Теперь добавьте 2 js-функции nextPic () и prevPic (), например: 

function nextPic() {
  var current = null;
  $('.gallery_item').each(function() {
    if($(this).attr('current')=='1') {
    current = $(this);
    return false;
    }
  });
  if(current!=null) {
    if(current.parent().next().length!=0) {
    showPic(current.parent().next().find('.gallery_item')[0]); // <- show next pic
    }
    else {
    showPic($('.gallery_item:first')[0]); // if no next pic, show first pic
    }
  }
  return false;
}

function prevPic() {
  var current = null;
  $('.gallery_item').each(function() {
    if($(this).attr('current')=='1') {
    current = $(this);
    return false;
    }
  });
  if(current!=null) {
    if(current.parent().prev().length!=0) {
    showPic(current.parent().prev().find('.gallery_item')[0]); // <- show next pic
    }
    else {
    showPic($('.gallery_item:last')[0]); // if no next pic, show first pic
    }
  }
  return false;
}

Добавьте это тоже, чтобы инициализироватьпервое изображение как текущее по умолчанию. 

$().ready(function() {
  $('.gallery_item:first').attr('current', '1');
});
...