Слайд-шоу на JQuery

slideshow

Любой владелец  интернет-ресурса (даже самого скромного), размещающий фотографии или картинки, рано или поздно задумывается о том, как бы получше организовать их отображение. А все для вас дорогие читатели, чтобы вам понравилось, чтобы вам было удобно, чтобы вы захотели сюда вернуться.

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

JQuery SlideView

SlideView

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

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

Скачиваем плагин отсюда, затем подключаем его в основную страницу, равно как и сам JQuery (этот шаг аналогичен для всех трех примеров, поэтому не буду повторяться):

<script src="jquery.js" type="text/javascript"></script>
<script src="slideView.js" type="text/javascript"></script>

После этого понадобится вот такая разметка:

<div id="slideshow">
	<ul class="slideView">
	   <li><a href="#"><img src="images/1.jpg" alt="описание картинки1" /></a></li>
	   <li><a href="#"><img src="images/2.jpg" alt="описание картинки2" /></a></li>
       </ul>
</div>

Картинки размещаются в конейнере <ul> с обязательным параметром id=»slideView«, который в свою очередь заключен в div с id=»slideshow«. Параметр alt у картинки довольно удобно выступает в роли описания к слайду. Для активации плагина необходимо написать следующее:

$(function() {
	$("#slideshow").slideView();
});

Превьюшки картинок не требуется вставлять в разметку, достаточно просто сложить их в одну папку с картинками оригинального размера, предварительно присвоив им префикс thumb_. А если вам хочется использовать какой-то другой префикс, или изменить скорость перелистывания например, то это можно сделать вот так:

$(function() {
	$("#slideshow").slideView({
		thumbPrefix: "thumb_",
		slideBy : 1,
		speed: 350
	});
});

Здесь как не трудно догадаться speed это скорость перелистывания слайдов (чем больше значение, тем медленнее), thumbPrefix — префикс для миниатюр, если уж сильно хочется изменить дефолтное значение, и slideBy — количество перелистываемых миниатюр, по умолчанию он листает по одной, но можно задать и больше.

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

Демо-версия слайд-шоу.

PikaChoose

pikachoose

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

Плагин интересен прежде всего тем, что вам необязательно вручную создавать миниатюры для изображений, picachoose может сделать это автоматически. Разметка для этого слайд-шоу очень простая:

<ul id="pikame">
	<li><img src="1.jpg"/><span><a href="http://www.pikachoose.com">link</a></span></li>
	<li><img src="2.jpg"/><span>Or any html you want inside of captions!</span></li>
	<li><img src="3.jpg"/><span> Donec in ante. Donec pretium. </span></li>
</ul>

Картинки размещаются в простом маркированном списке, подписи и ссылка к изображению размещается в контейнере <span>.

Активируется плагин вот так:

function (){
     $("#pikame").PikaChoose();
});

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

function (){
     $("#pikame").PikaChoose(
	  {
	     show_captions: true,
	     slide_enabled: true,
	     auto_play: false,
	     show_prev_next: true,
	     slide_speed: 5000,
	     thumb_width: 50,
	     thumb_height: 42,
	     buttons_text: { play: "Play", stop: "Stop", previous: "Previous", next: "Next" },
	     delay_caption: true,
	     user_thumbs: false
           });
});

Отдельным пунктом стоит выделить параметр user_thumbs, потому что он определяет автоматическое создание миниатюр изображений. По умолчанию его значение false, но если вы по каким-то причинам хотите использовать собственные миниатюры, установите его значение в true.

Также при использовании собственных миниатюр, немного изменится html-разметка:

<ul id="pikame">
	<li><img ref="1.jpg" src="user.jpg"/><span><a href="http://www.pikachoose.com">link</a></span></li>
        <li><img ref="2.jpg" src="user.jpg"/><span> Set custom thumbnails.</span></li>
</ul>

К тегу img добавится атрибут ref содержащий ссылку на полную картинку, а в src указывает на созданную вручную миниатюру.

Демо-версия слайд-шоу.

Supersized

supersized

Supersized реализует полноэкранное слайд-шоу. Из трех перечисленных плагинов, наиболее прост в  использовании. Он автоматически масшабирует картинки по ширине окна браузера (ставит их в качестве фона) и запускает их как слайд-шоу. Отлично работает во всех браузерах.

Для корректной работы плагина должны быть прописаны соответствующие стили CSS:

body {  
        overflow:hidden;  
}  
#supersize img, #supersize a{  
    height:100%;  
    width:100%;  
    display:none;  
}  
#supersize .activeslide, #supersize .activeslide img{  
    display:inline;  
}  

Здесь overflow:hidden используется для скрытия полос прокрутки, плагин использует идентификатор #superize, для определения контейнера содержащего изображениия для слайд-шоу. Класс .activeslide сообщает плагину, какое именно изображение в данный момент отображается на экране. 

Разметка html также очень простая:

<div id="supersize">  
       <img class="activeslide" src="picture.jpg"/>  
       <a href="#"><img src="picture2.jpg"/></a>  
</div>  

Плагин активируется вот так:

$(function(){  
    $.fn.supersized.options = {  
        startwidth: 1024,  
        startheight: 768,  
        minsize: .5,  
        slideshow: 1,  
        slideinterval: 5000  
    };  
        $('#supersize').supersized();  
});  

startwidth и startheight — разрешение изображений слайд-шоу, minsize — процентная величина ширины/высоты изображения, в десятичном виде, slideshow — включение/выключение слайд-шоу, slideinterval — скорость переключения слайдов.

Демо-версия слайд-шоу.

На самом деле существует множество плагинов к JQuery для организации слайд-шоу, если вам известны другие интересные плагины, расскажите о них.

Слайд-шоу на JQuery: 18 комментариев

  1. А совместимы ли они с Лайтбоксом например? Я первое слайдшоу так и не запустил. Но буду пробовать. А вообще спасибо. Мне как новичку, оч помогает.

    1. С лайтбоксом не знаю не пробовала, но Jquery всегда можно запустить в неконфликтном режиме, а вот про совместимость мне не известно.

  2. Помогите пожалуйста. Как быть если на странице две фото-галереи. Первая отрабатывается а вторая нет :(
    подскажите пожалуйста что сделать

    1. здесь может быть несколько причин, нужно знать подробнее. Если фото-галереи от разных скриптов, возможен конфликт, лучше бы показать на примере.

  3. Что необходимо изменить в CSS (1й вариант слайд шоу), что бы при наведении на превью, большая картинка оставалась на месте, а не прокручивалась обратно на первоначально изображение. Это можно сделать при помощи стрелок находящихся справа и слева, но хотелось бы и при помощи превью.

    1. А с чего вы взяли что для этого нужно менять CSS? В данном случае поведение слайдов полностью контролируется плагином, и если что-то менять, то только в нем. Честно говоря точно не знаю, не было времени разбираться в нем. Но если вы не разбираетесь в ява-скрипте, лучше поищите другое слайд-шоу, их очень много, найдется и такое, которое вас устроит.

  4. Объясните пожалуйста тупому обитателю танка, куда нужно вставить вот этот код что б активировать плагин

    $(function() {
    $(«#slideshow»).slideView();
    });

    1. Этот код нужно вставить на ту страницу, где вы хотите организовать слайдшоу, между тегами:

      <script type=»text/javascript»>

      </script>

      Но перед этим плагин и jquery нужно подключить в секции head, как и написано в статье

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

  5. У менея такая проблема не могу сдделать открытие на главной странице слайд шоу, которое запускается из фрейма, который так же расположен на главной странице??? Такое вообще возможно сделать? Был бы признателен за помощь, не могу нигде найти ответ….

    1. Не знаю с фреймами не пробовала, но если он находится на той же странице, может просто не использовать фрейм?

  6. Дело в том, что на основе фрейма сделано перемещение фотографий по горизонтали, а при нажатии на каждую, хотелось бы сделать запуск слайдшоу. Если знаете как всё же открыть слайд шоу из фрейма сообщите плизззззз

  7. Добрый день. Скажите а можно отключить режим растягивания на весь Экран. У меня текс на картинках сильно растягивается или может можно текст отдельно выводить для каждой фотографии

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *