layingback › Demo of the "Featured Content" Slider

Demo of the "Featured Content" Slider

Featured Content Slider Final Version

A screen shot of the final version of the (future) Featured Content Slider is on the left, but you can test out a live version in the demo below. (Click read more to view.) This Slider was created by simply selecting a Photo Album, as previously, and using a brand new template. No changes to the Submit Article user interface at all. Now, instead of the Photo Album images appearing as separate images on the page as before, they appear in a single Slider. No formating or anything else special for the submitter to do!

Javascript required in order to display content

Please enable javascript in your browser

The Featured Content Scroller uses the most complex of Dynamic Drive's 3 options, the so called "markup" mode so that icons of the individual images can be used in place of numbers or text links. These are a lot of work to set up, especially for 30+ images!!! But of course Pro_News does all the heavy lifting for you.

The intermediate size Photo Gallery image is used as the large image display. The icons are the smallest Photo Gallery images further reduced to quarter size in the browser. So there is no image manipulation overhead.

In addition I've taught myself a little javascript and added a few extras. The full list of interactions now supported are listed below:

Images rotate into the large image automatically
A dark red border around an image icon indicates currently displayed image
Move the mouse over an icon image to bring it up immediately as the large image
Click on the large image, or on an image icon, to pop up the full sized image
Move mouse onto the large image to pause image rotation, releases when you move mouse back out
Click on Next / Previous buttons to move the large displayed image forward / backward one image
Mouse over the Next / Previous buttons to scroll the list of visible image icons right / left
Next / Previous buttons dim when list of visible image icons is fully right / left
Hold down Shift key when moving mouse over Next / Previous buttons to slide icons fully right / left.

Unfortunately to make it work this well, I did in the end need to make a few simple changes to the Pro_News code. So this FCS will not be available until the next release of Pro_News. But while I was in there I also increased the number of images supported - for this new index2fcs template at least - to 32.