Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Последние темы
» Виджет "Ключевые слова"
автор Lory Сегодня в 18:27

» Прошу проверить мой форум
автор Leyxen Сегодня в 16:15

» Дыра между кнопками
автор Lory Сегодня в 7:36

» Убрать слово "цитата" - 2
автор Aster Сегодня в 0:29

» Генератор подарков
автор irina27 Вчера в 16:30

» Можно ли сократить растояние
автор Lory Вчера в 11:01

» Проблемы с цветом шрифта.
автор Lory Вчера в 8:45

» Убрать значок
автор Леший Чт 17 Авг - 12:15

» Свечение для группы а не для юзера
автор Kuzbas63 Чт 17 Авг - 9:01

» Оформить имя
автор Kuzbas63 Чт 17 Авг - 8:59

Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

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

Предыдущая тема Следующая тема Перейти вниз

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

Сообщение автор Домовой в Сб 1 Окт - 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>

ДЕМО
avatar
Домовой
 

Мужчина

Сообщения : 6805
Возраст : 93
Регистрация : 2010-01-30
Благодарности : 3232

Без предупреждений

Вернуться к началу Перейти вниз

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

Сообщение автор Домовой в Сб 1 Окт - 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 страничку.

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


Последний раз редактировалось: Домовой (Пт 7 Фев - 9:43), всего редактировалось 1 раз(а)
avatar
Домовой
 

Мужчина

Сообщения : 6805
Возраст : 93
Регистрация : 2010-01-30
Благодарности : 3232

Без предупреждений

Вернуться к началу Перейти вниз

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

Сообщение автор Домовой в Сб 1 Окт - 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 страничку

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

ДЕМО


Последний раз редактировалось: Домовой (Пт 7 Фев - 9:53), всего редактировалось 1 раз(а)
avatar
Домовой
 

Мужчина

Сообщения : 6805
Возраст : 93
Регистрация : 2010-01-30
Благодарности : 3232

Без предупреждений

Вернуться к началу Перейти вниз

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

Сообщение автор Домовой в Сб 1 Окт - 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>
ДЕМО


Последний раз редактировалось: Домовой (Пт 7 Фев - 9:56), всего редактировалось 1 раз(а)
avatar
Домовой
 

Мужчина

Сообщения : 6805
Возраст : 93
Регистрация : 2010-01-30
Благодарности : 3232

Без предупреждений

Вернуться к началу Перейти вниз

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

Сообщение автор Домовой в Сб 3 Ноя - 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>
Обязательные условия:
Все картинки должны быть одинакового размера

ДЕМО



Кнопки других цветов

           

           
avatar
Домовой
 

Мужчина

Сообщения : 6805
Возраст : 93
Регистрация : 2010-01-30
Благодарности : 3232

Без предупреждений

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения