You can present image galleries using a horizontal image slider, just like Andjelka.

Horizontal Image Slider on Andjelka.com

Horizontal Image Slider on Andjelka.com

To use this (new) plugin:

  • Go to Dashboard, Plugins and activate the Horizontal Image Scroller
  • Prepare your images as your normally would, using a consistent height
  • Create a new page and set the Page Template to Splash
  • Add the images using Add an Image
  • Instead of using the WordPress gallery insert facility, just save your images and return to your page
  • Insert the horizontal image scroller display shortcode – see below

This is how the shortcode works
[horizontal-image-scroller size=large scrollbarHeight=13 dragMinWidth=144 dragMaxWidth=144]

Scroll Button Height and Width: at the bottom of the image panel a scrollbar is displayed with a scroll button in it – you may want to have a nice large scroll button to make it easy for your visitors to grab the scroll button and scroll across. You can change the height of the scrollbar and button that is displayed by increasing the value of the scrollbarHeight (in the example above it is 13), and change the width of the scroll button itself (the button used to scroll across) by changing the dragMaxWidth value.

Image Sizing: there are two image heights that matter. The first is the height of the full size image – that is, the one you prepare and upload. The second is the height of the Large image that is automatically created by WordPress when you upload images. You control the maximum height of the Large images using Dashboard, Settings, Media. The plugin will automatically display the Large image in the scroller, and when you click the image the Full Size image will display.

Shutter Reloaded: If you activate the Shutter Reloaded plugin, when you click the Large image in the scroller, the Full Sized image will be displayed in the centre of the screen with the surroundings greyed out.

Image Title: If you set an image Title, it won’t be displayed in the image slider, however it will be displayed under the Full Sized image if you use the Shutter Reloaded plugin.

Advanced CSS techniques to format the slider bar

You can use Dashboard, Appearance, Custom CSS to create custom rules to format the slider bar.

If you want to change the colour of the slider or use a custom image for the slider, create a .gif file, upload using Dashboard, Media, Add New and add a Custom CSS rule like this:
.jScrollPaneDrag { background-color:#13A7B5; background-image:url("/files/scrollbar.gif"); background-repeat:no-repeat; }

To change the colour of the background for the slider panel (ie. the full width slider panel that the slider button sits within), add a Custom CSS rule like this:
.jScrollPaneTrack { background-color:#222; }