 3 вида слайдшоу на jQuery Библиотека jQuery на сегодняшний день имеет наибольшее распространение среди фанатов современных технологий для своих сайтов, она предоставляет современному пользователю огромный спектр возможностей по реализации и внедрению функциональных, оригинальных плагинов на сайты, причем самой большой популярностью пользуются слайдеры. jQuery подключается автоматически на всех сайтах uCoz, вне зависимости от того, хотите ли вы этого или нет (без неё, кстати, некоторые функции на uCoz перестанут работать). Кстати, если вы используете старую версию 1.3.2, то рекомендую её сменить, так как первые два слайдшоу несовместимы со старой версией. Рекомендую использовать новую (стандартную) 1.7.2 версию. Слайдеры должны быть не просто красивыми, но и легкими предоставляя функциональное удобство. Мы рассмотрим три вида слайдшоу и их основные отличия - внешний вид, кроссбраузерность, меньшим объемом кода. Первый вариант слайдшоу прост и универсален в управлении, совместим со всеми современными браузерами, включая Internet Explorer 8/9, Firefox 3+, дизайн настраивается посредством CSS.  Как видно, в данном варианте для картинок-слайдов дополнительно выводятся текстовые подписи. Второй вариант, заслуживающий внимания, это реализация слайдшоу с использованием превью-изображения (неплохой вариант для демонстрации товара в интернет-магазине). Кстати, это слайдшоу сделано на основе первого.  Последний, третий вариант слайдшоу совместим со современными браузерами, включая Internet Explorer 7/8/9, Firefox 3+. И даже будет работать в нашем старом знакомом браузере IE6. Поразил простотой и широким форматом. Работает как в автоматическом, так и ручном режиме. «Новичкам» советую его не использовать.  Безусловно, хочется чтобы было «на автомате», но как? Рассмотрим вариант вывода первого варианта слайдшоу с помощью информера. Хочу отметить, что этим способом слайдер будет отображать изображения новостей в том случае, если вы добавляете картинку новостей через функцию «добавить изображение». Заходим в Панель Управления вашим сайтом по адресу: http://адрес_сайта/admin; затем на открывшейся странице переходим в Информеры → Создать информер. Раздел: Новости сайта, например; Тип данных: Материалы; Способ сортировки: любой; Количество материалов: любое количество; Количество колонок: 1 — создать. После создания, редактируем шаблон созданного информера  Заменяем весь шаблон информера на следующий код: Code <div class="slide"><a href="$ENTRY_URL$"><?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$"><?endif?><?endif?></a> <div class="caption" style="bottom:0"><p><?if(len($TITLE$)>50)?><?substr($TITLE$,0,55)?>...<?else?><a href="$ENTRY_URL$">$TITLE$</a><?endif?></p></div></div> После сохраняем изменения. Затем, нам необходимо вставить наш изменённый информер в нужное место. Рассказываю пошаговую установку: В архиве вы найдёте всё необходимое для установки, в том числе исходники демо-страниц.  Прикреплённый файл: 462_slider_demo.zip (4.05 Mb) |
Просмотров: 57698