Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» совет админамавтор лексей2222 Сентябрь 24th 2024, 05:54
» Пропали иконки редактирования - HEEELP
автор Archaea Сентябрь 23rd 2024, 18:11
» [решено]Редактирвоание темы
автор лексей2222 Сентябрь 23rd 2024, 17:37
» Как загружать ролики и мультики по ссылкам напрямую
автор лексей2222 Сентябрь 14th 2024, 19:22
» Интернет адрес форума
автор Mierena Сентябрь 7th 2024, 15:24
» некоторые форумы долго загружаются
автор Raumt Сентябрь 6th 2024, 15:06
» На форуме Пропали кнопки модерации тем
автор лексей2222 Август 16th 2024, 22:36
» Проблема с метатегом Description
автор VeraLV Июнь 14th 2024, 17:06
» [решено] Исчезли картинки кнопок
автор VeraLV Май 26th 2024, 13:04
» Как убрать подпись о редактировании записи
автор Фея Май 9th 2024, 21:11
Карусель картинок (фотогалерея) [все версии форума]
Страница 1 из 1
Карусель картинок (фотогалерея) [все версии форума]
Уже не один раз пользователи спрашивали скрипт карусели картинок.
Вот выкладываю несколько вариантов галерей картинок (Карусель)
Вариант №1
Выглядит это примерно так:
ДЕМО
То же самое но не много в другом виде и с описанием картинок.
ДЕМО
Вот выкладываю несколько вариантов галерей картинок (Карусель)
Вариант №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>
Выглядит это примерно так:
ДЕМО
То же самое но не много в другом виде и с описанием картинок.
- Код:
<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>
ДЕМО
Домовой-
-
Сообщения : 6801
Возраст : 100
Регистрация : 2010-01-30
Благодарности : 3243
Re: Карусель картинок (фотогалерея) [все версии форума]
Вариант №2
Лично мне он больше нравится))
Небольшие настройки. Думаю сами разберётесь в них методом тыка))))
Ставить можно в приветствие, в виджет на портал и в HTML страничку.
Посмотреть работу галереи можно здесь:
ДЕМО
Лично мне он больше нравится))
Небольшие настройки. Думаю сами разберётесь в них методом тыка))))
- Код:
<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 страничку.
Посмотреть работу галереи можно здесь:
ДЕМО
Последний раз редактировалось: Домовой (Февраль 7th 2014, 09:43), всего редактировалось 1 раз(а)
Домовой-
-
Сообщения : 6801
Возраст : 100
Регистрация : 2010-01-30
Благодарности : 3243
Re: Карусель картинок (фотогалерея) [все версии форума]
Вариант №3
Не большая настройка размера поля
Ставить можно в приветствие, в виджет портала и в HTML страничку
Посмотреть работу галереи можно здесь:
ДЕМО
Не большая настройка размера поля
- Код:
<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 страничку
Посмотреть работу галереи можно здесь:
ДЕМО
Последний раз редактировалось: Домовой (Февраль 7th 2014, 09:53), всего редактировалось 1 раз(а)
Домовой-
-
Сообщения : 6801
Возраст : 100
Регистрация : 2010-01-30
Благодарности : 3243
Re: Карусель картинок (фотогалерея) [все версии форума]
Вариант №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>
Последний раз редактировалось: Домовой (Февраль 7th 2014, 09:56), всего редактировалось 1 раз(а)
Домовой-
-
Сообщения : 6801
Возраст : 100
Регистрация : 2010-01-30
Благодарности : 3243
Re: Карусель картинок (фотогалерея) [все версии форума]
Вариант №5
Ставить в приветствие или в html страничку
Скрипты для работы слайдера
Все картинки должны быть одинакового размера
ДЕМО
Кнопки других цветов
Ставить в приветствие или в 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>
- Код:
<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>
Все картинки должны быть одинакового размера
ДЕМО
Кнопки других цветов
Домовой-
-
Сообщения : 6801
Возраст : 100
Регистрация : 2010-01-30
Благодарности : 3243
Похожие темы
» Новое в мобильной версии : загрузка картинок, описание форума, статистика и кто сейчас на форуме
» Карусель картинок
» [решено]Карусель картинок
» Карусель картинок
» [решено]Карусель картинок
» Карусель картинок
» [решено]Карусель картинок
» Карусель картинок
» [решено]Карусель картинок
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения