Sunday March 26, 2017
Create Account

The S5 Image Fader v3 brings a nice new list of features to our old image fader module. The new version runs off of mootools and allows you to use an unlimited number of images to rotate through. You simply select a directory on your server to pull images from and the module will pull and display all the images from that directory! You can choose from fade in/out, zoom/pan and slide for the transition effects between images. We still included the legacy option running of S5 Effects if you need to run the older version of this module.



if

Tutorial:


1. First off you'll need to get your images uploaded to a directory on your server. In the admin of the module you'll need to put relative path to your images. For example if you have your images stored here: http://www.myserver.com/images/ then the relative path would just be "images" in the admin of the module.

2. Next is naming your images. The only part that matters for this module is that right before your image extension ( .jpg, .gif, .png) is that you include an "m" for main image. If you are using thumbnails you'll need to include "mt" for main thumbnail.

3. The next thing to note is that your images will be pulled no matter what you include before the "m" and "mt" so you could name them: testm.jpg and testmt.jpg for the first image and checkitm.jpg and checkitmt.jpg for the second image and the fader will pull them. This is ok if you don't need an ordering to your images but if you do then name them as follows:

0_0m.jpg
0_1m.jpg
0_2m.jpg

And so on for the first ten, now the next ten you must prefix with 1 so that all the next ten stay in the number 1 set. The first number depicts the set and the second number is the image in that set, for exmple:

1_0m.jpg
1_1m.jpg
1_2m.jpg



Image Fader Legacy Mode:


This version is powered by S5 Effects. This means you will not receive any conflicts with other javascript libraries your template, modules or components might be using. The image fader will rotate between 10 images. Choose either the fade in effect which fades each picture into the next one, or choose the fade in/fade out effect.
Fade in Mode:

  • 100% powered by S5 Effects (no script conflictions)
  • Specify height and width of images
  • Up to 10 images able to rotate at one time
  • Set background color
  • Set how fast the image fades (tween time)
  • Set how long the image displays before fading
  • Includes slide selector buttons



Fade in/Fade out Mode:

  • 100% powered by S5 Effects (no script conflictions)
  • Specify height and width of images
  • Up to 10 images able to rotate at one time
  • Set background color
  • Set how fast the image fades (tween time)
  • Set how long the image displays before fading
  • Enable or disable Mootools image reflections
  • Each image slide can have its own hyperlink

Visit Our Sponsor

S5 Box

Login to Downtown.LA

Registered users can publish images, videos, articles, comments and more. You also get your own blog page to keep track of what you publish.

Create Account

Click "CREATE AN ACCOUNT" below. It's free! Registered users can publish images, videos, articles, comments and more. You also get your own blog page to keep track of what you publish.