Image Scroller Script
Responsive scrolling animated images
Free scrolling news window with images script (example in sidebar on this page). Responsive mobile and tablet compatible standard IFrame code. Javascript creates the auto scrolling animation. This script works on all websites and templates, HTML 4.01, HTML5 and responsive design.
See Also…
See Also…
Example on this page
The scrolling window, show in the sidebar on this page, uses an HTML IFrame page embedded into your webpage with a Javascript to create the scrolling feature. Responsive for desktop, tablet, smartphones and other mobile devices.
Download script
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 (.zip)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.
Available options
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
Set speeds
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:
height: 205px;
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.
Link targets
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".
<base target="_parent">
Multiple scrollers
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.
Device compliance
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.
Related Topics
Free news scroller script
Static IFrames support
Javascript and RSS news feeds