Главная » Управление и настройка системы uCoz » Дополнительные функции » 3 вида слайдшоу на jQuery

3 вида слайдшоу на jQuery

05.12.2012 в 19:07
Автор: Sheriff



Библиотека 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.05Mb)

Рейтинг: 27  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 39118          Комментариев: 176
19.07.2016 в 15:37      0  

Подскажите пожалуйста, как сделать на 1 странице 2-3 таких слайд шоу (одинаковых, но с разными изображениями? 1-е работает, второе уже никак
15.07.2016 в 21:28      0  

Здравствуйте, у меня долго не получалось сделать слайдшоу на Укозе, хотя на отдельном сайте работало. Потом узнал, что сначала нужно загружать jquary.js, а потом slides.js, и никак иначе. Когда я пихаю в шаблон инициализацию слайдшоу, куда бы я ее не ставил, Укоз всё равно сначала загружает slides.js, и ничего я с этим поделать не могу. Как с этими бороться?
Код
......
<script type="text/javascript" src="/my_js/slides.js"> <!-- Это должно загружаться во вторую очередь-->
</script><script type="text/javascript">
$(function(){
.......
<link rel="stylesheet" href="/.s/src/moder_panel/moder_panel_new.css" />
   <script type="text/javascript" src="/.s/src/jquery-1.7.2.js"></script> <!-- Это должно загружаться в первую очередь-->
   <script type="text/javascript" src="/.s/src/uwnd.js?2"></script>
.....
http://optimal-repair.ucoz.net/index/0-2#
______________________

Проблема решена. Невнимательно прочитал, что код в шаблон нужно вставлять после </head>. Смысл этого мне неясен, но всё работает.
02.06.2016 в 16:00      0  

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

1)создал папку "Js" и загрузил туда файл slides.js
далее все по инструкции
2)вставил код после закрытого head на нужную страницу
3)создал информер новостей и в (по иструкции с изменением кода дизайна)
4)в глобальный блок вставил 
Код
<div class="container" id="example"><div id="slides"><div class="slides_container">$[color=#ff0000]MYINF_15$</div>            
  <a href="#" class="prev"><img src="/img/arrow-prev.png" width="24"  
height="43" alt="Arrow Prev"></a>            
  <a href="#" class="next"><img src="/img/arrow-next.png" width="24"  
height="43" alt="Arrow Next"></a>            
  </div><img src="/img/example-.png" width="739" height="341" alt="Example Frame" id="frame"></div>
5) потом код глобального блока в нужное место на странице
6)вставил код css из премера в конец страницы...

з.ы. версия jQuery 1.10.2.
18.04.2016 в 14:12      0  

Здравствуйте. Сегодня попытался добавить первый слайдер на своем сайте. После чего сайт перестал открываться - мой ip-адрес попал в блокировку (через другого провайдера сайт открывается нормально). Поиск по http://forum.ucoz.ru/ показал что это скорее всего из-за:
Цитата
"Если вы что-то делали на сайте и тоже получили сообщение о временной блокировке IP или получаете это сообщение просто при попытке зайти на сайт, то это значит, что у вас в коде страниц установлены скрипты вызывающие JQuery и в них много запросов get и post, то происходит временная блокировка IP при интенсивном обновлении страниц и переходах по сайту. Это срабатывает защита от ддос."
Как можно избежать таких проблем при использовании данного слайдера?

P.S. В данный момент блокировка снята, и слайдер с сайта мною удален.
06.06.2016 в 18:27      0  

В этих скриптах нет пост запросов, блокировка с ними не связана.
25.11.2015 в 18:56      0  

Добрый вечер! Я новичок. Что-то не пойму, что не так с попыткой сделать первый слайдер. Сам он отображается, но нет самих картинок. Ссылки дал на загруженные у себя. не понимаю. Может быть вы мне поможете?
Вот сайт: http://cp.ucoz.com
p.s. Все, разобрался.
30.09.2015 в 08:07      0  

bandey.ru все получилось только адрес картинок поменял
21.08.2015 в 19:29      0  

Здравствуйте, установила 1ый слайдер все работает, только не отображается бегунок, ну то есть то что под слайдером серенькие и зелененькие кружочки. В чем проблема?
22.08.2015 в 06:45      0  

Пожалуйста, укажите адрес сайта.
22.08.2015 в 15:08      0  

probka.ucoz.net (Я просто не стала путь ко всем фоткам знаю что работает) а вот бегунок не видно.
26.08.2015 в 16:54      0  

В данный момент у вас на сайте.. вообще ничего не видно. smile
13.08.2015 в 06:37      0  

Помогите пожалуйста разобраться с первым слайдером! Второй день мучаюсь!!!. Картинки не отображаются, сам слайдер есть, а внутри только серый фон)

разобрался-  в лишний код, скопированный мною не туда... убрал.
30.06.2015 в 12:45      0  

Как удалить комментарий?
30.06.2015 в 13:18      0  

Здравствуйте, если Вы спрашиваете о том как убрать комментарий под изображением, то Вы можете его найти в коде который добавляли на сайт, текст комментария к изображению оформлен тегом
Код
<p></p>
Пример
Код
<div class="slide">
<a href="#"><img src="slide-70.jpg" width="570" height="270" alt="Slide 7"></a>
<div class="caption">
<p>Логотип uCoz'a</p>  - текст комментария
</div></div>

Cкриншот
10.06.2015 в 11:12      0  

Мне инструкция к первому слайдеру не помогла. Не понимаю, куда вставлять три кода.
И не понимаю, как в слайдере будут картинки появляться (новые). Почему нельзя сделать пошаговую инструкцию, не все же здесь опытные мастера, есть и полные чайники вроде меня.
Хочу на своём сайте в шапке на главной сделать большой слайдер... http://мирвдохновения.рф/
11.06.2015 в 10:06      +1  

Для редактирования шаблонов необходимо иметь хотя бы базовые знания в HTML (язык разметки WWW документов) и CSS (Cascading Style Sheets) технологиях.

Если Вам сложно следовать данной инструкции - рекомендуем обратиться на http://upartner.pro/ за помощью.
12.06.2015 в 18:52      0  

Спасибо, я в курсе, что нужно знания иметь, но у меня их нет, и пока не предвидится. Я уже разобралась со слайдером, прописала код в PROMO. Все работает, правда, пока картинки не подготовила, времени нехватка.
Авторам мануалов не мешало бы учитывать, что здесь много таких людей, кому некогда тратить время на подробности. Нужно просто к своим инструкциям вставить пару тройку наглядных скриншотов. Вы посмотрите на комменты, куча однотипных вопросов, на которые автор терпеливо отвечает. А стоит в инструкцию добавить несколько лишних предложений, и сколько вопросов сразу отпадет!
1 2 3 ... 7 8 »