Главная » Файлы » Прочие скрипты » jQuery

Слайдер изображений с красивыми всплывающими подсказками на jQuery
23.06.14, 08:14:41

Скачать файл




Неплохой слайдер изображений с красивыми полупрозрачными настраиваемыми подсказками. Если вы разбираетесь в css, то запросто можете подстроить весь вид слайдера под себя!

Для начала посмотрите ДЕМО

Если демо вас устраивает - переходим к установке:

В head вставляйте:
Код
<style>#slider {  
width: 410px; /* important to be same as image width */  
height: 300px; /* important to be same as image height */  
position: relative; /* important */  
overflow: hidden; /* important */  
  }  

  #slider1, #slider2 {  
width: 720px; /* important to be same as image width */  
height: 300px; /* important to be same as image height */  
position: relative; /* important */  
overflow: hidden; /* important */  
  }  

  #sliderContent, #slider1Content, #slider2Content {  
width: 720px;  
position: absolute;  
top: 0;  
margin-left: 0;  
  }  
  .sliderImage, .slider1Image, .slider2Image {  
float: left;  
position: relative;  
display: none;  
  }  
  .sliderImage span {  
position: absolute;  
font: 10px/15px Arial, Helvetica, sans-serif;  
padding: 10px 13px;  
width: 384px;  
background-color: #000;  
filter: alpha(opacity=70);  
-moz-opacity: 0.7;  
-khtml-opacity: 0.7;  
opacity: 0.7;  
color: #fff;  
display: none;  
  }  

  .slider1Image span, .slider2Image span {  
position: absolute;  
font: 10px/15px Arial, Helvetica, sans-serif;  
padding: 10px 13px;  
width: 694px;  
background-color: #000;  
filter: alpha(opacity=70);  
-moz-opacity: 0.7;  
-khtml-opacity: 0.7;  
opacity: 0.7;  
color: #fff;  
display: none;  
  }  
  .clear {  
clear: both;  
  }  
  .sliderImage span strong, .slider1Image span strong, .slider2Image span strong {  
font-size: 14px;  
  }  
  .top {  
top: 0;  
left: 0;  
  height: 110px;  
  }  
  .bottom {  
bottom: 0;  
left: 0;  
  height: 110px;  
  }  
  .left {  
top: 0;  
left: 0;  
width: 110px !important;  
height: 280px;  
  }  
  .right {  
right: 0;  
bottom: 0;  
width: 110px !important;  
height: 290px;  
  }</style>


Далее после /head или после /body вставляйте следующий код:
Код
<script type="text/javascript" src="/js/s3Slider.js"></script>  
  <script type="text/javascript">
$(document).ready(function() {  
$('#slider').s3Slider({  
timeOut: 3000  
});  
$('#slider1').s3Slider({  
timeOut: 4000
});  
$('#slider2').s3Slider({  
timeOut: 5000
});  
});  
  </script>


Следующий код вставляйте в то место, где будет сам слайдер:
Код
<div id="slider">  
<ul id="sliderContent">  
<li class="sliderImage">  
<img src="Ссылка на картинку" />  
<span class="top">Описание картинки</span>  
</li>  
<li class="sliderImage">  
<img src="Ссылка на картинку" />  
<span class="bottom">Описание картинки</span>  
</li>  
<div class="clear sliderImage"></div>  
</ul>  
  </div>


Внимательно вчитайтесь в этот последний код и обратите внимание, что есть 4 позиции вывода описания картинок:

bottom - снизу
top - сверху
left - слева
right - справа

Всё, теперь лишь осталось залить скрипт из прикреплённого архива в папку js в вашем файловом менеджере и можно наслаждаться работой слайдера

Материал подготовил Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: всплывающими, подсказками, изображений, на, JQuery, красивыми, слайдер
Просмотров: 387 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: