Карусель картинок (фотогалерея) [все версии форума]

автор Домовой Октябрь 1st 2011, 22:22

Уже не один раз пользователи спрашивали скрипт карусели картинок.
Вот выкладываю несколько вариантов галерей картинок (Карусель)

Вариант №1

Код:: <style> #carousel { height:280px !important; /*высота поля*/ width:900px !important; /*ширинв поля*/ background-color:transparent !important; /*фон поля*/ } #carousel-left { position:absolute; bottom:20px !important; /*положение левой кнопки прокрутки от низа*/ left:150px !important; /*положение левой кнопки прокрутки от левого края*/ cursor:pointer; } #carousel-right { position:absolute; bottom:20px !important; /*положение правой кнопки прокрутки от низа*/ right:150px !important; /*положение правой кнопки прокрутки от правого края*/ cursor:pointer; } #carousel .blipsContainer .blip { background-color:#DDD !important; /*фон № не активной картинки картинки */ color:#0000FF !important; } #carousel .blipsContainer .blipSelected { background-color:#0000FF !important; /*фон № активной картинки картинки */ color:#FFF !important; } </style> <link rel="stylesheet" href="http://www.patmax.eu/CSS1/120404172732.css" charset="utf-8" /> <script type="text/javascript" src="http://www.patmax.eu/J1/120404173128.js"></script> <script src="http://www.patmax.eu/J1/120404173357.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#carousel").featureCarousel({ }); }); </script>

Контейнер галереи, его наполняем картинками:

Код:: <div id="carousel-container"> <div id="carousel"> <div class="carousel-feature"> <img class="carousel-image" alt="Описание" title="Описание" src="ссылка на картинку"> </div> <div class="carousel-feature"> <img class="carousel-image" alt="Описание" title="Описание" src="ссылка на картинку"> </div> <div class="carousel-feature"> <img class="carousel-image" alt="Описание" title="Описание" src="ссылка на картинку"> </div> <div class="carousel-feature"> <img class="carousel-image" alt="Описание" title="Описание" src="ссылка на картинку"> </div> <div class="carousel-feature"> <img class="carousel-image" alt="Описание" title="Описание" src="ссылка на картинку"> </div> </div> <div id="carousel-left"><img src="http://www.iconbazaar.com/arrows/arrw07_16a.gif" /></div> <div id="carousel-right"><img src="http://www.iconbazaar.com/arrows/arrw07_06a.gif" /></div> </div>

Ставить нужно всё вместе в приветствие, HTML страничку или в виджет портала

Выглядит это примерно так:

ДЕМО

То же самое но не много в другом виде и с описанием картинок.

Код:: <center> <link rel="stylesheet" href="http://www.patmax.eu/CSS1/120404172732.css" charset="utf-8" /> <script type="text/javascript" src="http://www.patmax.eu/J1/120404173128.js"></script> <script src="http://www.patmax.eu/J1/120404173357.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#carousel").featureCarousel({ }); }); </script><div id="carousel-container"> <div id="carousel"> <div class="carousel-feature"> <a href="#"><img class="carousel-image" alt="Image Caption" src="http://www.snapsnap.ru/i/1ftf.jpg"></a> <div class="carousel-caption"> <p> Описание к первой картинке </p> </div> </div> <div class="carousel-feature"> <a href="#"><img class="carousel-image" alt="Image Caption" src="http://www.snapsnap.ru/i/2gsg.jpg"></a> <div class="carousel-caption"> <p> Описание ко второй картинке. </p> </div> </div> <div class="carousel-feature"> <a href="#"><img class="carousel-image" alt="Image Caption" src="http://www.snapsnap.ru/i/3tyt.jpg"></a> <div class="carousel-caption"> <p> Описание к третьей картинке </p> </div> </div> <div class="carousel-feature"> <a href="#"><img class="carousel-image" alt="Image Caption" src="http://www.snapsnap.ru/i/4ddd.jpg"></a> <div class="carousel-caption"> <p> Описание к четвёртой картинке </p> </div> </div> <div class="carousel-feature"> <a href="#"><img class="carousel-image" alt="Image Caption" src="http://www.snapsnap.ru/i/5flf.jpg"></a> <div class="carousel-caption"> <p> Описание к пятой картинке </p> </div> </div> </div> <div id="carousel-left"><img src="http://savepic.su/85959.gif" /></div> <div id="carousel-right"><img src="http://savepic.su/100295.gif" /></div> </div> </center>

ДЕМО

автор Домовой Октябрь 1st 2011, 22:26

Вариант №2

Лично мне он больше нравится))

Небольшие настройки. Думаю сами разберётесь в них методом тыка))))

Код:: <style> .roundabout-holder{ padding: 10px; height: 10em; width: 90%; margin: 0 auto; } .roundabout-moveable-item { height:200px; width:151px; cursor:pointer; background:transparent; border:1px solid #999; border:1px solid #999; overflow:hidden; } .roundabout-in-focus{ cursor:auto; } .example .show{ height:200px; width:850px; margin-top:0px; padding-top:50px; overflow:hidden; } </style>

Код:: <script type="text/javascript" src="http://www.patmax.eu/J1/120404174338.js"></script> <script type="text/javascript" src="http://www.patmax.eu/J1/120404174539.js"></script> <script type="text/javascript" src="http://www.patmax.eu/J1/120404174847.js"></script>

Это сам контейнер галереи. Заполняете своими картинками.

Код:: <center> <div class="example"> <div class="show"> <ul id="example-tearDrop"> <li><a href="#" target="_blank"><img class="carousel-image" alt="Описание картинки" title="Описание картинки" src="http://savepic.su/130264.png"/></a></li> <li><a href="#" target="_blank"><img class="carousel-image" alt="Описание картинки" title="Описание картинки" src="http://savepic.su/130264.png"/></a></li> <li><a href="#" target="_blank"><img class="carousel-image" alt="Описание картинки" title="Описание картинки" src="http://savepic.su/130264.png"/></a></li> <li><a href="#" target="_blank"><img class="carousel-image" alt="Описание картинки" title="Описание картинки" src="http://savepic.su/130264.png"/></a></li> <li><a href="#" target="_blank"><img class="carousel-image" alt="Описание картинки" title="Описание картинки" src="http://savepic.su/130264.png"/></a></li> <li><a href="#" target="_blank"><img class="carousel-image" alt="Описание картинки" title="Описание картинки" src="http://savepic.su/130264.png"/></a></li> <li><a href="#" target="_blank"><img class="carousel-image" alt="Описание картинки" title="Описание картинки" src="http://savepic.su/130264.png"/></a></li> <li><a href="#" target="_blank"><img class="carousel-image" alt="Описание картинки" title="Описание картинки" src="http://savepic.su/130264.png"/></a></li> </ul> </div> </div> <script> jQuery(document).ready(function() { jQuery('#example-tearDrop').roundabout({ shape: 'tearDrop' }); }); </script> </center>

Картинки можно добавлять вставляя очередную строчку

Код:: <li><img class="carousel-image" alt="Описание картинки" title="Описание картинки" src="ссылка на картинку"></li>

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

Посмотреть работу галереи можно здесь:
ДЕМО

автор Домовой Октябрь 1st 2011, 22:29

Вариант №3

Не большая настройка размера поля

Код:: <style> #phoneCarousel{ height:220px !important; margin:20px auto 20px !important; position:relative; width:900px; } </style>

Код:: <link rel="stylesheet" type="text/css" href="http://www.patmax.eu/CSS1/120404175540.css" /> <div id="phoneCarousel"> <div class="previous arrow"></div> <div class="next arrow"></div> <div id="stage"> <img class="carousel-image" alt="Описание" title="Описание" src="http://savepic.su/130264.png"/> <img class="carousel-image" alt="Описание" title="Описание" src="http://savepic.su/130264.png"/> <img class="carousel-image" alt="Описание" title="Описание" src="http://savepic.su/130264.png"/> <img class="carousel-image" alt="Описание" title="Описание" src="http://savepic.su/130264.png"> <img class="carousel-image" alt="Описание" title="Описание" src="http://savepic.su/130264.png"/> </div> </div> <script type="text/javascript" src="http://www.patmax.eu/J1/120404175349.js"></script>

Ставить можно в приветствие, в виджет портала и в HTML страничку

Посмотреть работу галереи можно здесь:

ДЕМО

автор Домовой Октябрь 1st 2011, 22:37

Вариант №4

Код:: <center> <link type="text/css" rel="stylesheet" media="all" href="http://www.patmax.eu/CSS1/120404180003.css" /> <script type="text/javascript" src="http://www.patmax.eu/J1/120404173128.js"></script> <script type="text/javascript" src="http://www.patmax.eu/J1/120404180258.js"></script> <script type="text/javascript"> jQueryjqNew = jQuery.noConflict(true); jQueryjqNew(document).ready(function () { jQueryjqNew("#waterwheel-carousel-default").waterwheelCarousel(); }); </script> <div id="waterwheel-carousel-default"> <div class="carousel-controls"> <div class="carousel-prev"> <a href="#">⇒ Назад</a> </div> <div class="carousel-next"> <a href="#">⇐ Вперёд</a> </div> </div> <div class="carousel-images"> <img alt="Test Image 1" src="http://www.snapsnap.ru/i/3tyt.jpg" /> <img alt="Test Image 2" src="http://www.snapsnap.ru/i/4ddd.jpg" /> <img alt="Test Image 3" src="http://www.snapsnap.ru/i/5flf.jpg" /> <img alt="Test Image 4" src="http://www.snapsnap.ru/i/4ddd.jpg" /> <img alt="Test Image 5" src="http://www.snapsnap.ru/i/3tyt.jpg" /> <img alt="Test Image 6" src="http://www.snapsnap.ru/i/4ddd.jpg" /> <img alt="Test Image 7" src="http://www.snapsnap.ru/i/5flf.jpg" /> <img alt="Test Image 8" src="http://www.snapsnap.ru/i/3tyt.jpg" /> <img alt="Test Image 9" src="http://www.snapsnap.ru/i/4ddd.jpg" /> </div> </div> </center>

ДЕМО

автор Домовой Ноябрь 3rd 2012, 12:26

Вариант №5

Ставить в приветствие или в html страничку

Скрипты для работы слайдера

Код:: <script type="text/javascript" src="http://yourjavascript.com/21139232152/bxslider.min.js"></script> <script type="text/javascript" src="http://yourjavascript.com/11225442391/common.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('#slider1').bxSlider({ auto: true, // true, false - автоматическая смена слайдов speed: 600, // целое число - в милисекундах, скорость смены слайдов pause: 6000, // целое число - в милисекундах, период между сменами слайдов }); }); </script>

Блок слайдера с картинками

Код:: <div id="slider_cont"> <div id="slider1"> <div><img src="http://ссылка на картинку"/></div> <div><img src="http://ссылка на картинку"/></div> <div><img src="http://ссылка на картинку"/></div> <div><img src="http://ссылка на картинку"/></div> <div><img src="http://ссылка на картинку"/></div> <div><img src="http://ссылка на картинку"/></div> </div> </div>

Картинок можно ставить сколько угодно, просто добавляйте строчку

Код:: <div><img src="http://ссылка на картинку"/></div>

CSS коды для настройки слайдера

Код:: <style> /* оформление и размер блока */ #slider_cont { background-color:#FFF; border:2px solid #006699; margin:5px; width:670px!important; padding:1px; } /* кнопка следующее изображение */ .bx-prev { position:absolute; top:45%; left:1px; width:31px; height:31px; text-indent:-999999px; background:url(http://i40.servimg.com/u/f40/14/80/95/87/gray_p10.png) no-repeat 0 -30px; } /* кнопка предыдущее изображение */ .bx-next { position:absolute; top:45%; right:1px; width:31px; height:31px; text-indent:-999999px; background:url(http://i40.servimg.com/u/f40/14/80/95/87/gray_n10.png) no-repeat 0 -30px; } /* для кнопок при наведении курсора */ .bx-next:hover,.bx-prev:hover { background-position:0 0; border:0; } </style>