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

jQuery 12.05.2013

Сегодня мы сделаем новую фото галерею. Недавно я обнаружил еще один приятный 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');
});