Advanced Gallery script

**swampthang** · 12-23-2005, 03:02 PM

is it possible to use clickable images instead of a combo box to view the DIV's?

**jscheuer1** · 12-24-2005, 10:00 AM

Sure, what did you want to do about the automatic behavior of this script. You could have a pause/resume button, or just have it be entirely manual with your images the only means of control. Or, perhaps you have something else in mind?

**swampthang** · 12-24-2005, 01:39 PM

hi, thanks for the response.

What I am trying to achieve is a band biog page for each member in my band (www.onenationlive.com). I like the idea of the afore mentioned script but I do not wish it to be automated purely manual.

I want to load the content on the clicking of an image/text rather than the cycling/clicking on a name in a combo box as I think it will look a bit ugly on my page!

thanks again.

**jscheuer1** · 12-24-2005, 03:54 PM

After looking into this a bit more, I discovered that the initial display mode can be automatic, if you like (configured near the beginning of the script). If you choose that, once an image is clicked, it will become manual and stay that way unless the page is refreshed:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Advanced Gallery w/Image Controls - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

/*Begin Gallery Styles*/

.gallerycontainer{ /*Set border and background overall dimensions here*/
height:208px;
width: 250px;
border: 1px solid black;
background-color: #DFDFFF;
padding: 3px;
overflow:hidden; /*This line must remain for Mozilla*/
}

.gallerycontent{ /*Width and height should be slightly less than container*/
color:black;
width: 230px;
height: 200px;
display: block;
margin:30px 10px;
text-indent:15px;
text-align:justify;
font-family:verdana, arial, sans-serif;
font-size:90%;
}

#controls img { /*Style for control images*/
border:none;
padding:2px;
}

/*End Gallery Styles*/

</style>

<script type="text/javascript">

/***********************************************
* Advanced Gallery script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
* Modified here by jscheuer1 in www.dynamicdrive.com/forums
* Switched to image controls. Changed Markup to be more xbrowser
***********************************************/

var tickspeed=5000 //ticker speed in miliseconds (2000=2 seconds)
var displaymode="manual" //initial displaymode ("auto" or "manual")

///////////////No need to Edit below Here/////////////////

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.gallerycontent{display:none;}\n')
document.write('</style>\n')
}

var selectedDiv=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(num, themode){
if (themode=='m')
preparemode('manual')
else
preparemode('auto')
selectedDiv=num
selectedDiv=selectedDiv<0? selectedDiv+partscollect.length : selectedDiv>partscollect.length-1? 0 : selectedDiv
var selectedDivObj=partscollect[selectedDiv]
contractall()
selectedDivObj.style.display="block"
if (displaymode=="auto")
autocontrolvar=setTimeout("expandone("+[num+1]+", 'a')",tickspeed)
}


function preparemode(themode){
displaymode=themode
if (typeof autocontrolvar!="undefined")
clearTimeout(autocontrolvar)
}

function startgallery(){
getElementbyClass("gallerycontent")
if (displaymode=='auto')
expandone(0, 'a')
else
expandone(0, 'm')
}

if (window.addEventListener)
window.addEventListener("load", startgallery, false)
else if (window.attachEvent)
window.attachEvent("onload", startgallery)
else if (document.getElementById)
window.onload=startgallery

</script>
</head>
<body>
<div class="gallerycontainer">
<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><br>

<!-- HTML for gallery control images -->
<div id="controls">
<a href="javascript:expandone(0, 'm');"><img src="thumb2/thumb1.jpg"></a>
<a href="javascript:expandone(1, 'm');"><img src="thumb2/thumb2.jpg"></a>
<a href="javascript:expandone(2, 'm');"><img src="thumb2/thumb3.jpg"></a>
</div>
<!-- End HTML gallery control images -->
</body>
</html>

**swampthang** · 12-24-2005, 06:12 PM

Hi, thanks very much, thats a good start but if I click on any image more than once it cycles through them!

is it possible for the images to only reference a certain div? I imagine it would mean amending the javascript...

**jscheuer1** · 12-24-2005, 06:20 PM

Originally Posted by swampthang

Hi, thanks very much, thats a good start but if I click on any image more than once it cycles through them!

Not happening here.

Originally Posted by swampthang

is it possible for the images to only reference a certain div? I imagine it would mean amending the javascript...

In my demo that is exactly how it works.

PLEASE: Include the URL to your problematic webpage that you want help with.

**swampthang** · 12-24-2005, 08:56 PM

Ahh...! just copied the javascript bit from your example and it works fine now!

go here for the final result! www.onenationlive.com/biog-new1.html

**MDale** · 12-27-2005, 08:03 PM

Hi,

I am trying to do something very similar and have been following this thread with great interest. Instead of different buttons I like to use a "back" and "forward" button as navigation. Can that be done?

**jscheuer1** · 12-28-2005, 05:48 AM

Lucky you, I already had this one lying around. It is probably here in the forum archives as well but, I was unable to find it:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Advanced Gallery w/Button Controls - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

/*Begin Gallery Styles*/

.gallerycontainer{ /*Set border and background overall dimensions here*/
height:208px;
width: 250px;
border: 1px solid black;
background-color: #DFDFFF;
padding: 3px;
overflow:hidden; /*This line must remain for Mozilla*/
}

.gallerycontrol{ /*Set width to above plus any padding x2*/
width: 256px;
text-align:center;
}

.gallerycontent{ /*Width and height should be slightly less than container*/
color:black;
width: 230px;
height: 200px;
display: block;
margin:30px 10px;
text-indent:15px;
text-align:justify;
font-family:verdana, arial, sans-serif;
font-size:90%;
}

/*End Gallery Styles*/

</style>

<script type="text/javascript">

/***********************************************
* Advanced Gallery script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
* Modified here by jscheuer1 in www.dynamicdrive.com/forums
* Switched to button controls. Changed Markup to be more xbrowser
***********************************************/

var tickspeed=3000 //ticker speed in miliseconds (2000=2 seconds)
var displaymode="auto" //initial displaymode ("auto" or "manual")

///////////////No need to Edit below Here/////////////////

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.gallerycontent{display:none;}\n')
document.write('</style>\n')
}

var selectedDiv=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(dir){
selectedDiv+=dir
selectedDiv=selectedDiv<0? selectedDiv+partscollect.length : selectedDiv>partscollect.length-1? 0 : selectedDiv
var selectedDivObj=partscollect[selectedDiv]
contractall()
selectedDivObj.style.display="block"
if (displaymode=="auto")
autocontrolvar=setTimeout("expandone(1)",tickspeed)
}


function preparemode(themode){
displaymode=themode
if (typeof autocontrolvar!="undefined")
clearTimeout(autocontrolvar)
var puts=document.getElementsByTagName('input')
for (var i_tem = 0; i_tem < puts.length; i_tem++)
if (puts[i_tem].className=="dir")
puts[i_tem].disabled=themode=="auto"? 1 : 0
if (themode=="auto")
expandone(1);
}


function startgallery(){
getElementbyClass("gallerycontent")
if (displaymode=="auto"){
var puts=document.getElementsByTagName('input')
for (var i_tem = 0; i_tem < puts.length; i_tem++)
if (puts[i_tem].className=="dir")
puts[i_tem].disabled=1
document.getElementById('disp').value="Pause"
}
expandone(0)
}

if (window.addEventListener)
window.addEventListener("load", startgallery, false)
else if (window.attachEvent)
window.attachEvent("onload", startgallery)
else if (document.getElementById)
window.onload=startgallery

</script>
</head>
<body>
<div class="gallerycontainer">
<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><br>

<!-- HTML for gallery control buttons -->

<form class="gallerycontrol">

<input id="disp" type="button" style="width:75px;" onclick="if(displaymode=='auto'){preparemode('manual');this.value='Resume'}else{preparemode('auto');this.value='Pause'}" value="Resume">&nbsp;&nbsp;
<input class="dir" type="button" onclick="expandone(1);return false;" value="Next">&nbsp;&nbsp;
<input class="dir" type="button" onclick="expandone(-1);return false;" value="Previous">
</form>
<!-- End HTML gallery control buttons -->
</body>
</html>

Notes: To have it be manual only, set the:

Code:

var displaymode="auto" //initial displaymode ("auto" or "manual")

to "manual" and set the display style of the pause/resume button to none (near the end of the above demo page, addition below highlighted red):

Code:

<input id="disp" type="button" style="display:none;width:75px;" onclick="if(displaymode=='auto'){preparemode('manual');this.value='Resume'}else{preparemode('auto');this.value='Pause'}" value="Resume">

**MDale** · 12-29-2005, 03:57 PM

John,

Thank you sooooo much !!! Works like a charm - that is exactly what I was loooking for! You're the best!

Martina

Thread: Advanced Gallery script

Thread Tools

Search Thread

Advanced Gallery script

Bookmarks

Bookmarks

Posting Permissions