Dynamic Drive- Advanced Gallery script

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:

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

Select All
<style type="text/css"> .gallerycontroller{ width: 250px } .gallerycontent{ width: 250px; height: 200px; border: 1px solid black; background-color: #DFDFFF; padding: 3px; display: block; } </style> <script type="text/javascript"> /*********************************************** * Advanced Gallery script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Please keep this notice intact * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ var tickspeed=3000 //ticker speed in miliseconds (2000=2 seconds) var displaymode="auto" //displaymode ("auto" or "manual"). No need to modify as form at the bottom will control it, unless you wish to remove form. if (document.getElementById){ document.write('<style type="text/css">\n') document.write('.gallerycontent{display:none;}\n') document.write('</style>\n') } var selectedDiv=0 var totalDivs=0 function getElementbyClass(classname){ partscollect=new Array() var inc=0 var alltags=document.all? document.all.tags("DIV") : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++){ if (alltags[i].className==classname) partscollect[inc++]=alltags[i] } } function contractall(){ var inc=0 while (partscollect[inc]){ partscollect[inc].style.display="none" inc++ } } function expandone(){ var selectedDivObj=partscollect[selectedDiv] contractall() selectedDivObj.style.display="block" if (document.gallerycontrol) temp.options[selectedDiv].selected=true selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0 if (displaymode=="auto") autocontrolvar=setTimeout("expandone()",tickspeed) } function populatemenu(){ temp=document.gallerycontrol.menu for (m=temp.options.length-1;m>0;m--) temp.options[m]=null for (i=0;i<totalDivs;i++){ var thesubject=partscollect[i].getAttribute("subject") thesubject=(thesubject=="" || thesubject==null)? "HTML Content "+(i+1) : thesubject temp.options[i]=new Option(thesubject,"") } temp.options[0].selected=true } function manualcontrol(menuobj){ if (displaymode=="manual"){ selectedDiv=menuobj expandone() } } function preparemode(themode){ displaymode=themode if (typeof autocontrolvar!="undefined") clearTimeout(autocontrolvar) if (themode=="auto"){ document.gallerycontrol.menu.disabled=true autocontrolvar=setTimeout("expandone()",tickspeed) } else document.gallerycontrol.menu.disabled=false } function startgallery(){ if (document.getElementById("controldiv")) //if it exists document.getElementById("controldiv").style.display="block" getElementbyClass("gallerycontent") totalDivs=partscollect.length if (document.gallerycontrol){ populatemenu() if (document.gallerycontrol.mode){ for (i=0; i<document.gallerycontrol.mode.length; i++){ if (document.gallerycontrol.mode[i].checked) displaymode=document.gallerycontrol.mode[i].value } } } if (displaymode=="auto" && document.gallerycontrol) document.gallerycontrol.menu.disabled=true expandone() } if (window.addEventListener) window.addEventListener("load", startgallery, false) else if (window.attachEvent) window.attachEvent("onload", startgallery) else if (document.getElementById) window.onload=startgallery </script>

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
<div class="gallerycontent" subject="What is JavaScript?"> 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. </div> <div class="gallerycontent" subject="Java & JavaScript Differences"> 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. </div> <div class="gallerycontent" subject="What is DHTML?"> 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. </div>  <div id="controldiv" style="display:none" class="gallerycontroller"> <form name="gallerycontrol"> <select class="gallerycontroller" size="3" name="menu" onChange="manualcontrol(this.options.selectedIndex)"> <option>Blank form</option> </select><br> Auto: <input type="radio" checked name="mode" value="auto" onClick="preparemode('auto')"> Manual: <input type="radio" name="mode" value="manual" onClick="preparemode('manual')"> </form> </div>

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.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post