Добавить тег привязки к простому jQuery sideshow - PullRequest
Новая
       2

Добавить тег привязки к простому jQuery sideshow

4 голосов
/ 03 марта 2010

Я использую один из сценариев snook.ca для простого слайд-шоу. Вот в двух словах: 

<div class="fadein">
    <img src="banner1.jpg" width="645" height="307"/>
    <img src="banner2.jpg" width="645" height="307"/>
    <img src="banner3.jpg" width="645" height="307"/>
</div>
<script>
    $(function(){
        $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 4000);
});
</script>

Теперь я попытался сделать эти изображения кликабельными во время показа слайдов. Так что моя разметка будет примерно такой: 

<div class="fadein">
    <a href="yahoo.com"><img src="banner1.jpg" bwidth="645" height="307"/></a>
    <a href="google.com"><img src="banner2.jpg" width="645" height="307"/></a>
    <a href="live.com"><img src="banner3.jpg" width="645" height="307"/></a>
</div>

Как мне добиться этой функциональности, не делая скрипт слишком сложным. Обратите внимание , что мне предоставлены <img/> метки, и я не могу их контролировать.

Ответы [ 3 ]

2 голосов
/ 03 марта 2010

Работая с CrazyJugglerDrummer , попробуйте спрятать и затем циклически повторять a с, а не img с. В противном случае вы будете искать next('img') там, где его нет.

обновление Похоже, это смесь CSS и JS. У меня это работает сейчас, вот так: 

<div class="fadein">
  <a href="yahoo.com"><img src="banner1.jpg" width="645" height="307"/></a>
  <a href="google.com"><img src="banner2.jpg" width="645" height="307"/></a>
  <a href="live.com"><img src="banner3.jpg" width="645" height="307"/></a>
</div>
<script>
$(function(){
    $('.fadein a:gt(0)').hide();
setInterval(function(){$('.fadein a:first-child').fadeOut().next('a').fadeIn().end().appendTo('.fadein');}, 4000);
});
</script>

с CSS 

.fadein { position:relative; width:645px; height:307px; }
.fadein a { position:absolute; left:0; top:0; display:block; text-decoration:none; }
img { border:0; display:block; }

Вы должны убедиться, что ваши якоря и изображения отображаются блоком, и что на вашем якоре установлена ​​абсолютная позиция. Также вам необходимо дополнительно указать :first-child, чтобы не выцветать изображение.

дальнейшее обновление Использование 1.3.2 jQuery и XHTML Strict. Работает в FF, IE6 - 8, Safari, Chrome и Opera. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
  .fadein { position:relative; width:645px; height:307px; }
  .fadein a { position:absolute; left:0; top:0; display:block; text-decoration:none; }
  img { border:0; display:block; }
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
  $('.fadein a:gt(0)').hide();
  setInterval(function(){$('.fadein a:first-child').fadeOut().next('a').fadeIn().end().appendTo('.fadein');}, 4000);
});
</script>
</head>
<body>
  <div class="fadein">
    <a href="yahoo.com"><img src="banner1.jpg" width="645" height="307" alt="1" /></a>
    <a href="google.com"><img src="banner2.jpg" width="645" height="307" alt="2" /></a>
    <a href="live.com"><img src="banner3.jpg" width="645" height="307" alt="3" /></a>
  </div>
</body>
</html>
1 голос
/ 03 марта 2010

Вы хотите обернуть изображения с тегами привязки? Откуда берутся якоря? Предполагая, что вы будете помещать их в массив: 

var link = ['www.example.com', 'www.example.net'];
$("div.fadein > img").each(function(i) {
    var $anchor = $("<a></a>").attr("href", link[i]); // or $(this).attr("src") depending on what you mean
    $(this).wrap($anchor);
});

или я совершенно не понял вопроса? Если вам нужно, чтобы они были кликабельными, вы не можете просто назначить обработчик кликов для каждого из них, т. Е .:

$("div.fadein > img").click(function() {
   window.location.href = $(this).attr("src"); // assuming the href is the images source
});

или 

var link = ['www.example.com', 'www.example.net'];
$("div.fadein > img").each(function(i) {
    $(this).click(function() {
        window.location.href = link[i];
    });
});

Обратите внимание, что в приведенных выше примерах предполагается, что у вас такое же количество ссылок, как и у изображений, и что они находятся в правильном порядке.

0 голосов
/ 03 марта 2010

Если вы можете редактировать HTML в 'fadein', измените его на то, что вы перечислили, и он должен работать. 

<div class="fadein">
    <a href="yahoo.com"><img src="banner1.jpg" bwidth="645" height="307"/></a>
    <a href="google.com"><img src="banner2.jpg" width="645" height="307"/></a>
    <a href="live.com"><img src="banner3.jpg" width="645" height="307"/></a>
</div>
<script>
    $(function(){
        $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 4000);
});
</script>

Вы выбираете и исчезаете первый ребенок, который теперь является <a>. Даже если вы добавили только изображения, пока они находятся внутри <a> s, ссылка будет следовать.

...