Image Scroller Script
Responsive scrolling animated images
Example on this page
creates the auto scrolling animation. This script works on all websites and templates, HTML 4.01, HTML5 and responsive design
for desktop, tablet, smartphones and other mobile devices.
Click below to download the scrolling images add-on as shown in the sidebar example. Includes all files and examples. See the help page in the download for setup instructions and options.
Download Image Scroller Files
How is this different from the news scroller?
The simple image and news scroller
add-ons are the same other then the names of the files and the height of the scrolling window IFrame.
See the help page included with the script download. Editable options include:
- Window size
- Window scroll speed
- Fonts and backgrounds
- Borders and colors
- Use your own images
You can edit the "image_scroll.html" to change speeds and the starting pause time. The variables with notes are near the bottom of the "image_scroll.html" included in the download.
Scrolling window height
If you change the height of the auto scrolling image IFrame window, edit the height in 2 places. The "frameheight" variable in the "image_scroll.html" and also edit the height in the "image_scroll.css".
In the "image_scroll.html" edit:
var frameheight = 205;
In the "image_scroll.css" edit:
These 2 sizes need to match so the text and images re-scroll from the bottom of the window. If you make the var frameheight = 2;
the page will pop back in place after each scroll completes. See next section for details.
Restart or re-scroll again option
To have the scroller reload at the top for the second time through instead of scrolling from the bottom, in the "image_scroll.html" change the "frameheight" to "2" and change the "nextdelay" to "1" or "2". Do not change the height in the css file in this case.
The "image_scroll.html" uses the following HTML tag to make all links link to the top level page outside of the IFrame. You can optionally use target="_blank" on the links to open a new browser window. See target link support
The following tag is in the <head> section of the "image_scroll.html".
You can add as many scrollers to your webpages as you need. Follow these steps:
- Make a copy of the "image_scroll.html". Name it "image_scroll-2.html".
- Use the IFrame code as shown on the help page included the download. Edit that code with "image_scroll-2.html" and paste it into your HTML page.
- Edit the new "image_scroll-2.html" with your 2nd scroller images and text.
This script has been tested in all browsers, IE, Safari, Google Chrome, Firefox and Opera and also iPhone and iPad and was compatible with all devices. If you encounter problems in other browsers or devices, please contact us
to let us know.
Free news scroller script
Static IFrames support