A few weeks after I posted How to make NextGEN Smooth Gallery link to any URL (or fake a flash banner) I discovered the WP-Cycle plugin.

It’s a great plugin, much easier to use than hacking NextGen Smooth, and I wish I had found it sooner. It is way simpler for getting each image in a rotating slideshow to point to a different URL.

How I implemented it (note: this is for version 0.1.5 of the plug-in) :
(Blog title, URLs, and links blurred out in the image for client security)

1. After installing the plugin, you will find the WP-Cycle settings as a sub-menu under the Plugins menu in the admin area of WordPress.
2. First thing to do is to upload the images you want to appear in the slidehow, browse for and upload your images. There is currently no method to add an image from the WordPress Library or to use an image without importing it, hopefully that will change in a future release. Also, it is better if all your images are the same size.
3. After uploading an image, you can enter the URL you want each image to link to. This is the strength and the best part of WP-Cycle – you can link to any URL. Be sure to include the “http://” and to click on “Update”.
4. Select your settings. These are all up to your preferences. For Image Dimensions it is best if you enter the exact same size as that of the images you are planning to use. Don’t forget to “Save Settings”.

To display the rotating banner, use the shortcode to display it in a post or page or use PHP to show them where ever you please in your themes files.

The short code is:

[wp_cycle]

The php is:

<?php wp_cycle(); ?>

The plugin says that you can set the DIV ID that will be used for the banner and thus be able to style it whatever way you want through CSS. I wasn’t able to do this successfully. I wanted to add a margin to the banner, so I surrounded it in another DIV with a class.

The complete code I added to the theme was:

<div class="banner">
<?php wp_cycle(); ?>
</div>

In the style sheet I added (of course you can add whatever you want, depending on the styling you want):

.banner {
margin-left:11px;
}

And there you have it. A simple rotating banner using any size of images that links to any URL for WordPress for free without using Flash or a paid program.

Please feel free to ask questions or leave comments.

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.