Creating a jQuery Slideshow – Adding Links to the Images

June 3, 2013
Developers
LinkedInTwitterFacebookEmail
This post is part of a post series called jQuery Slideshow
  1. jQuery Slideshow - Options for Setup
  2. Creating a jQuery Slideshow From Scratch - Part 1
  3. Creating a jQuery Slideshow: Adding Arrow Navigation
  4. Creating a jQuery Slideshow - Styling with CSS
  5. Creating a jQuery Slideshow - Adding Descriptions
  6. Creating a jQuery Slideshow - CSS for Descriptions
  7. Creating a jQuery Slideshow - Setting up Thumbnails
  8. Creating a jQuery Slideshow - Clicking on Thumbnails
  9. Creating a jQuery Slideshow - Adding Thumbnail Navigation
  10. Creating a jQuery Slideshow - Adding Links to the Images

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

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:

 

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>