ansaurus

Question

Add anchor tag to simple jQuery sideshow

Answer 1

A:

If you can edit the HTML in 'fadein', change it to what you listed and it should work.

<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>

You select and fade the first child, which is now the <a>. Even if you faded in the just the images, as long as they're inside <a>s the link will be followed.

CrazyJugglerDrummer 2010-03-03 00:05:30

Yeah I have tried that but unfortunately it doesn't work!

Mazzi 2010-03-03 00:15:58

Answer 2

+1 A:

You want to wrap the images with anchor tags? Where do the anchors come from? Assuming you will be placing them within an array:

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);
});

or have I completely misunderstood the question? If you just need them to be clickable can't you just assign a click handler to each one, i.e.:

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

or:

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

Note that the above examples assume that you have the same number of links as you do images, and that they are in the correct order.

karim79 2010-03-03 00:14:48

You second example was closer to my solution. However for each image there is link url. How do I go with associating url links to each image? Perhaps an array?

Mazzi 2010-03-03 00:46:13

I've thrown in a third example to address your comment. I hope it is helpful.

karim79 2010-03-03 00:53:06

Answer 3

+2 A:

Working from CrazyJugglerDrummer's try, you'd want to hide and then cycle the as, not the imgs. Otherwise you'll be looking for next('img') where it doesn't exist.

update Seems like it's a mix of CSS and js. I have it working now, like so:

<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>

with 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; }

You have to make sure your anchors and images are displayed block, and that the absolute position is set on your anchor. Also you need to further specify the :first-child so as not to fade the image.

further update Using 1.3.2 jQuery and XHTML Strict. Works in FF, IE6 - 8, Safari, Chrome, and Opera.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<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>

D_N 2010-03-03 00:54:42

@DN: I have tried that as well and for some reason the script won't work as it should. Like the fade effect is gone. It only switch the first image, and after a while the image disappears.

Mazzi 2010-03-03 01:00:01

Updated. Working now for me. Let me know.

D_N 2010-03-03 01:24:19

@DN: Nice, however the fade effect is not working. At least not in firefox!

Mazzi 2010-03-03 01:30:13

@Mazzi That's what I'm testing in, and it was for me. It's rather quick, but it's there.

D_N 2010-03-03 01:33:17

You can edit how fast the fade goes by editing .fadeIn and .fadeOut to something like .fadeIn("slow") or .fadeIn(5000).

D_N 2010-03-03 01:35:53

For some reason it just doesn't like the effect! no matter what the parameter is!

Mazzi 2010-03-03 01:54:18

That's very odd. I would actually try closing down your browser and reopening it. I just tested in FF3, IE8, and Chrome, and it works everywhere. Also, if it's changing *at all*, the effect is actually working. This might also be a content issue--what your images look like could make an effect more or less visible.

D_N 2010-03-03 02:01:07

Nah, its still doesn't like it! Mine is basically identical to yours! The effect is not fast its just not there.. Here is mine:http://tinypaste.com/09504

Mazzi 2010-03-03 02:33:10

That works, too. The only way I've been able to reproduce any problem is when I accidentally removed the </script> tag. Then it's just dead. Incidentally, there should be no 'name' attribute in the images (usually only used for <a>s in HTML and <input>s in HTML and XHTML).

D_N 2010-03-03 03:31:29

Okay, so updated with the exact file as I have it. I can attest to it working, with effect, on every browser I have. I'd start looking at the differences between your full version and mine to sniff out any other problems. Possible issue: if you're running an HTML doctype instead of an XHTML one, you should nix the trailing slashes from the image tags.

D_N 2010-03-03 03:48:22

ansaurus

tags:

views:

answers:

Add anchor tag to simple jQuery sideshow

related questions