How To Create JavaScript Image Slideshow With Links

If you want to place links on the images or captions of the image slideshow using JavaScript codes, you can do it by creating a new array of links along with the array of images and captions and adding some codes on ‘swap’ function to rotate links with the image and caption rotation in the slideshow. Here you will get step by step guide for creating JavaScript image slideshow with links, you can use these codes on your website or blog to create the attractive slideshows.

Table of Contents

Creating Slideshow with Links on Images

Let’s start creating image slideshow with links on images using JavaScript. For this, you have to create an array of lists of images. The images listed here will appear on the slideshow one by one. You can write the scripts like the following.

var i = 0; 
var image = new Array();   
// LIST OF IMAGES 
image[0] = "image-1.png"; 
image[1] = "image-2.png"; 
image[2] = "image-3.png";   
var k = image.length-1;

Now, you have to create a new array for the list of captions. The captions will appear just below the images. You can write the scripts like the following to create a new array of the captions.

var caption = new Array(); 
// LIST OF CAPTIONS 
caption[0] = "Caption for the first image"; 
caption[1] = "Caption for the second image"; 
caption[2] = "Caption for the third image";

Lastly, you have to create a new array for the list of links similar to the array of images and captions. You can write the scripts like the following to create a new array of links.

var link= new Array();   
// LIST OF LINKS 
link[0] = "link for the first image"; 
link[1] = "link for the second image"; 
link[2] = "link for the third image";

Now, you have to create the function for swapping images for slideshow. You can write the scripts like the following to create the function for swapping images

function swapImage(){ 
var el = document.getElementById("mydiv"); 
el.innerHTML=caption[i]; 
var img = document.getElementById("slide"); 
img.src= image[i]; 
var a = document.getElementById("link"); 
a.href= link[i]; 

if(i < k ) { i++;}  
else  { i = 0; } 
setTimeout("swapImage()",5000); 
} 
function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
} else  { 
window.onload = function() { 
if (oldonload) { 
oldonload(); 
} 
func(); 
} 
} 
} 
addLoadEvent(function() { 
swapImage(); 
});

Here is the full source code for creating image slideshow with links on images using JavaScript. You may just copy and paste the code below where you want to place slideshow and change the location of the images.

<script type="text/javascript"> 
var i = 0; 
var image = new Array();   
// LIST OF IMAGES 
image[0] = "/wp-content/uploads/2014/02/detect-visitors-browser-370x305.png"; 
image[1] = "/wp-content/uploads/2017/11/php-variables-370x305.png"; 
image[2] = "/wp-content/uploads/2014/11/image2-370x305.jpg";   
var k = image.length-1;    

var caption = new Array(); 
// LIST OF CAPTIONS 
caption[0] = "How to Detect Visitor’s Browser Using JavaScript"; 
caption[1] = "How To Use Different PHP Variables"; 
caption[2] = "Add Multiple Slideshows on One Page Using Javascript"; 

var link= new Array();   
// LIST OF LINKS 
link[0] = "/2014/02/detecting-visitors-browser-using-javascript.html"; 
link[1] = "/different-php-variables/"; 
link[2] = "/2014/11/multiple-slideshows-on-one-page-javascrip.html";   

function swapImage(){ 
var el = document.getElementById("mydiv"); 
el.innerHTML=caption[i]; 
var img = document.getElementById("slide"); 
img.src= image[i]; 
var a = document.getElementById("link"); 
a.href= link[i]; 

if(i < k ) { i++;}  
else  { i = 0; } 
setTimeout("swapImage()",5000); 
} 
function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
} else  { 
window.onload = function() { 
if (oldonload) { 
oldonload(); 
} 
func(); 
} 
} 
} 
addLoadEvent(function() { 
swapImage(); 
});  
</script> 
<table style="border:none;background-color:transparent;"> 
<tr> 
<td align="center"> 
<a name="link" id="link" href="https://siteforinfotech.com/" target="_blank"><img name="slide" id="slide" alt 

="my images" height="370" width="570" src="image-1.png"/></a> 
</td> 
</tr> 
<tr> 
<td align="center"style="font:small-caps bold 15px georgia; color:blue;"> 
<div aligh="center" id ="mydiv"></div>
</td> 
</tr>  
</table>

Preview:

Following is the image slideshow created using the script given above.

Creating Slideshow with Links on Caption

Similar to the image slideshow created above. You can also create links on captions instead of creating a link on images. Here all of the parts of the code will be the same except some changes on the HTML part. You have to change just the following codes to achieve this.

<table style="border:none;background-color:transparent;"> 
<tr> 
<td> 
<img name="slide" id="slide" alt ="my images" height="370" width="570" src="image-1.png"/>
</td> 
</tr> 
<tr> 
<td align="center"style="font:small-caps bold 15px georgia; color:blue;"> 
<a name="link" id="link" href="#" target="_blank"><div id="mydiv"></div></a>
</td> 
</tr>  
</table>

Please follow and like us: