All geek questions in one place

Add anchor tag to jQuery simple sidehow

I am using one of the snook.ca script for a simple slide show. Here it is in a nutshell:

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

Now I tried to make these images available when showing a slide show. So my markup will look something like this:

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

How to achieve this functionality without making the script complicated. Please note that <img/> tags are provided to me and I do not control it.

+4
source share
3 answers

When working with CrazyJugglerDrummer , try, you want to hide and then loop a s, not img s. Otherwise, you will look for next('img') where it does not exist.

update This seems to be a combination of CSS and js. Now I work like this:

 <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 must make sure that a block is displayed on your anchors and images, and that the absolute position is set at your anchor. You also need to specify :first-child so that the image does not disappear.

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"> <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>
+2
source

Do you want wrap images with anchor tags? Where do the anchors come from? Assuming you put them in 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 am I completely misunderstood the question? If you just need them to be clickable, you cannot just assign a click handler to each of them, that is:

 $("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]; }); });

Please note that the examples above assume that you have the same number of links, how you make the images, and that they are in the correct order.

+1
source

If you can edit HTML in 'fadein', change it to what you specified 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 <a> . Even if you only lost images while they are inside the <a> , a link will follow.

0
source

Source: https://habr.com/ru/post/1302932/

More articles:


All Articles