Auto Rotating Ad Banner, No iFrame, No Meta Refresh and It’s Free: Part 2

Back in September 2009 I wrote a guide to creating an auto rotating ad banner that uses JavaScript to switch the ads or images or any other content without pages needing to be refreshed by visitors. It has come to my attention that that solution no longer works in Google Chrome and it has problems displaying multiple ad banners in one page simultaneously. So, here is an update.

Here is another image & content slider script from Dynamic Drive that can also be used to display ads within pages…. with a little bit of CSS and HTML editing.

Using The Ad Rotation Script

Create a directory in your site’s root server space called “ad-slider“.

Download the following two files from DynamicDrive:

Place those two files in the ad-slider directory.

Now create a file called adslider.css in the ad-slider directory.

At this point your site directory listing should look similar to:

  • example.com/ad-slider/
  • example.com/ad-slider/contentslider.js
  • example.com/ad-slider/loading.gif
  • example.com/ad-slider/adslider.css

Put the following CSS into the file adslider.css:

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
width: 400px; /*width of featured content slider*/
height: 317px;
}

.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
background: white;
width: 390px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.pagination{
display: none;
}

The only difference between the above CSS and the CSS found in the original CSS found at Dynamic Drive is that the class .pagination has been set to display:none and other CSS related to the class .pagination has been removed.

Now you need to reference the files contentslider.js, loading.gif and adslider.css in your webpage. Do this by placing the following metatags between the page’s <head></head> tags (the copyright notice included here is obligatory):

<link rel="stylesheet" type="text/css" href="adslider.css" />
<script type="text/javascript" src="contentslider.js">

/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

In the body section of your page (that means anywhere between the <body> and </body> tags), put the following code wherever you need the first ads to display:

   <div id="slider1" class="sliderwrapper">

	<div class="contentdiv">
	<a href="">
		<img src="images/image1.jpg" >
	</a>
	</div>

	<div class="contentdiv">
	<a href="">
		<img src="images/image2.jpg" >
	</a>
	</div>

	<div class="contentdiv">
	<a href="">
		<img src="images/image3.jpg" >
	</a>
	</div>

    </div>

    <div id="paginate-slider1" class="pagination">

    </div>

    <script type="text/javascript">

	featuredcontentslider.init({
		id: "slider1",  //id of main slider DIV
		contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
		toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
		nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
		revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
		enablefade: [true, 0.2],  //[true/false, fadedegree]
		autorotate: [true, 3000],  //[true/false, pausetime]
		onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
			//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
			//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
		}
	})

    </script>

The above code rotates through three linked images i.e 1 for each of three separate ads. Each ad is enclosed within a div block that looks like this:

	<div class="contentdiv">
	<a href="">
		<img src="images/image1.jpg" >
	</a>
	</div>

You can have as many slides as you want. Just add another block of the above HTML markup for each additional ad.

To add a link to each slide, change the line <a href=””> to reflect the link e.g <a href=”https://journalxtra.com”>.

Create a directory called images under the ad-slider directory. Put into this directory all the images you want to display in the adslider. Then change the line <img src=”images/image1.jpg” > to reflect the name of the image e.g <img src=”images/your-image.jpg” >. My preference is to further filter the images into their own folders per separate adslider.

To add another ad slider, use the same block of code as shown several lines above here but change the following 3 sections to rename the code block with a new slider instance number (assuming slider number 2):

Change

<div id="slider1" class="sliderwrapper">

To

<div id="slider2" class="sliderwrapper">

Change

<div id="paginate-slider1" class="pagination">

To

<div id="paginate-slider2" class="pagination">

Change

id: "slider1",  //id of main slider DIV

To

id: "slider2",  //id of main slider DIV

Notice that the only item changed is the slider number.

Auto Rotating Ad Slider Options

All options for changing the ad rotation speed and ad fade in/out time are contained with the <script> block within the HTML page that displays the ads:

    <script type="text/javascript">

	featuredcontentslider.init({
		id: "slider1",  //id of main slider DIV
		contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
		toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
		nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
		revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
		enablefade: [true, 0.2],  //[true/false, fadedegree]
		autorotate: [true, 3000],  //[true/false, pausetime]
		onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
			//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
			//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
		}
	})

    </script>

You can style the layout of the ads by editing the CSS file.

Example Code For 2 Ad Sliders in One Page

The following page shows two sliders in one page. Copy it into a page called adslider.html then open it in your browser to see the ads rotate independently and automatically.

<html>
<head>
    <title>Rotating Ad Banner</title>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<link rel="stylesheet" type="text/css" href="adslider.css" />
<script type="text/javascript" src="contentslider.js">

/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

</head>
<body>

<h2>Example 1</h2>

<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->

    <div id="slider1" class="sliderwrapper">

	<div class="contentdiv">
	<img src="images/image1.jpg" style="width: 390px;margin-left:auto;margin-right:auto;";>
	</div>

	<div class="contentdiv">
	<img src="images/image2.jpg" style="width: 390px;margin-left:auto;margin-right:auto;";>
	</div>

	<div class="contentdiv">
	<img src="images/image3.jpg" style="width: 390px;margin-left:auto;margin-right:auto;";>
	</div>

    </div>

    <div id="paginate-slider1" class="pagination">

    </div>

    <script type="text/javascript">

	featuredcontentslider.init({
		id: "slider1",  //id of main slider DIV
		contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
		toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
		nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
		revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
		enablefade: [true, 0.2],  //[true/false, fadedegree]
		autorotate: [true, 3000],  //[true/false, pausetime]
		onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
			//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
			//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
		}
	})

    </script>

<h2>Example 2</h2>

<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->

    <div id="slider2" class="sliderwrapper">

	<div class="contentdiv">
	<img src="images2/image1.jpg" style="width: 390px;margin-left:auto;margin-right:auto;";>
	</div>

	<div class="contentdiv">
	<img src="images2/image2.jpg" style="width: 390px;margin-left:auto;margin-right:auto;";>
	</div>

	<div class="contentdiv">
	<img src="images2/image3.jpg" style="width: 390px;margin-left:auto;margin-right:auto;";>
	</div>

    </div>

    <div id="paginate-slider2" class="pagination">

    </div>

    <script type="text/javascript">

	featuredcontentslider.init({
		id: "slider2",  //id of main slider DIV
		contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
		toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
		nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
		revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
		enablefade: [true, 0.2],  //[true/false, fadedegree]
		autorotate: [true, 3000],  //[true/false, pausetime]
		onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
			//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
			//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
		}
	})

    </script>

</body>
</html>

Putting it into WordPress

Use the plugin Per Posts Scripts and Styles to add the Javascript, CSS and loading gif into a single page where the ad sliders are to be displayed or use the plugin header-footer to include the files into all pages. Another option is to use the Shortcode Exec PHP plugin to add the necessary scripts as a shortcode for use anywhere within your site.

I am available for hire if you need help including this ad auto rotator script in your WordPress site.

Example of the Script in Action

Click Here!

Sharing is caring!

Support our work. Donate a few dollars to JournalXtra.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
wpdiscuz   wpDiscuz
1
0
Would love your thoughts, please comment.x
()
x