jQuery галерия за бързо преглеждане на снимки

Представям ти един jQuery плъгин, който създава уеб интерфейс за преглеждане на снимки качени на твоя сайт.

Възможностите на плъгина галерия са наистина впечатляващи.

1. След зареждане на страницата освен първата снимка, която гледаш в момента, започват предварително да се зареждат следващите снимки и при натискане на връзката "Следваща снимка", снимката която следва се зарежда моментално;

2.  Навигацията между снимките се представя с умалени изображения на снимките (thumbnails) и може лесно да прескачаш от една снимка на друга с натискане на мишката. Малките снимки се разделят на страници, когато са много.

3. Всяка снимка има отделна котва, като това ти дава възможност да направиш отметка (bookmark) на отделна снимка;

4. Автоматично преглеждане на снимките (slideshow). През няколко секунди снимките се сменят.

5. Под всяка снимка може да се слага описателен текст;

6. Гъвкава конфигурация на настройките. Може да задаваш през колко секунди да се сменят снимките, колко снимки да се зареждат предваритело и др.

7. Управление на изгледа с CSS файл;

8. При забранен JavaScript в браузъра снимките се показват като списък - връзките към снимките и описанията им са в обикновен <li>  таг. По този начин търсачките имат достъп до всяка снимка и индексират лесно страницата.

9. За по-напредналите има възможност да се дописват JavaScript функции, които създават интересни ефекти при превключване от една снимка към друга.

10. Възможност за повече от една галерия в една и съща страница.

11. Галерията има валиден XHTML код по стандартите на W3C.

Галерията е много бърза, а точки 5, 8  и 11 правят галерията чудесен избор за един SEO оптимизиран сайт.

Как се инсталира галерията?

Плъгинът работи с jQuery версия 1.2.6 или по-нова. Ако вече имаш jquery в твоя сайт провери коя версия е и ако е по-стара от 1.2.6 ще трябва да я подмениш. Ако имаш по-нова версия, която ползваш за нещо друго, тогава не е нужно да я променяш. В момента последната версия е 1.3.2, но аз ти препоръчвам да ползваш възможно по-стара версия на jQuery. Причината е бързодействието на сайта. Не ти трябват излишни 20-30K във всяка страница. Също така ползвай съкратената версия, тази която има в името си min. Това е същия файл, но без излишни интервали в него. Получения js файл се чете много трудно, но се зарежда значително по-бързо.

1. Изтегли файловете.

jquery-1.2.6.min.js или директно от официалния сайт на jQuery http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js

и файла с плъгина от тук jquery.galleriffic.min.js и ги постави в директория /js,  която трябва да е в главната уеб директория (ако нямаш такава директория на сървъра първо я създай).

Изтегли още файловете galleriffic.css и loader.gif и ги постави в директория /css в главната ти уеб директория.

За удобство всичките файлове съм ги включил в този архив ganbox.com_gallery.

2. Създай страницата на галерията.

Например gallery.html и между таговете <head> постави обръщение към JavaScript-овете и към CSS файла.

<head>
...
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/js/jquery.galleriffic.min.js"></script>
<link rel="stylesheet" href="/css/galleriffic.css" type="text/css" />
...
</head>

3. Създай div контейнерите на галерията.

<div id="controls"></div>
<div id="loading"></div>
<div id="slideshow"></div>
<div id="caption"></div>
<div id="thumbs">
 ... списък с тагове <li> които описват снимките даден е по-долу ...
</div>

Всеки от тези div е незадължителен. Може да премахнеш например реда с div caption и така под снимките няма да има описания.

4. Добави списък със снимки.

В контейнера div thumbs постави толкова тага <li> колкото снимки има. Формата е следния:


<ul class="thumbs noscript">    
    <li><a class="thumb" href="път до снимката с голям размер" title="заглавие на снимката"><img src="път до умалена картинка" alt="заглавие на снимката"/></a><div class="caption">(произволен HTML тук например с описание на снимката)</div>    
    </li>
... (тук постави списък с останалите елементи <li> за всяка снимка)
</ul>

Галерията изисква за всяка снимка да има освен оригиналната снимка и умалено копие (thumbnail). Да предположим, че имаш 3 снимки в папка /img в главната уеб директория с имена на файловете 1.jpg, 2.jpg, 3.jpg с големина примерно 800x800 пиксела и техни умалени копия с имена 1s.jpg, 2s.jpg и 3s.jpg и големина 40x40 пиксела. Тогава списъкът със снимки ще изглежда по този начин:


<ul class="thumbs noscript">
    <li><a class="thumb" href="/img/1.jpg" title="заглавие на снимка 1"><img src="/img/1s.jpg"alt="заглавие на снимка 1" /></a><div class="caption">(описание на снимка 1)</div></li>
    <li><a class="thumb" href="/img/2.jpg" title="заглавие на снимка 2"><img src="/img/2s.jpg" alt="заглавие на снимка 2" /></a><div class="caption">(описание на снимка 2)</div></li>
    <li><a class="thumb" href="/img/3.jpg" title="заглавие на снимка 3"><img src="/img/3s.jpg" alt="заглавие на снимка 3" /></a><div class="caption">(описание на снимка 3)</div></li>
    <!-- ... (тук постави списък с останалите елементи <li> за всяка снимка) -->
</ul>

Ако нямаш умалени копия използвай специална програма за създаването им, например уеб инструмента Промяна на снимка или безплатната програма от irfanview.com. В краен случай ако нямаш малки снимки може да зададеш пътя до големите снимки, но това ще бави зареждането на страницата. Разбира се за създаване на списъка може да се ползва цикъл  foreach на php.

5. Стартирай галерията.

Извикай следния JavaScript код:

<script type="text/javascript">
    // Тези стилове се активират само ако браузъра има включен JavaScript
    // Ширината 300px е за полето с малките снимки
    $('div.navigation').css({'width' : '300px', 'float' : 'left'});
    $('div.content').css('display', 'block');

    // Първоначално задава opacity на малките картинки и
    // допълнителни стилове за hover ефект
    var onMouseOutOpacity = 0.67;
    $('#thumbs ul.thumbs li').css('opacity', onMouseOutOpacity)
        .hover(
            function () {
                $(this).not('.selected').fadeTo('fast', 1.0);
            },
            function () {
                $(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
            }
        );

    $(document).ready(function() {
        // Инициализиране на галерията
        var galleryAdv = $('#gallery').galleriffic('#thumbs', {
            delay:                  3000, /* това са 3 секунди */
            numThumbs:              12,
            preloadAhead:           10, /* задай -1, за да зареди всички */
            enableTopPager:         true,
            enableBottomPager:      true,
            imageContainerSel:      '#slideshow',
            controlsContainerSel:   '#controls',
            captionContainerSel:    '#caption',
            loadingContainerSel:    '#loading',
            renderSSControls:       true,
            renderNavControls:      true,
            playLinkText:           '&raquo; Автоматично разглеждане',
            pauseLinkText:          '# Пауза',
            prevLinkText:           '&laquo; Предишна ',
            nextLinkText:           'Следваща &raquo;',
            nextPageLinkText:       'Следваща &raquo;',
            prevPageLinkText:       '&laquo; Предишна',
            enableHistory:          true,
            autoStart:              false,
            onChange:               function(prevIndex, nextIndex) {
                $('#thumbs ul.thumbs').children()
                .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                .eq(nextIndex).fadeTo('fast', 1.0);
            },
            onTransitionOut:        function(callback) {
                $('#caption').fadeTo('fast', 0.0);
                $('#slideshow').fadeTo('fast', 0.0, callback);
            },
            onTransitionIn:         function() {
                $('#slideshow').fadeTo('fast', 1.0);
                $('#caption').fadeTo('fast', 1.0);
            },
            onPageTransitionOut:    function(callback) {
                $('#thumbs ul.thumbs').fadeTo('fast', 0.0, callback);
            },
            onPageTransitionIn:     function() {
                $('#thumbs ul.thumbs').fadeTo('fast', 1.0);
            }
        });
    });
</script>

Ако има въпроси или нещо не тръгва пишѝ коментар, като сложиш връзка към кода. Много добра галерия, бърза, удобна и SEO приятелски ориентирана. Ако някой иска да му инсталирам тази галерия в сайта може да се свърже с мен за оферта.

В статията са ползвани материали от сайта на автора на плъгина http://www.twospy.com
Прочетена:18554
1 - лоша2 - слаба3 - средна4 - добра5 - отлична (1 гласа, оценка: 5,00 от 5. Моля изберете оценка!)
Loading...
Георги Стефанов
Магистър по информатика, който се занимава с компютри от 1988 г., професионално с програмиране от 1998 г., а с уеб технологии от 2002 г. Има богат опит при оптимизиране на бизнес сайтове. Повече от 15 години развива успешно свои уеб проекти и работи с български и международни компании за постоянно подобряване на техните сайтове и увеличаване на онлайн продажбите. 

3 comments on “jQuery галерия за бързо преглеждане на снимки”

  1. Имаше грешка в кода на реда "delay: 3000, # коментар" и също през един ред по-долу бях поставил коментар в стил PHP вместо JavaScript коментар започващ с /* и завършващ с */. Сега кода е поправен и трябва да работи.

  2. Галерията е наистина впечатляваща.В последно време зех все повече да хаесвам jQuery и смятам да почна да го уча 🙂

  3. И, при мен тръгна, но правя в момента допълнителни промени за да ми изглежда по-добре всичко!Хубав урок!!!

споделиха
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram