Карусель картинок


Понравился мне один плагин, 3D Image Carousel. Он показывает набор картинок на страничке в виде карусели.

Например, у нас есть набор картинок, размещаем их на страничке в диве с id=”holder_images” ,и размещаем контейнер <div id="carousel"></div> для самой карусели!

<div id="carousel"></div>

<div id="holder_images">
<img class="link" title="to a web address" src="images/jquery_plugins.png" alt="jquery_plugins" width="500" height="375" longdesc="http://jquery.com/" />
<img title="sinatra" src="images/sinatra_beach_1.jpg" alt="sinatra_beach_1" width="500" height="375" />
<img title="sinatra" src="images/sinatra_beach_2.jpg" alt="sinatra_beach_2" width="500" height="375" />
<img title="sinatra src="images/sinatra_beach_3.jpg" alt="sinatra_beach_3" width="500" height="375" />
<img title="sinatra" src="images/sinatra_beach_4.jpg" alt="sinatra_beach_4" width="500" height="375" />
<img title="sinatra" src="images/sinatra_beach_5.jpg" alt="sinatra_beach_5" width="500" height="375" />
<img title="sinatra" src="images/sinatra_beach_6.jpg" alt="sinatra_beach_6" width="500" height="375" />
<img title="sinatra" src="images/sinatra_beach_7.jpg" alt="sinatra_beach_7" width="500" height="375" />
<img title="sinatra" src="images/sinatra_beach_8.jpg" alt="sinatra_beach_8" width="500" height="375" />
</div>

При нажатии на картинку открывается ее просмотр. Для перехода по ссылке при нажатии  достаточно к картинке дописать class="link" и longdesc=”http://jquery.com/” с адресом перехода, строка 04.

Подгружаем jQuery, сам плагин 3D Image Carousel и еще одну библиотеку Tween для работы с анимацией, цветами и т.д.

<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/Tween.js"></script>
<p class="MsoNormal"><script type="text/javascript" src="jquery/jquery.carousel3d.js"></script>

Делаем невидимым контейнер с картинками с помощью стиля

<style type="text/css" title="text/css">
#holder_images { display: none; }
</style>

Ну и прописываем скрипт, для каждого по своему… смотрим примеры!

Карусель с крайними полупрозрачными картинками:

untitled-1

Карусель с кнопками управления:untitled-2

Бесконечная карусель:

untitled-3

Управление мышкой:

untitled-3

Плоская карусель:

untitled-4

Карусель в перспективе:

untitled-5

Карусель с описанием при просмотре картинки:

untitled-6

Скачать все, одним архивом карусель картинок.

, , ,

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 9, в среднем: 4.33 из 5)
Loading ... Loading ...


  1. #1 Дмитррий - Февраль 22nd, 2010 at 12:31

    Клёвый у Вас сайт, примеры понятны и интересныю Побольше бы таких!

  2. #2 Splash55 - Март 29th, 2010 at 00:13

    Спасибо за интересную подборку.
    Можно ли регулировать скорость вращения карусели и почему не работает плоская карусель?

  3. #3 nice - Март 30th, 2010 at 23:06

    В этом вопросе вам не помогу, скрипт не мой а разбираться в нем, к сожалению нету времени.

    Немного позже напишу о еще одной удачной реализации карусели!

  4. #4 akuba - Июнь 21st, 2010 at 15:25

    а диз элементов можно изменять/настраивать?

  5. #5 dikey - Август 28th, 2010 at 00:54

    А может кто нибудь все эти библиотеки на замылить архивом ? а то что то то слить не получается
    заранее благодарен
    ausagnev#yandex.ru

  6. #6 nice - Август 28th, 2010 at 10:47

    Добавил архив для скачивания!

  7. #7 Buzzman - Сентябрь 23rd, 2010 at 13:40

    Ссылка из первого предложения ведет на закрытую страницу “ACCESS DENIED You are not authorized to access this page.”

    У меня есть пара вопросов:
    1. Как отключить управление мышью? Просто напросто чем дальше указатель от карусели тем быстрее она крутиться. Быстрее на столько, что аж тошнит.
    2. Настройки тоже какие то корявые. Я так понимаю позиция карусельки указывается абсолютно от левого верха страницы?

    Прошу помочь. Спасибо заранее.

  8. #8 Freem - Октябрь 19th, 2011 at 16:31

    ссылка не работает, может ли кто скинуть коды?

  9. #9 nice - Октябрь 25th, 2011 at 21:36

    прошу прощения, скоро починю…

  10. #10 has2277 - Март 13th, 2012 at 18:17

    долго искал подобные карусели, спасибо!

  11. #11 risze - Апрель 7th, 2012 at 17:47

    поставил на джумла сайт, отлично работает, только беда конфликтуют jQuery

  12. #12 Xarhont - Май 14th, 2012 at 16:24

    Помогите пожалуйста, как переместить карусель в верх?
    Мне надо расположить ее в шапку сайта.

  13. #13 tour - Октябрь 26th, 2012 at 14:18

    просто впишите код карусели в шапку сайта

  14. #14 Анна - Февраль 13th, 2013 at 16:14

    Класс, мне понравилась)

  15. #15 Денис - Апрель 22nd, 2013 at 23:31

    Поставил на сайт…пустое поле?? че делать??

  16. #16 Данэро - Июнь 18th, 2013 at 21:47

    воо, давно искал, то что нужно, только возник конфликт со скриптами шаблона, пришлось корректиовать

  17. #17 Кристина - Февраль 3rd, 2014 at 01:33

    Красивые карусельки, пустое поле может быть из за конфликта в скриптах

  18. #18 Киска - Июнь 26th, 2014 at 14:39

    чет поставила и у меня они законфликтовали с шаблоном

(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.