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

Тема в разделе "JavaScript", создана пользователем Absolute, 24 июл 2015.

Модераторы: ZiX
  1. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    340
    Симпатии:
    162
    Суть в чем. На сайте выводятся картинки:
    Код:
    <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 картинок? Может быть есть готовые решения?
     
  2. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    340
    Симпатии:
    162
    Запилил-таки.
    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')

    Демо, что получилось: http://jsfiddle.net/f1f12s/7a78zwgh/10/
     
    Последнее редактирование: 24 июл 2015
    Solus_Rex нравится это.