Online JavaScript Thumbnail Scroller



Create your own scroller

Use this form to quickly create your own Javascript Thumbnail Scroller without writing a single line of code. Click the "details" link to get more information about each piece of information needed. Or if you prefer to work with the code yourself you can view some of our examples to get started.

Instructions:

  1. 1) Complete the required information fields in the follwing form.
  2. 2) Save or copy this javascript to the same directory as your webpage.
  3. 3) Paste the "Final Code" into your webpage and save it.
  4. 4) If all image and script paths are correct you should now have your own free javascript/html thumbnail image scroller.
Thumbnail Image Path:
(details)
Full Image Path:
(details)
Thumbnail Alt Text:
(details)
Thumbnail Description:
(details)

Current Thumbnails: (details)

 


Thumbnail Image Scroller Help Section

REQUIRED: Thumbnail Image Path

(Description)
This field is for the URL to the thumbnail image you wish to add to the scroller. Ideally this would be a smaller image you wish to display so the user can click to view the full sized image.

(Example)
http://www.thumbnailscroller.com/images/imagescrollerone/flower_1_thmb.jpg

(Notes)
Preview will only work with fully qualified url's. You may use relative paths like /images/flower_1_thmb.jpg but be aware that the preview will only show you broken images. Once the code is on the page, on your server where the images are available, the code will function.

OPTIONAL: Full Size Image Path

(Description)
This field is for the URL to the full sized image that will be displayed when the user clicks on the associated thumbnail image.

(Example)
http://www.thumbnailscroller.com/images/imagescrollerone/flower_1_full.jpg

(Notes)
Preview will only work with fully qualified url's. You may use relative paths like /images/flower_1_thmb.jpg but be aware that the preview will only show you broken images. Once the code is on the page, on your server where the images are available, the code will function.

OPTIONAL: Thumbnail Alt Text

(Description)
This field is for the text that is displayed when the user hovers the mouse cursor over the thumbnail image.

(Example)
Click to view a larger image of this thumbnail.

(Notes)
This text is used as the "title" text for the anchor tag wrapped around the thumbnail image. For SEO purposes this text should be a couple sentences of text with details about the image the user is viewing.

OPTIONAL: Thumbnail Description

(Description)
This is a larger amount of text describing the image the user is viewing. This text will be placed in a <div> tag that can be formatted and place on the page. This text may contain HTML markup.

(Example)
Image One
This is a photograph of a blue widget from somewhere. Taken in 1803, this is the oldest know blue widget.

(Notes)
This text/html is inserted into a <div> for display on the page.

REQUIRED: Current Thumbnails

(Description)
This is a list of the current thumbnail images you have added to your scroller.

(Example)
n/a

(Notes)
You can add/remove the thumbnails for your scroller.

REQUIRED: Horizontal Scroller Layout

(Description)
This option allows you to choose whether you want the images displayed in a horizontal layout. (side by side)

(Example)
n/a

(Notes)
n/a

REQUIRED: Vertical Scroller Layout

(Description)
This option allows you to choose whether you want the images displayed in a vertical layout. (one on top of the other)

(Example)
n/a

(Notes)
n/a

REQUIRED: Clickable Thumbnails

(Description)
This option sets whether the thumbnail images are clickable. This should be enabled if you plan to display a larger image, HTML page or execute a JavaScript function when the user clicks on a thumbnail image.

(Example)
n/a

(Notes)
This option should only be used if you entered information for the description field for each of the thumbnail images you added to your scroller.

REQUIRED: Open Full Image in new window

(Description)
This option sets whether the Full Image Path is opened in a new browser window or the existing one.

(Example)
n/a

(Notes)
This will open the Full Image, HTML page url or JavaScript function in the existing or a new browser window.

REQUIRED: Use HREF link border

(Description)
This option enables the blue 2 pixel border that is default with an HREF. Uncheck this box if you do not want the blue link border around your thumbnails.

(Example)
n/a

(Notes)
n/a

REQUIRED: Counter DIV ID

(Description)
This field contains the UNIQUE ID of the div you want to place the thumbnail Counter. This field is used to display the (current thumbnail/total thumbnail) count.

(Example)
divScrollerOneDescription

(Notes)
This must be a UNIQUE ID. No other object on the page should have this ID value. This will provide script access to the scroller counter <div> element on the DOM.

REQUIRED: Description DIV ID

(Description)
This field contains the UNIQUE ID of the div you want to place each thumbnails description html/text. This field is used with the "Thumbnail Description" option for each thumbnail added to the scroller.

(Example)
divScrollerOneDescription

(Notes)
This must be a UNIQUE ID. No other object on the page should have this ID value. This will provide script access to the thumbnail description <div> element of the image scroller on the DOM.

REQUIRED: Next Image Text

(Description)
This field contains the text the user can click to scroll to the next thumbnail in the series. You can either use this text or you can use an image.

(Example)
Next >>

(Notes)
n/a

REQUIRED: Next Image Path

(Description)
This field contains the URL to the image the user will click to scroll to the next image in the series.

(Example)
n/a

(Notes)
Preview will only work with fully qualified url's. You may also use the pre-loaded images provided.

REQUIRED: Choose an Image

(Description)
This will allow you to select a default image for the button the user will click to scroll to the next image in the series.

(Example)
n/a

(Notes)
Using this option will prepopulate the "Next Image Path" field and disable the "Next Thumbnail Text" field.

REQUIRED: Back Image Text

(Description)
This field contains the text the user can click to scroll back one thumbnail image in the series. You can either use this text or you can use an image.

(Example)
<< Back

(Notes)
n/a

REQUIRED: Back Image Path

(Description)
This field contains the URL to the image the user will click to scroll to the preivous image in the series.

(Example)
n/a

(Notes)
Preview will only work with fully qualified url's. You may also use the pre-loaded images provided.

REQUIRED: Choose an Image

(Description)
This will allow you to select a default image for the button the user will click to scroll to the previous image in the series.

(Example)
n/a

(Notes)
Using this option will prepopulate the "Back Image Path" field and disable the "Back Thumbnail Text" field.

REQUIRED: Thumbnails Shown

(Description)
This field allows you to choose how many thumbnail images are displayed at any one given time.

(Example)
3

(Notes)
This field will not allow you to show more images than you have loaded. This number should be less than the number of images added to the scroller else the buttons for next and back will have no functionality.

REQUIRED: Scroll Amount

(Description)
This is the number of pixels the scroller will move the strip of thumbnails, delayed by the "Scroll Delay" value.

(Example)
n/a

(Notes)
7 pixels is the default value.

REQUIRED: Scroll Delay

(Description)
This is the delay between scolling the image strip based on the "Scroll Amount" value.

(Example)
n/a

(Notes)
3 is the default value. 1 through 10 are allowable values.NOTE_TEXT

REQUIRED: Thumbnail Width

(Description)
This is the width that all thumbnails will be displayed in the image scroller.

(Example)
80

(Notes)
This value should be a numeric value representing the width of the thumbnails in pixels.

REQUIRED: Thumbnail Height

(Description)
This is the height that all thumbnails will be displayed in the image scroller.

(Example)
80

(Notes)
This value should be a numeric value representing the height of the thumbnails in pixels.

REQUIRED: Thumbnail Padding

(Description)
This is the amount of padding placed around each thumbnail in the scroller.

(Example)
3

(Notes)
This value should be a numeric value representing the padding of the thumbnails in pixels.

REQUIRED: Final Code

(Description)
This field contains the final code that should be pasted into your web page to display your new thumbnail scroller.

(Example)
n/a

(Notes)
This code may be modified once it has been generated. The supporting files must be copied to the same directory as the web page that contains the scroller or you must update the generated code to point to the location they are located.