Free Fading Banner Code

Category: Website Design & Development

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. Update your site and its done easy as that.

Make Your Own Website With BoldGrid
Click on any package below to find out more
BoldGrid Is All You Need To Create Your Own Website
Is Your Hosting Slow? Get Super Fast Hosting – No Downtime – CLICK HERE TO GET FAST RELIABLE HOSTING

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 hyper-linked, 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, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
      imagearray:  [     
      ["http://www.2createawebsites.com/wp-content/uploads/2016/07/image-1.jpg", "http://www.yourlinkhere.com", "_new"],    
      ["http://www.2createawebsites.com/wp-content/uploads/2016/07/image-2.jpg", "http://www.yourlinkhere.com", "_new"], 
      ["http://www.2createawebsites.com/wp-content/uploads/2016/07/image-3.jpg", "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: ""

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


If you need a website for your business contact me I have some great deals and discounts and will even help you.

Here are some websites that have used the fading banner code.


Tags: Free fading banner, free fading banner code, slideshow, HTML slide show code


Please Share