Gallery buttons not working ( previous and next )

Mats · 10-21-2010, 12:40 PM

Solved the first issue.

Now a different issue came up:

As of now the images stop at image 3; if i press next it doesn't loop. How can I make it continuously go round and round when I press next/previous?

Hi guys,

I'm new to JavaScript and I found this script online ( might be old ) and I just need to use it for a simple gallery where images switch as i press the navigation.

My problem is that when I preview the design in my browser ( Safari & Firefox ) is doesn't work. Nothing happens, they are marked as links, but I just can't click them.

The images are placed right and all that, but I'm sure there is some kind of silly thing I've overlooked. Please help me, the whole site is done, just missing this last piece.

Thanks,
Mats

(ps, code might look a bit messy)
[I]

Quote:

<head>

<script type="text/javascript">

/***********************************************
* DHTML slideshow 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 photos=new Array()
var photoslink=new Array()
var which=0

//define images. You can have as many as you want:
photos[0]="SW4_1.jpg"
photos[1]="SW4_2.jpg"
photos[2]="SW4_3.jpg"

//Specify whether images should be linked or not (1=linked)
var linkornot=0

//Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
photoslink[0]=""
photoslink[1]=""
photoslink[2]=""

//do NOT edit pass this line

var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos
}

function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}

function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}

function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function transport(){
window.location=photoslink[which]
}

</script>
</head>

<body>

<table border="0" cellspacing="0" cellpadding="0">
*<tr>
* *<td width="100%" colspan="1" height="21"><left>
<script>
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>')
if (linkornot==1)
document.write('</a>')
</script>
</center></td>
*</tr>
*<tr>
* *<td width="100%" height="21">
* *<p align="left"><a href="#" onClick="backward();return false">Previous</a>  |  <a href="#" onClick="forward();return false">Next</a></td>
*</tr>
</table>

</body>

Sciliano · 10-21-2010, 12:45 PM

Mats:

See,
http://www.javascript-demos.com/FreeSample.html

Mats · 10-21-2010, 12:50 PM

but I just want it as simple as this:

Source

I'd like to have the option to have typography-based buttons

vwphillips · 10-21-2010, 02:48 PM

the effects are IE only

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">

/***********************************************
* DHTML slideshow 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 photos=new Array()
var photoslink=new Array()
var which=0

//define images. You can have as many as you want:
photos[0]="http://www.vicsjavascripts.org.uk/StdImages/One.gif"
photos[1]="http://www.vicsjavascripts.org.uk/StdImages/Two.gif"
photos[2]="http://www.vicsjavascripts.org.uk/StdImages/Three.gif"

//Specify whether images should be linked or not (1=linked)
var linkornot=0

//Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
photoslink[0]=""
photoslink[1]=""
photoslink[2]=""

//do NOT edit pass this line

var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]
}


function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}



function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}


function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function transport(){
window.location=photoslink[which]
}


/*]]>*/
</script></head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
*<tr>
* *<td width="100%" colspan="1" height="21"><left>
<script>
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>')
if (linkornot==1)
document.write('</a>')
</script>
</center></td>
*</tr>
*<tr>
* *<td width="100%" height="21">
* *<p align="left"><a href="#" onClick="backward();return false">Previous</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" onClick="forward();return false">Next</a></td>
*</tr>
</table>

</body>

</html>

Mats · 10-21-2010, 02:59 PM

It's not the effects I'm after, actually couldn't care less for them, I just can't get the navigation to work. It won't change from the first picture.

Mats · 10-21-2010, 03:27 PM

Solved the first issue.

Now a different issue came up:

As of now the images stop at image 3; if i press next it doesn't loop. How can I make it continuously go round and round when I press next/previous?

DrDOS · 10-21-2010, 04:46 PM

Very basic round robin slide show. Just put your URLs in the imagelist array. Notice how modulus is used to make it go around.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"><!--This page generated Mon Aug 10 20:24:09 PDT 2009-->
<head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>My Minishow: Click image to change</title>
<style type='text/css'>
body{margin:0px;background-color:#000;color:#fff}
#main{width:100%;height:100%}
#image_container{text-align:center;vertical-align:middle}
#text {font-size:18px;font-weight:bold}
img{border:2px solid white;}
</style>
</head><body><table id="main"><tbody><tr><td id="image_container"></td></tr></tbody></table>
<script type='text/javascript'>
imagelist = Array;imagelist =[];

function load_image(count){document.getElementById("image_container").innerHTML=("<p id=\"text\" >Image "+(count+1)+" of "+imagelist.length+"</p><a href=\"#\" onclick='increment(count);'><img src=\""+imagelist[count]+"\"></a><p id=\"text\" >"+imagelist[count]+"</p>");}
var count = 0;
function increment(){(count=count+1);count=count%imagelist.length;load_image(count)}
window.onload=load_image(count);
</script>
  </body>
</html>