Автор

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

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

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


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

В последнее время чаще встречаются 3d эффекты на сайте, это не удивительно, ведь это позволяет создать иллюзию объемности на ресурсе, при этом это положительно сказывается на посетителях, ведь уникальный пользователь всегда рад чему-то новенькому и интересному, которое можно потрогать самому и посмотреть это в действии. В данном уроке мы рассмотрим как создать эффект переворота изображений, как в книжке, для слайдера изображений и не только. Так как практически все браузеры поддерживают трансформации, то данный эффект станет отличным дополнением..


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

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


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

Порой разработчик не особо заморачивается дизайном своего ресурса и приходит к выводу, что будет использовать готовые шаблоны для сайта. Это весьма упрощает жизнь верстальщику, так как приходиться работать с готовым материалом, который уже можно изменить на свое усмотрение не создавая дизайн с нуля. В данном посте мы рассмотрим подборку замечательных, на мой взгляд, готовых шаблонов для сайта, которые вы можете скачать и использовать на свое усмотрение. Уверен, что каждый из посетителей найдет что-нибудь примечательное на свой вкус..

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close