How to make NextGEN Smooth Gallery link to any URL (or fake a flash banner)

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:

Gallery_123" style="display:none; width: 300px !important; height: 160px !important;">

https://www.theURLyouwanttolinkto.com/" title="open" class="open" >
https://image1.jpg" class="full" />

https://anotherURLyouwanttolinkto.com/" title="open" class="open" >
https://image2.jpg" class="full" />

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 “https://” 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 “https://” 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
tags with a title right before the link tag
You can also add alt text to each image e.g
Oh yeah, this is for WordPress only!