Creating a jQuery Slideshow – Adding Links to the Images

jQuery Slideshow | Programmers

Slideshow jQuery with LinksIn this post series we’re creating a jQuery Slideshow from scratch. In this post we’re simply using a few additional lines of code to add a link to the images.

Example: See jsFiddle at the bottom of this post. Note: The jsFiddle at the bottom of this post is a composite of all previous posts on this jQuery Slideshow.

jQuery Slideshow Tutorials

[list_category name=”jQuery Slideshow”]

Adding the Links in an Array

The first thing we need to do is add another array for the links:

links = ['http://google.com', 'http://hotmail.com', 'http://yahoo.com', 'http://kimjoyfox.com', 'http://kimjoyfox.com', 'http://kimjoyfox.com', 'http://kimjoyfox.com', 'http://kimjoyfox.com', 'http://kimjoyfox.com'];

Add this up at the top with the other arrays.

The HTML

While we could add the link using jQuery, to keep it simple, we’re just going to add it into the HTML.

<a href="" id="slideshowA"></a>

In the original code (in the jsFiddle at the bottom),  we surround only the image with link. You can of course change that, just by changing where you add the HTML code.

Initialize the Link

Back to the jQuery, on line 21, we’ll add the “href” attribute to the HTML link we created:

$('#slideshowA').attr('href', links[0]);

So we access the link’s attribute “href” and set it to the first item in the links array. Just so our code is nice and organized, make sure you add this line right after we add in the descriptions (line 20).

Change the Link

Finally, we’ll need to change the link when the image changes. When I set up the coding for this slideshow I put the most general/basic functions at the bottom, so scroll to the very bottom and find the “changeImage()” function.

On line 187, or right after we change the image source within that function, add in the following:

$('#slideshowA').attr('href', links[i]);

Remember our “i” variable gets passed to this function from other functions, so whatever array number the images array is on will also be the array number the links array will be on.

Summary

Why write concise organized code? So that adding an additional feature like this takes about 5 minutes.

Example:

 

 

Comments