Автор

12 05.2013
Создание Фото-Альбома с Galleriffic jQuery плагином

Создание Фото-Альбома с Galleriffic jQuery плагином


 

Сегодня мы сделаем новую фото галерею. Недавно я обнаружил еще один приятный JQuery плагин - Galleriffic. Этот плагин хорошо оптимизирован для работы с большими объемами фотографий. Также есть хорошие возможности, как на маленькую картинку, навигации (с нумерацией страниц), jQuery.history плагин интеграции, слайд-шоу с Play/Pause, клавиатуры и т.д.

 

ДЕМО
ИСХОДНИКИ

 

Шаг 1. HTML

Вот исходный html-код нашего фотоальбома. Я не буду пугать вас огромным кодом, но покажу наиболее важное.

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Creating photo album with Galleriffic jQuery plugin | Script Tutorials</title>

        <link href="css/galleriffic.css" rel="stylesheet" type="text/css" />
        <link href="css/main.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.history.js"></script>
        <script type="text/javascript" src="js/jquery.galleriffic.js"></script>
        <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
    </head>
    <body>
        <div class="container">

            <div class="navigation-container">
                <div id="thumbs" class="navigation">
                    <a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a>

                    <ul class="thumbs">
                        <li>
                            <a class="thumb" name="photo1" href="images/pic1.jpg" title="Title #1">
                                <img src="images/t_pic1.jpg" alt="Title #1" />
                            </a>
                            <div class="caption">
                                <div class="image-title">Title #1</div>
                                <div class="image-desc">HTML <b>description</b></div>
                                <div class="download"><a href="images/pic1.jpg">Download Original</a></div>
                            </div>
                        </li>
                        <li>
                            <a class="thumb" name="photo2" href="images/pic2.jpg" title="Title #2">
                                <img src="images/t_pic2.jpg" alt="Title #2" />
                            </a>
                            <div class="caption">
                                <div class="image-title">Title #2</div>
                                <div class="image-desc">HTML <i>description</i></div>
                                <div class="download"><a href="images/pic2.jpg">Download Original</a></div>
                            </div>
                        </li>
                        ........... other photos here ..............
                    </ul>
                    <a class="pageLink next" style="visibility: hidden;" href="#" title="Next Page"></a>
                </div>
            </div>
            <div class="content">
                <div class="slideshow-container">
                    <div id="controls" class="controls"></div>
                    <div id="loading" class="loader"></div>
                    <div id="slideshow" class="slideshow"></div>
                </div>
                <div id="caption" class="caption-container">
                    <div class="photo-index"></div>
                </div>
            </div>
            <div style="clear: both;"></div>

        </div>

        <footer>
            <h2>Creating photo album with Galleriffic jQuery plugin</h2>
            <a href="http://www.script-tutorials.com/creating-photo-album-with-galleriffic-jquery-plugin/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>

Шаг 2. CSS

div#container {
  overflow: hidden;
}
div.content {
  display: none;
  clear: both;
}

div.content a, div.navigation a {
  text-decoration: none;
}
div.content a:hover, div.content a:active {
  text-decoration: underline;
}

div.navigation a.pageLink {
  height: 52px;
  line-height: 52px;
}

div.controls {
  margin-top: 5px;
  height: 23px;
}
div.controls a {
  padding: 5px;
}
div.ss-controls {
  float: left;
}
div.nav-controls {
  float: right;
}

div.slideshow-container,
div.loader,
div.slideshow a.advance-link {
  width: 510px;
}

div.loader,
div.slideshow a.advance-link,
div.caption-container {
  height: 342px;
}

div.slideshow-container {
  position: relative;
  clear: both;
  float: left;
  height: 372px;
}

div.loader {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(loader.gif);
  background-repeat: no-repeat;
  background-position: center;
}
div.slideshow span.image-wrapper {
  display: block;
  position: absolute;
  top: 30px;
  left: 0;
}
div.slideshow a.advance-link {
  display: block;
  line-height: 342px;
  text-align: center;
}

div.slideshow a.advance-link:hover,
div.slideshow a.advance-link:active,
div.slideshow a.advance-link:visited {
  text-decoration: none;
}
div.slideshow a.advance-link:focus {
  outline: none;
}

div.slideshow img {
  border-style: solid;
  border-width: 1px;
    border-color: #888;
}
div.caption-container {
    color: #eee;
  float: right;
  position: relative;
  margin-top: 30px;
}
span.image-caption {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

div.caption-container, span.image-caption {
  width: 334px;
}

div.caption {
  padding: 0 12px;
}

div.image-title {
  font-weight: bold;
  font-size: 1.4em;
}
div.image-desc {
  line-height: 1.3em;
  padding-top: 12px;
}
div.download {
  margin-top: 8px;
}
div.photo-index {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 12px;
}
div.navigation-container {
  float: left;
  position: relative;
  left: 50%;
}
div.navigation {
  float: left;
  position: relative;
  left: -50%;
}
div.navigation a.pageLink {
  display: block;
  position: relative;
  float: left;
  margin: 2px;
  width: 16px;
  background-position:center center;
  background-repeat:no-repeat;
}
div.navigation a.pageLink:focus {
  outline: none;
}
div.navigation a.prev {
    background-image: url(page_prev.gif);
}
div.navigation a.next {
    background-image: url(page_next.gif);
}

ul.thumbs {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}
ul.thumbs li {
  float: left;
  padding: 0;
  margin: 2px;
  list-style: none;
}
a.thumb {
  padding: 1px;
  display: block;
}
a.thumb:focus {
  outline: none;
}

ul.thumbs li.selected a.thumb {
    background: #fff;
}

ul.thumbs img {
  border: none;
  display: block;
}
div.pagination {
  clear: both;
  position: relative;
  left: -50%;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
  position: relative;
  display: block;
  float: left;
  margin-right: 2px;
  padding: 4px 7px 2px 7px;
  border: 1px solid #ccc;
}
div.pagination a:hover {
  text-decoration: none;
}
div.pagination span.current {
  font-weight: bold;
}
div.pagination span.ellipsis {
  border: none;
  padding: 5px 0 3px 2px;
}

div.gallery-gutter {
  clear: both;
  padding-bottom: 20px;
}

Шаг 3. JS

jQuery(document).ready(function($) {
    $('div.content').css('display', 'block');

    var onMouseOutOpacity = 0.67; // initial opacity
    $('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({ // onhover styles
        mouseOutOpacity:   onMouseOutOpacity,
        mouseOverOpacity:  1.0,
        fadeSpeed:         'fast',
        exemptionSelector: '.selected'
    });

    var gallery = $('#thumbs').galleriffic({ // initialization of Galleriffic plugin
        delay:                     2500,
        numThumbs:                 8,
        preloadAhead:              8,
        enableTopPager:            false,
        enableBottomPager:         false,
        imageContainerSel:         '#slideshow',
        controlsContainerSel:      '#controls',
        captionContainerSel:       '#caption',
        loadingContainerSel:       '#loading',
        renderSSControls:          true,
        renderNavControls:         true,
        playLinkText:              'Play Slideshow',
        pauseLinkText:             'Pause Slideshow',
        prevLinkText:              'Previous Photo',
        nextLinkText:              'Next Photo',
        nextPageLinkText:          'Next &rsaquo;',
        prevPageLinkText:          '&lsaquo; Prev',
        enableHistory:             true,
        autoStart:                 false,
        syncTransitions:           true,
        defaultTransitionDuration: 900,
        onSlideChange:             function(prevIndex, nextIndex) {
            this.find('ul.thumbs').children()
                .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                .eq(nextIndex).fadeTo('fast', 1.0);
        },
        onPageTransitionOut:       function(callback) {
            this.fadeTo('fast', 0.0, callback);
        },
        onPageTransitionIn:        function() {
            var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
            var nextPageLink = this.find('a.next').css('visibility', 'hidden');

            if (this.displayedPage > 0)
                prevPageLink.css('visibility', 'visible');

            var lastPage = this.getNumPages() - 1;
            if (this.displayedPage < lastPage)
                nextPageLink.css('visibility', 'visible');

            this.fadeTo('fast', 1.0);
        }
    });

    gallery.find('a.prev').click(function(e) { // other event handlers - Prev/Next links
        gallery.previousPage();
        e.preventDefault();
    });

    gallery.find('a.next').click(function(e) {
        gallery.nextPage();
        e.preventDefault();
    });

    // integration with jquery.history
    function pageload(hash) {
        if (hash) {
            $.galleriffic.gotoImage(hash);
        } else {
            gallery.gotoIndex(0);
        }
    }

    $.historyInit(pageload, 'system.html');
});

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

06 06.2014
Создание Фото-Альбома с Galleriffic jQuery плагином

Продолжаем тему объемности хотелось бы подчеркнуть, что в современном дизайне стали популярны фоновые эффекты с объемными элементами, в данном уроке мы рассмотрим один из таких фонов. Мы создадим эффект тучек, которые будут анимированные, а при движении курсора мыши будут изменять свое позиционирование относительно осей координат. Это смотрится весьма эффектно, здесь задействован эффект параллакса, именно он не оставит равнодушным любого посетителя. Вы можете его использовать для заглушки сайта, начальной страницы.


26 04.2013
Создание Фото-Альбома с Galleriffic jQuery плагином

Слайдер был придуман ради правильного оформления контента на сайте, тем самым скрывая и подчеркивая важную информацию на сайте, но если в слайдере достаточно много элементов, то перед вами непростое решение, а именно найти метод постраничного разбиения блоков, кроме этого нам все этого необходимо организовать в примечательный ротатор материала. Как вы уже, наверное, догадались, в данном уроке мы рассмотрим как все это можно реализовать у себя на сайте.


30 04.2013
Создание Фото-Альбома с Galleriffic jQuery плагином

Модальные окна достаточно эффективное решение в современном веб-дизайне, кроме того, что пользователь остается на той же странице и получает необходимую информацию, так и красивые окна позволяют раздвинуть границы веб-дизайна, добавив особую изюминку в дизайн. Как вы уже догадались в сегодняшнем уроке речь пойдет о создании красивых модальных окон с помощью небольшого плагина jquery. Данный способ реализации окна имеет множество настроек, что позволит подогнать плагин под необходимые вам параметры, затратив при этом минимум усилий.


31 10.2018
Создание Фото-Альбома с Galleriffic jQuery плагином

В этой статье мы рассмотрим, как установить систему интервалов в CSS и как использовать относительные единицы для реагирования.


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close