How To Make A Slideshow Fade In Fade Out With Hyperlinks

UPDATED: JULY 18, 2016 – ARTICLE: HOW TO MAKE A SLIDESHOW FADE IN FADE OUT WITH HYPERLINKS

Category: Web Design & Development

To make a slideshow with hyperlinks is a nice way to get visitors to visit other pages on your site. Use our HTML slideshow with hyperlinks to display products you are selling on your eCommerce website or may be you just want a nice photo slideshow and when visitors click the photo it opens a larger photo. To make a slideshow with our html slideshow code is easy. You don’t need to use a slideshow maker or download slideshow software.

All you do is copy the javascript slideshow code and replace the image links and hyperlinks with your stuff. Full tutorials on how to make a slideshow below.

4 Steps To Make A Slideshow With Hyperlinks:

Step1. Copy the below code and paste it on your site.
Step2. Update or publish your site. The fade in fade out image slide show will be working.
Step3. Replace the images and hyperlinks in the code on your site with your stuff.
Step4. Up date your site and your image slideshow with hyperlinks is live on the web.

Demo

HTML Slideshow Code

<script type="text/javascript" src="http://www.linkbuildingservices4sites.com/resources/slide-show.js"></script>   

<div id="imageslideshow1"></div> 
<script type="text/javascript">  
var mygallery=new fadeSlideShow({   
 wrapperid: "imageslideshow1", //ID of blank DIV on page to house Slideshow   
 dimensions: [750, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image (www.2createawebsites.com)
   imagearray:  [     
   ["http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-1.jpg", "http://www.youlink.com", "_new"],           
   ["http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-2.jpg", "http://www.youlink.com", "_new"],       
   ["http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-3.jpg", "http://www.youlink.com", "_new"],       
   ["http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-4.jpg", "http://www.youlink.com", "_new"],       
   ["http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-5.jpg", "http://www.youlink.com", "_new"]      
   ],
  displaymode: {type:'auto', pause:1000, cycles:0, wraparound:false},   
  persist: false, //remember last viewed slide and recall within same session?   
  fadeduration: 2000, //transition duration (milliseconds)  
  descreveal: "ondemand",
  togglerid: ""
  })
 </script>  

How To Edit The Slideshow Code:

The images on this slideshow are hyperlinked, the link is set to open in a new page. If you would like the image to open on the same page remove (_new) from the code.

Open in new window code:

[“http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-1.jpg”, “http://www.youlink.com”, “_new”],

Open in same window code:

[“http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-1.jpg”, “http://www.youlink.com”, “”],

To add your images to the slide show go back to the image slide show code on you site

Update the image slideshow code with your images and your hyperlinks by replacing them in the code, below is the part of the code to look for.

We have 5 images replace whats in yellow
[“http://www.linkbuildingservices4sites.com/resources/create-a-slideshow-1.jpg“, “http://www.youlink.com“, “_new”],

Remember to compress images for faster loading when you make your own website.

If you change the image size on the HTML slideshow you must also edit the size in the slideshow HTML code look for dimensions: [750, 500] and change it to the same size as the images or photos you have used.

CSS

The Below Code Will Make The Slideshow Responsive.

 <style type="text/css">
@media (max-width: 1069px) {
  #imageslideshow1 {
  max-width: 100%;
  max-height:100%; 
  }
div#imageslideshow1 img {
 margin: 0 !important;
 }
  }

@media (max-width: 999px) {
 #imageslideshow1 {
  max-width: 100%;
  max-height:100%; 
  }
div#imageslideshow1 img {
 margin: 0 !important;
 }
}

@media (max-width: 767px) {
 #imageslideshow1 {
  max-width: 100%;
  max-height:100%;
 }
div#imageslideshow1 img {
 margin: 0 !important;
 }
}

(max-width: 643px) {
#imageslideshow1 {
  max-width: 100%;
  max-height:100%; 
 }
div#imageslideshow1 img {
 margin: 0 !important;
 }
}
</style>

If you want to make a slideshow with hyperlinks then try our slideshow code.

Tags: how to create a slideshow with hyperlinks, make a slideshow, slideshow with hyperlinks, slideshow HTML code, image slide show
ARTICLE: HOW TO MAKE A SLIDESHOW FADE IN FADE OUT WITH HYPERLINKS WAS FIRST PUBLISHED: DECEMBER 06, 2013