Free Fading Banner Code

Free Fading Banner. Are you looking for a banner maker? You don’t need to find one. You can make a free fading banner design with our free fading banner code. The fade in fade out banner above is what it will look like. All you have to do is change the images on our HTML fade in fade out banner code when you copy the code and paste it onto your site. You must also change the image size if the images are a different size, visitors can click on the image on the banner and it will open a new page, you can set the fading banner to open images on the same page just remove (_new).

Fade In Fade Out Image Javascript Code

Copy the fade in fade out image javascript code to your site. Use our image tools to optimize your images so they will be fast loading. Then upload the images you want to your site so they are now hosted. Take your image URL and replace it with the URL that is in the javascript code, also change the image size in the fade in fade out image javascript code to your image size. Replace our link with your link that you want to send your visitors to when they click on the image and that’s it. Update your site and its done easy as that.

Robust, Cross Browser Fade In Slideshow Script

This is a robust, cross browser fade in slideshow script that incorporates some of your most requested features all rolled into one. Each instance of a fade in slideshow on the page is completely independent of the other, with support for different features selectively enabled for each slideshow. Here’s a lowdown on the script’s features:

  • Sleek fade in effect that has the current image fading over the previous one.
  • Ability to display images automatically with fade in fade out effect.
  • Each slide can be optionally hyperlinked, open on new page or same page.
  • The fading banner code has persistence of last viewed slide supported.

The CSS Code below is used to control the fading banner HTML Code, you can use it to move the fading banner to the correct position on your site by changing top to move up or down and margin-left to move the fading banner left or right.

CSS – Copy The CSS Code Below To Move The Fade In Slideshow Script

 <style type="text/css">div#slideshow{left:20;position:absolute;top:0px;margin-left:0px;}</style>
 

HTML – Copy The Free Fading Banner Code Below

<div id="slideshow">
<div id="fadingbanner"></div></div>
<script type="text/javascript" src="http://www.linkbuildingservices4sites.com/resources/slide-show.js"></script> 
<script type="text/javascript">  
var mygallery=new fadeSlideShow({   
 wrapperid: "fadingbanner", //ID of blank DIV on page to house Slideshow   
 dimensions: [1080, 366], //width/height of gallery in pixels. Should reflect dimensions of largest image
      imagearray:  [     
      ["http://www.2createawebsites.com/wp-content/uploads/2013/11/slide1.png", "http://www.yourlinkhere.com", "_new"],    
      ["http://www.2createawebsites.com/wp-content/uploads/2013/11/slide2.png", "http://www.yourlinkhere.com", "_new"], 
      ["http://www.2createawebsites.com/wp-content/uploads/2013/11/slide3.png", "http://www.yourlinkhere.com", "_new"],
      ["http://www.2createawebsites.com/wp-content/uploads/2013/11/slide4.png", "http://www.yourlinkhere.com", "_new"],
      ["http://www.2createawebsites.com/wp-content/uploads/2013/11/slide5.png", "http://www.yourlinkhere.com", "_new"]// <-- no trailing comma after very last image element!   
      ],  
      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 Fading Banner Code


 
Step1: Copy the image slideshow code
Step2: Paste the slideshow code on to your site
Step3: Upload your images to your site or sever
Step:4 Replace our image URLs with yours
Step:5 Change the image size in the code
Step:6 Replace the hyper-links to links on your site
Step:7 Publish your site and watch how nice your new fading banner code works

Its easy to edit the fading banner code

fade-in-fade-out-image-slide-show-tutorials

create-your-website-in-3-easy-steps

Join Us On

G+ Facebook Twitter

Please Share

Email To A Friend

2 thoughts on “Free Fading Banner Code

  1. Hi, this fading banner code just really saved my life! Quick question though, can I get the background of the slideshow to be a different color? I cant make my images any wider and I don’t want there to be all that white space if I can help it. Thank you so much, I really appreciate it!

    1. Hi glad you like it. If you make the fading banner dimensions the same size as the images you will not have the extra background in white showing. Look for dimensions: [1080, 366], in the code and replace with the width and height of the images you have used.

Leave a Reply