Плагин для создания портфолио

Используется jQuery плагин jmFullWall для получения действительно впечатляющих портфолио из фотографий.

Требования

  • jQuery 1.4+
  • jquery.imgpreload.js (thanks to Dimas Begunoff)
  • jquery.imagepanner.js (thanks to Dynamic Drive)
  • jmFullWall.js

Совместимость

  • Mozilla Firefox
  • Google Chrome
  • Safari
  • Opera
  • IE8+
Плагин для создания портфолио

Разметка HTML

Для Демо 4

<div id="wall-container">
    <div id="wall-loading"></div>
    
    <div id="wall-detail"></div>
    
    <div id="wall">
        <div id="wall-items">    
            <div class="wall-item">
                <span class="bg hide">res/img/slide/1.jpg</span>
                <span class="img_detail hide">res/img/slide/1.jpg</span>
                <span class="tooltip hide">Audi Locus</span>
                <a href="#"><span class="title">Audi Locus</span></a>
            </div>

            <div class="wall-item">
                <span class="bg hide">res/img/slide/2.jpg</span>
                <span class="img_detail hide">res/img/slide/2.jpg</span>
                <span class="tooltip hide">Porsche Supercar</span>
                <a href="#"><span class="title">Porsche Supercar</span></a>
            </div>

            <div class="wall-item">
                <span class="bg hide">res/img/slide/3.jpg</span>
                <span class="img_detail hide">res/img/slide/3.jpg</span>
                <span class="tooltip hide">Ford GT</span>
                <a href="#"><span class="title">Ford GT</span></a>
            </div>

            <div class="wall-item">
                <span class="bg hide">res/img/slide/4.jpg</span>
                <span class="img_detail hide">res/img/slide/4.jpg</span>
                <span class="tooltip hide">Lamborghini Murcielago</span>
                <a href="#"><span class="title">Lamborghini Murcielago</span></a>
            </div>

            <div class="wall-item">
                <span class="bg hide">res/img/slide/5.jpg</span>
                <span class="img_detail hide">res/img/slide/5.jpg</span>
                <span class="tooltip hide">Nissan R390 GT1</span>
                <a href="#"><span class="title">Nissan R390 GT1</span></a>
            </div>

            <div class="wall-item">
                <span class="bg hide">res/img/slide/6.jpg</span>
                <span class="img_detail hide">res/img/slide/6.jpg</span>
                <span class="tooltip hide">Porsche 911 GT3 RS</span>
                <a href="#"><span class="title">Porsche 911 GT3 RS</span></a>
            </div>

        </div>
    </div>
</div>

CSS

Подключаем файл стилей:

<link rel="stylesheet" type="text/css" href="res/css/jmFullWall.css" />

javascript

Подключаем скрипты:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="res/js/lib/jquery.imgpreload.js"></script>
<script type="text/javascript" src="res/js/lib/jquery.imagepanner.js"></script>
<script type="text/javascript" src="res/js/lib/jquery.jmFullWall.js"></script>
 
<script type="text/javascript">
$(function(){
    $('#wall').jmFullWall({
        itemsForRow : 5,
        itemTransition : 'slideDown',
        itemTransitionSpeed : 150,
        detailTransitionIn : 'slideDown',
        detailTransitionOut : 'slideUp'
    });   
});
</script>

Опции

  • itemTransition:fadeIn, Эффект появления миниатюр. Может быть установлен на "fadeIn", "show" или "slideDown".
  • itemTransitionSpeed:200, Скорость появления миниатюр. Может быть "slow", "normal", "fast" или в миллисекундах (например, 1000).
  • itemsForRow:5, Сколько элементов в строке.
  • itemsBtnNext:jmFullWall-next, Название класса для кнопки "Вперед".
  • itemsBtnPrev:jmFullWall-prev, Название класса для кнопки "Назад".
  • itemsBtnClose:jmFullWall-close, Название класса для кнопки "Закрыть".
  • detailTransitionIn:fadeIn, Эффект при открытии изображения. Может быть "fadeIn", "show" или "slideDown".
  • detailTransitionInSpeed:500, Скорость открытия изображения. Может быть "slow", "normal", "fast" или в миллисекундах (например, 1000).
  • detailTransitionOut:fadeOut, Эффект при закрытии  изображения. Может быть "fadeOut", "hide" или "slideUp".
  • detailTransitionOutSpeed:500, Скорость закрытия изображения. Может быть "slow", "normal", "fast" или в миллисекундах (например, 1000).
  • showTooltip:true, Включить подсказки, когда изображение полностью загрузится.
  • imgPanning:true, Включить панорамирование изображения, если режим полноэкранный.Enable the panning of the image when is in fullscreen mode.
  • imgPanningCenter:true, Центрировать изображение, если режим полноэкранный.
  • imgPanningZoom:true, Включить опцию увеличения, если режим полноэкранный.

СКАЧАТЬСкачек: 947
1,34 Mb
Кто скачал?

ДЕМОПосмотреть
пример