New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Advanced Gallery script

Author: Dynamic Drive

Description: This robust gallery script allows you to display and rotate entire blocks of HTML on demand. Display images, text, or rich HTML in a dynamic manner. Set the script to automatically cycle through the contents like in a scroller, or via manual selecting. Furthermore, we made inputting the contents a breeze- simply wrap desired blocks of HTML in a special <DIV> tag, and they are automatically added to the gallery. It doesn't get easier than this.

This script works in IE5+ and NS6+, degrading well with the rest. Lower end browsers will simply see all of the content at once.

Demo:

JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages.
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.


Directions: Developer's View

Step 1: Add the below code to the <HEAD> section of your page:

Select All

The only two parts you need to edit above is the style sheet (to control the content area's appearance), and also, a variable within the script (tickspeed).

Step 2: Insert the below HTML where you wish the gallery to appear:

Select All

Examine the code of Step 2 closely, as this is where you input your contents. As shown, wrap each HTML block within a special DIV tag:

<div class="gallerycontent" subject="What is JavaScript?">
1st content for gallery here
</div>

<div class="gallerycontent" subject="Java & JavaScript Differences">
2nd content for gallery here
</div>

Notice how the tag contains a "subject" attribute. Set this to the desired title for each content, in which the script will then display within the drop down menu at the bottom of the gallery. If you're lazy, removing this attribute will cause the script to display a generic title instead.

At the bottom of the code of Step 2, you'll also see the HTML for the drop down menu used to control the gallery. You may edit or even remove this code entirely depending on how you wish to use the gallery script. For example, if you do not need the "manual control" option, simply remove the entire drop down menu code. On the other hand, if you only wish to have a manual control gallery, remove the two radio buttons, and set variable "displaymode" within the code of Step 1 to "manual."

Enjoy! You'd be hard pressed to find a gallery script as robust and easy to work with as this one.