Делаем слайдшоу
Привет, сегодня мы будем делать очень красивое, эффектно и динамичное слайдшоу на jQuery.
Чтобы вы поняли, нужно Вам это или нет, сразу приведу живой пример.
Пример слайдшоу
Отлично выглядит, кроме того есть множество опций: изображения могут двигаться вертикально, можно сделать авто-прокрутку, можно изменить положение полосы описания или вовсе ее убрать.
Установка и настройка
Для работы этого слайдшоу нам потребуются jQuery, плагин к jQuery «Dhonishow» и немного картинок.
Сначало подключаем нужные библиотеки и стили к страничке.
<link rel="stylesheet" href="src/dhonishow.css" type="text/css" media="screen" />
<script src="lib/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="src/jquery.dhonishow.js" type="text/javascript"></script>Теперь создадим блок с картинками:
<div class="dhonishow">
<img src="img/rocker.jpg" alt="Rocker" />
<img src="img/rocker2.jpg" alt="Rocker 2" />
...
</div>Описания изображений берутся из их alt атрибута, так что не стоит им пренебригать.
Вы удивитесь, но на этом вся установка и закончится и вы получите полноценное слайдшоу :-).
Для настройки же, вы должны изменять class вашего блока с картинками, полную документацию вы найдете на сайте автора этого скрипта.
Клева. Спасибо.
Супер , по идее скоро понадобится))
Симпатично, jQuery рулит!
Прикольно, спасибо…
здорово. Даже не знаю поставить это или оставить ту галерею на флеше. Она тяжелее, но по-симпатичней все-тки
Навигация неудобна. По крайней мере мне, приыкшему к лайтбоксу )) Кнопочки совсем маленькие и «непопадабельные». =)
А в общем, как всегда благодарен за свежые идеи =)
Кнопочки легко меняются, вроде бы даже в архиве есть их исходники.
На страничке автора в назделе «Backstage» можно перетащить стрелки в центр – как на лайтбокс примерно, перетащить инфо и еще несколько штучек. После чего отгенерировать код (в опере не генерирует, а лиса норм)
Офигенски. Очень вовремя.
Вот только пара вопросов:
1. Размер слайдшоу, зависит от размера изображения, или от заданных настроек?
2. Может ли оно подстраиваться под вертикальные, горизонтальные фото???
1. От фото зависит, но и фиксированное сделать не сложно.
2. Не понял?
А вообще лучше сразу посмотреть документацию, не зря же ее авторы писали.
Приведенный пример отображает только вертикальные фото, а если фото горизонтальные. т.е. перевернуты на 90 градусов??
А какая разница как она повёрнута?
В зависимости от того как повернута, меняется ширина и высота. Но я посмотрел вроде все должно быть ок.
На самом деле я никогда не пользовался подобными вещами на jquery, поэтому, не совсем понятно, что куда надо прописывать, чтобы это работало.
Скачал архив с сайта, а дальше что делать, ума не приложу. Спасибо.
Попробуйте посмотреть исходный код моего примера, может быть поможет .
Хотя я, в принципе, описал как и что делать.
Большое спасибо за пример. На отдельной страничке все получилось, а вот что применительно к WordPress куда прописывать библиотеки и стили?
Спасибо.
Шикарно!
в опере заработало только после обновления странички, сначала картинки были клипнуты под размер одной строки текста, а текст был в одну строку.
пригодица спасибо)
Ну так же само, в хеадер вставляем библиотеки, в пост, к примеру, блок с картинками.
Я вам очень благодарна, мне понравилось
Сразу 2 очепятки: «изображения могу двигается».
Симпатично. Но лично для себя стараюсь не позиционировать jquery как средство, цели которого отличны от банального удобного получения объекта по классу, id или по другим параметрам. Как-то роднее обычный, «голый» Javascript.
В opere 9.52 не работает, вот скрин
P.S.
«Электропочта» что это за слово такое? типо «ПреВеД МедВед», «ГГ» ? o_O
Замечательный блог. Добавил ссылку в «».
Ух ты, клёва, спасибо (-:
НЕ РАБОТАЕТ В ОПЕРЕ!!! Поэтому не рекомендую ставить на свой сайт и называть «офигенно-опупенное слайдшоу, посмотрите здесь», когда оперчане откроют это они удивятя, ибо оно НЕ ПАШЕТ В ОПЕРЕ!!!
Ну мне жаль оперу, что тут скажешь. Слайдшоу не из той оперы.
Вадим, у Вас «Opera» бракованная, у меня все отлично работат.
нормально описано без зауми спасибо
Былобы здорово, если при нажатии на слайд, он раскрывался на весь экран.
Спасибо, качнул.
Осталось фоток собрать.
В моей опере тоже всё прекрасно работает. А вот в ИЕ6 – не отображаются стрелочки навигации. Это видимо из-за png-формата изображений. Кто знает как пофиксить это? Unit PNG Fix не помог..
НАРОД А НА IE6 – НЕПАШЕТ =((
Обратите внимание на такой феномен. В IE при смене слайда наблюдается появление хаотичных белых точек. Я где-то нарыл подобное слайд-шоу, там эти точки никуда не деваются. Помогите найти причины появления и устранить. Спасибо.
НАРОД А НА IE6 – НЕПАШЕТ =((
Подтверждаю!
Спасибо, скачал.
А оно может подгружать картинки не сразу?
Если картинок 200, а канал у посетителя медленный, то удобнее, не начинать показ следующего слайда, пока он не загрузится.
В IE6 не работает! И дело не в PNG. Поменял на GIF. Отредактировал CSS -
стрелки навигации не появились. В Firefoxe и в Operа все работает и на PNG и на GIFках. А жаль. Браузер до сих пор самый популярный.
Может кому-то удалось заставить работать под IE6? Просьба поделиться.
Или, если можно, ссылочку на что-нибудь внешне похожее, но работоспособное.
Получилось в IE6 методом тыка.
* html .dhonishow .dhonishow-previous-button {
background-image: none;
}
убрать в стилях эту хрень и стрелочки появятся, убрать надо и на левую и на правую кнопку.
нет ни слова об эфектах,
посмотрел на сайте (оригинале)
есть неплохие различные эфекты.
а нет галерея где можно два изображения открывать
скажем одно справа, другое слева?
прикольная всё таки это штука эта галерея, но вот никак не могу найти норм инстрекции как сделать слайд шоу на свой вкус:( мож кто поможет? ICQ 379584987
Киевская VIP- подыскивает жен депутатам
Wow, incredible blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your web site is excellent, as well as the content!. Thanks For Your article about Делаем Ñлайдшоу | Чернев.ру .
Wow, awesome blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your web site is magnificent, let alone the content!. Thanks For Your article about Делаем Ñлайдшоу | Чернев.ру .
Wow, fantastic blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your site is fantastic, as well as the content!. Thanks For Your article about Делаем Ñлайдшоу | Чернев.ру .
Really good information. Keep up the superb performance.
Sorry, but I debate with this blog post. I do delight in your particular blog however and will likely continue to keep moving in return for news.
This is the reverse Делаем Ñлайдшоу | Чернев.ру blog for anyone who wants to attempt out out most this topic. You observation so such its near exhausting to contend with you (not that I real would want…HaHa). You definitely put a new reel on a message thats been backhand nigh for eld. Fastidious object, just outstanding!
Hey. Actually want to leave a brief remark and inquire where you obtained your particular blogging theme I am creating own blog and truly appreciate your particular graphics.
I leave a response when I especially enjoy a post on a site or if I have something to add to the discussion. It is a result of the passion communicated in the post I read. And after this post Делаем Ñлайдшоу | Чернев.ру. I was excited enough to drop a commenta response ;-) I actually do have a couple of questions for you if you usually do not mind. Is it only me or do a few of these remarks come across as if they are left by brain dead visitors? :-P And, if you are writing on additional places, I’d like to keep up with anything fresh you have to post. Would you make a list all of all your communal sites like your twitter feed, Facebook page or linkedin profile?
Hi, it is understandable paragraph along with this YouTube video; I can’t believe that one can not understand this effortless post having with video presentation.