The following does not always work. If there are other instances of JS running on the public web page, there is a good chance that it will not work properly. That is the reason why the Smooth Gallery plugin gives the option to use iframes to fix the problem.

I couldn’t find any free or open source tools to make flash banners or JS rotating image banners. Everything I found had to be purchased, while the free versions were either limited to a specific image size or included a logo or link to promote the program’s website. All I really wanted to do was create (or fake) a flash banner in which each image would link to a different URL.

I knew about NextGEN Smooth Gallery, an excellent add-on plugin to the best Wordpress Image gallery, NextGen. I couldn’t get either plug-in to work the way I wanted. NextGen would link only to pages in the same Wordpress install and Smooth Gallery would only link to a full-size version of the image you clicked on.

So, I implemented Smooth Gallery on a page, published it, viewed it, then looked at the resulting page source code. Analyzing that, I figured out how to make each image in a NextGen Smooth Gallery slideshow link to a unique URL.

At the minimum, you need the following code:

<script type="text/javascript">
function startGallery_123() {
var myGallery = new gallery($("myGallery_123"), {
timed: true,
showCarousel: false,
showInfopane: false,
showArrows: false,
embedLinks: true,
slideInfoZoneOpacity: 0.80,
delay: 3000,
defaultTransition: "fade"
});
document.getElementById("myGallery_123").style.display = "block"; }
window.addEvent("domready", startGallery_123);
</script>
<div id="myGallery_123" style="display:none; width: 300px !important; height: 160px !important;">

<div class="imageElement">
<a target="_self" href="http://www.theURLyouwanttolinkto.com/" title="open" class="open" ></a>
<img src="http://image1.jpg" class="full" />
</div>

<div class="imageElement">
<a target="_self" href="http://anotherURLyouwanttolinkto.com/" title="open" class="open" ></a>
<img src="http://image2.jpg" class="full" />
</div>
</div>

Where,

• Gallery_123 (in blue) -  the numbers all need to be the same value.  In my example above I used 123.  The choice of number is irrelevant, but they all have to match
• 3000 (in red) – is how long you want each image to show in milliseconds before it transitions to the next image.  The higher the number, the longer each image shows
• 300px (in yellow) is the width of your images in pixels.  No space between the number and ‘px’
• 160px (in pink) is the height of your images.  No space between the number and ‘px’
• URLs to link to (in green) that you want each image to link to.  Complete URLs with the “http://”  It can be any image, whether it’s in a NextGEN  gallery or not
• title text (in orange) the tooltip text you want to appear when the image is hovered over
• Image URLs (in dark orange) the complete URL of each image, complete with the “http://” and the file extension
• you can repeat the divs with the link and image URLs as many times as you need, one time for every image you want to show

Some notes:

• You need both the NextGen Gallery and NextGEN Smooth plugins activated to get this to work
• Works best if all image are the same size.  If the image is too large, it will only show an incomplete image.  If it’s too small, the empty space will be filled in with a black background
• Works by putting the code in a widget or in your template files
• Errors can/will occur when you have other JS scripts running
• For SEO purposes, you can add a header, such as <h3></h3> tags with a title right before the link tag <a>
• You can also add alt text to each image e.g <img src=”http://image.gif” alt=”alt text”>
• Oh yeah, this is for Wordpress only!

Hope this can help you somehow – I know it’s helping me, I’m using it!

Feel free to ask questions or post comments below.