Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.11.2015, 22:22
Новичок на форуме
Отправить личное сообщение для DoubleDigit Посмотреть профиль Найти все сообщения от DoubleDigit
 
Регистрация: 11.11.2015
Сообщений: 9

Слайд(картинки)
Здравствуйте, возможно ли в слайде картинки сделать кликабельными для ссылок на другие страницы либо ссайты?
Ответить с цитированием
  #2 (permalink)  
Старый 11.11.2015, 22:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,059

DoubleDigit,
да
Ответить с цитированием
  #3 (permalink)  
Старый 11.11.2015, 23:35
Новичок на форуме
Отправить личное сообщение для DoubleDigit Посмотреть профиль Найти все сообщения от DoubleDigit
 
Регистрация: 11.11.2015
Сообщений: 9

Посмотрите пожалуйста
есть блок и стили.
<div id="slide"> 
<div class="slider"> 
<ul class="items"> 
<li><img src="images/pila-1.jpg" alt=""><div class="banner"><p class="extra-wrap"><strong>Экшн-игра по мотивам фильма Пила</strong><span>Испытайте на себе роль героев фильма в реальности!</span></p><a href="#">Подробнее</a></div></li> 
<li><img src="images/pila-2.jpg" alt=""><div class="banner"><p class="extra-wrap"><strong>Новая игра - Пила 2</strong><span>Еще страшнее, еще больше адреналина и ужаса!</span></p><a href="#">Подробнее</a></div></li> 
</ul> 
</div> 
<div class="banner"><p class="extra-wrap"><strong>Испытайте на себе роль</strong><span>героев фильма в реальности!</span></p><a href="#">Read More</a></div> 
<a href="#" class="prev"></a><a href="#" class="next"></a> 
</div>

==============================================
Опции.
==============================================
<script> 
$(document).ready(function(){ 
$('.slider')._TMS({ 
show:0, 
pauseOnHover:false, 
prevBu:'.prev', 
nextBu:'.next', 
playBu:false, 
duration:10000, 
preset:'zoomer', 
pagination:true, 
pagNums:false, 
slideshow:7000, 
numStatus:false, 
banners:'fade', 
waitBannerAnimation:false, 
progressBar:false 
}) 
}); 
</script>

==============================================
Стили
==============================================
#slide { position:relative; width:1264px; height:585px; margin:0 auto; padding:0px 0px 0 0px; z-index:2; background:#000; overflow:hidden;}
.slider {width:1280px; height:465px; margin:0 auto; position:relative; z-index:2; overflow:visible !important; }

==============================================
Скрипт
==============================================
Вложения:
Тип файла: txt tms-0.4.1 - копия.txt (37.2 Кб, 2 просмотров)

Последний раз редактировалось DoubleDigit, 12.11.2015 в 02:05. Причина: Дописал стили если кому пригодится слайдер.
Ответить с цитированием
  #4 (permalink)  
Старый 12.11.2015, 00:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,059

DoubleDigit,
слайдер слишком старый ...
Ответить с цитированием
  #5 (permalink)  
Старый 12.11.2015, 01:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,059

DoubleDigit,
найдите строку
_.pic.css({backgroundImage:'url('+_.next+')'});

после неё добавьте строки, изменив массив ссылок по которым нужен переход -- равный числу картинок
_.pic.off().click(
                 function() {
                    var link = ['http://javascript.ru/forum/','http://www.yandex.ru/'][_.n];
                   if(link) window.location.href = link
                 }
               );
Ответить с цитированием
  #6 (permalink)  
Старый 12.11.2015, 01:59
Новичок на форуме
Отправить личное сообщение для DoubleDigit Посмотреть профиль Найти все сообщения от DoubleDigit
 
Регистрация: 11.11.2015
Сообщений: 9

Супер, вы Мастер. Спасибо! Если можно, подправьте чуть тему Слайд(привязка ссылки для картинок)

Последний раз редактировалось DoubleDigit, 12.11.2015 в 02:15.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск