Buttons on 'Advanced gallery script'

**Chopper77** · 11-08-2005, 02:55 PM

Hi everybody, i'm fairly new to JS and was hoping someone might be able to help with this.
I would like to add buttons(next, previous, pause), to the script instead of the selection form. I know I can easily make the pause button set the mode as manual, but don't know how the next, previous buttons would work.

Thanks in advance!

G

**jscheuer1** · 11-08-2005, 06:17 PM

Making the pause may be more difficult than you think and it really should be a toggle, a pause/resume button. But, who am I to know? Here is the script and markup modified with next and previous buttons:

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></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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- © 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
***********************************************/

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

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 (document.gallerycontrol)
//temp.options[selectedDiv].selected=true
if (displaymode=="auto"){
selectedDiv=(selectedDiv<partscollect.length-1)? selectedDiv+1 : 0
autocontrolvar=setTimeout("expandone(0)",tickspeed)
}
}


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


function startgallery(){
if (document.getElementById("controldiv")) //if it exists
document.getElementById("controldiv").style.display="block"
getElementbyClass("gallerycontent")
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"){
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
}
}
}
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="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>

<!--HTML for gallery control options below. Remove checkboxes or entire outer DIV if desired -->

<form name="gallerycontrol" style="display:inline;">

<!--select class="gallerycontroller" size="3" name="menu" onChange="manualcontrol(this.options.selectedIndex)">
<option>Blank form</option>
</select--><br>

<label for="auto">Auto: </label><input id="auto" checked type="radio" name="mode" value="auto" onClick="preparemode('auto')"> <label for="man">Manual: </label><input id="man" type="radio" name="mode" value="manual" onClick="preparemode('manual')">

&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>
</body>
</html>

**Chopper77** · 11-09-2005, 10:21 AM

Thanks very much, this works great.

Genius!

**Chopper77** · 11-10-2005, 04:21 PM

Ok, i've been trying for ages but can't get a toggle button working.
What I want to be able to do is, when I click on the pause button, it chages to the play button and changes the mode to manual, when I click again it changes back to pause and reverts to auto.

Any ideas please??

http://www.reprographicsystems.co.uk...lashframe.html

**jscheuer1** · 11-10-2005, 05:05 PM

Don't say I didn't tell you so. It is a bit of a trick . . or tricks. I liked the idea once I started playing with it and came up with this:

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=5000 //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>

**Chopper77** · 11-11-2005, 09:12 AM

Alright! Nobody likes a smart arse.

Well Maybe!

Thanks again.

**Chopper77** · 11-14-2005, 03:36 PM

Ok Mr clever man! Your final test

I have adpated a couple of bits so I can use images, see the above link.

But I was wondering if is is possible to do the following?
When the left or right image is clicked, the pause button changes to the play button.

Here is the code I have used
[<a href="#" onMouseUp="MM_swapImgRestore()" onMouseDown="MM_swapImage('lefty','','leftOn.gif',1); preparemode('manual');" onclick="expandone(-1);return false;"><img src="left.gif" name="lefty" width="20" height="20" hspace="20" border="0"></a>

<input id="disp" type="image" style="width:20px;" onclick="if(displaymode=='auto'){preparemode('manual');this.src='play.gif'}else{preparemode('auto');this.src='pause.gif'}" value="Resume">

<a href="#" onMouseUp="MM_swapImgRestore()" onclick="expandone(-1);return false;" onMouseDown="MM_swapImage('righty','','rightOn.gif',1); preparemode('manual');"><img src="right.gif" name="righty" width="20" height="20" hspace="20" border="0"></a>
]

Thanks yet again

**jscheuer1** · 11-14-2005, 04:14 PM

Well, the code on your page is a little different than the code in your post. On your page where you have:

Code:

reference_to_form.disp.src='play.gif'

That is the right idea but, since you have dispensed with the form, it should be a reference to the element:

Code:

document.getElementById('disp').src='play.gif'

You can use this in the onmousedown event of the other direction button as well and then it should all work as you would like.

**Chopper77** · 11-14-2005, 05:15 PM

Ah! yes got it.
Thanks again

Thread: Buttons on 'Advanced gallery script'

Thread Tools

Search Thread

Buttons on 'Advanced gallery script'

Bookmarks

Bookmarks

Posting Permissions