Галерея с навигацией по страницам

Absolute

Крокодил ;)
Регистрация
9 Авг 2009
Сообщения
581
Реакции
456
Суть в чем. На сайте выводятся картинки:
Код:
<div class="optgal">
<a href="/image/1.jpg" class="optimage" rel="rr">
<span>Описание 1</span>
<img alt="" src="/image/min/1.jpg" />
</a>
<a href="/image/2.jpg" class="optimage" rel="rr">
<span>Описание 2</span>
<img alt="" src="/image/min/2.jpg" />
</a>
<a href="/image/3.jpg" class="optimage" rel="rr">
<span>Описание 3</span>
<img alt="" src="/image/min/3.jpg" />
</a>
...и т.д.
</div>
На '.optimage' вызывается fancybox
Картинок в среднем от 30 до примерно 120 в зависимости от страницы. Как запилить, чтобы разбить эти картинки, например по 12 шт., скрывая все остальные и генерируя навигацию типа 1 | 2 | 3, переключаясь по которой отображать на следующие 12 картинок? Может быть есть готовые решения?
 
Запилил-таки.
HTML:
$(document).ready(function() {
    var allImages = $('.optimage'), f = Math.ceil(allImages.length/12), i = 1, nav = $('<div/>'), wrap = $('.optgal'), sep;
        while (f >= i){
        sep = i > 1 ? '|' : '';
        nav.append(sep);
        $('<span/>', {
        class : 'spansep',
        id : i,
        text : 'Стр. ' + i,
        click : function(){
        var  _ = ~~this.id || 0;
        _ *= 12;
        allImages.filter(':visible').hide('slow');
        allImages.slice(_ - 12,_).show('slow');
        }
        })
        .appendTo(nav);
        i++;
        }
        wrap.before(nav.clone(true, true)).after(nav);
        allImages.fancybox({
          openEffect    : 'elastic',
        closeEffect    : 'elastic'
        });

});
Код:
.optgal {
margin-bottom:20px;
  margin-top:20px;
}
.optgal img {
margin:5px;
}
.optimage{
display:none;
}
.optimage:nth-of-type(-n+12){
display:inline;
}
div .spansep {
font-size:12px;
color:9900ce;
cursor: pointer;
margin-left:7px;
margin-right:7px;
  text-decoration:underline;

}
PS: через :visible фильтрую, вместо переключения класса, чтобы отдельно не писать анимацию переключения, а использовать встроенную .hide('slow'), .show('slow')

Демо, что получилось: Для просмотра ссылки Войди или Зарегистрируйся
 
Последнее редактирование:
Назад
Сверху