• Галерея на jQuery

    by  • 23.11.2009 • CSS & HTML, jQuery, программирование • Комментарии [2]

    Часто, создавая сайты, приходится сталкиваться с всевозможными галереями, некоторые из них все еще представляют собой обычную таблицу с картинками. Но этим уже никого не удивить, я расскажу вам как внедрить на свой сайт именно галерею: сверху будет находиться картинка, чуть ниже ее описание и кнопки «Следующая» и «Предыдущая», завершать все будет миниатюрные копии остальных изображений, при наведении на которые, будут становиться менее прозрачными. fireworks Галерея на jQueryЭто рабочий пример, который находится на сайте, посвященному Датским елкам и сопутствующим товарам, а именно фейерверкам. Здесь кнопок, отвечающих за перелистывание изображений нет, тут они ни к чему.

    Для начала встраиваем в <head> файл jquery.js, который можно скачать с официального сайта jQuery.

    1
    <script src="/js/jquery.min.js" type="text/javascript"></script>

    Дальше нужно скачать с официального сайта галереи 2 файла: плагин для jQuery и файл стилей для этой галереи. Их можно скачать тут и тут. Затем прикрепляем их к проекту.

    1
    <script src="/js/jquery.galleria.js" type="text/javascript"></script>
    1
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    <script type="text/javascript">// <![CDATA[

       $(document).ready(function(){

          $('.gallery_demo_unstyled').addClass('gallery_demo');

          $('ul.gallery_demo').galleria({
             history   : true, // для того, чтобы работала кнопка в браузере "назад"
             clickNext : true, // делаем картинку кликабельной
             insert    : '#main_image',
             onImage   : function(image,caption,thumb) { // добавляем эффекты смены изображения

                // появляется изображение и описание к нему
                image.css('display','none').fadeIn(1000);
                caption.css('display','none').fadeIn(1000);

                var _li = thumb.parents('li');

                _li.siblings().children('img.selected').fadeTo(500,0.7);

                thumb.fadeTo('fast',1).addClass('selected');

                // добавляем title к активному изображению
                image.attr('title','Next image >>');
             },
             onThumb : function(thumb) { // эффекты для миниатюр

                var _li = thumb.parents('li');

                // задаем прозрачность миниатюр
                var _fadeTo = _li.is('.active') ? '1' : '0.7';

                thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

                // эффекты при наведении
                thumb.hover(
                   function() { thumb.fadeTo('fast',1); },
                   function() { _li.not('.active').children('img').fadeTo('fast',0.7); } // don't fade out if the parent is active
                )
             }
          });
       });

    // ]]></script>

    И немного измененный код css.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .caption{font-style:italic;color:#887;}
    .demo{position:relative;margin-top:2em;}
    .gallery_demo{width:400px;margin:0 auto;}
    .gallery_demo li{width:68px;height:70px;border:none;margin: 15px; float: left;}
    .gallery_demo li div{left:40px}
    .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

    #main_image{margin:0 auto 60px auto;height:400px;width:400px;}
    #main_image img{margin-bottom:10px;}

    .nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}

    .info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
    .info p{margin-top:1.6em;}

    Вот почти и все, осталось только подготовить изображения и написать небольшой html-код.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="demo">
    <p style="text-align: center; display: none"><a onclick="$.galleria.prev(); return false;" href="#">Предыдущий</a> | <a onclick="$.galleria.next(); return false;" href="#">Следующий</a></p>

    <ul class="gallery_demo_unstyled">
       <li class="active"><img title="100 пудов ." src="images/stories/boomz/100%20pudov.jpg" border="0" alt="100 пудов" /></li>
       <li><img title="Фейерверки" src="images/boomz/bolshoykush.jpg" border="0" alt="Фейерверки" /></li>
       <li><img title="Фейерверки" src="images/boomz/boss.jpg" border="0" alt="Фейерверки" /></li>
       <li><img title="Фейерверки" src="images/boomz/bylina.jpg" border="0" alt="Фейерверки" /></li>
       <li><img title="Фейерверки" src="images/boomz/discoteka.jpg" border="0" alt="Фейерверки" /></li>
    </ul>
    </div>

    Вот и все. Если кому понадобятся кнопки «листания» то для этого достаточно, убрать в

    1
    <p style="text-align: center; display: none">

    display:none.

    display:none.

    Комментарии к "Галерея на jQuery"

    1. pavel
      13.05.2010 at 19:38

      Все замечательно работало до момента установки библиотек последней версии. После чего галерея работать перестала :( Подскажите, где ошибка!

      Ответить
      • admin
        13.05.2010 at 20:56

        сейчас в этой галереи потребности нет, поэтому не пользуюсь ей
        пришлите исходники на почту dnd.pliz@gmail.com и мы с вами попробуем разобраться в чем проблема

        Ответить

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *