adding captions to javascript gallery

@ange_rhmApr 16.2007

Hi, I making an image gallery with thumbails and previous and next buttons. I search the forum and found ~~[URL=”http://www.webdeveloper.com/forum/showthread.php?t=20940&highlight=image+gallery+thumbnails”]~~this thread [/URL] with a script by ~~[B]~~Mr J[/B] that was very useful and easy to implement.

I tweaked it a little for my site and this is what I got:

[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html> <head> <title>Untitled Document</title> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″> <SCRIPT language=JavaScript> <!– maxPic = 3;

mypic = new Array(); mypic[0]=”imagenes/uk/alan_peters.jpg”; mypic[1]=”imagenes/uk/alison_crowther.jpg”; mypic[2]=”imagenes/uk/andrew_skelton.jpg”;

function showpic(n){ document.getElementById(“mainpic”).src=mypic[n] count=n }

count = 0; function next() { count++; if (count > maxPic-1) { count = 0; } document.getElementById(“mainpic”).src=mypic[count] }

function prev() { count–; if (count == -1) { count = maxPic-1; } document.getElementById(“mainpic”).src=mypic[count] }

// –> </SCRIPT> </head>

<body> <table border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″> <tr> <td><img src=”imagenes/uk/alan_peters.jpg” name=”mainpic” width=”490″ height=”350″ id=”mainpic”></td> <td> </td> <td><table width=”200″ border=”0″ cellspacing=”5″ cellpadding=”0″> <tr> <td><a href=”javascript:showpic(0)”><img src=”imagenes/uk_light/alan_peters.jpg” width=”60″ height=”35″ border=”0″></a></td> <td><a href=”javascript:showpic(1)”><img src=”imagenes/uk_light/alison_crowther.jpg” width=”60″ height=”35″ border=”0″></a></td> <td><a href=”javascript:showpic(2)”><img src=”imagenes/uk_light/andrew_skelton.jpg” width=”60″ height=”35″ border=”0″></a></td> </tr> <tr> <td colspan=”3″><div align=”center”><a href=”javascript:prev()”>prev</a> | <a href=”javascript:next()”>next</a> </div></td> </tr> </table></td> </tr> </table> </body> </html> [/CODE]

It works just fine but I want to have captions for each fullsized picture. Im sure its easy but I just cant get it to work. Any ideas? Any help would be greatly appreciated.

Angela

to post a comment

JavaScript

10 Comments(s) _↴

@Mr_JApr 16.2007 — #Give this a try

[CODE]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 <head>
 <title>Untitled Document</title>
 
 <script type="text/javascript">
 <!-- 
 
 mypic = new Array();
 mypic[0]=["imagenes/uk/alan_peters.jpg","Caption One"]
 mypic[1]=["imagenes/uk/alison_crowther.jpg","Image text two"]
 mypic[2]=["imagenes/uk/andrew_skelton.jpg","Have a nice day"]
 
 
 function showpic(n){
 document.getElementById("mainpic").src=mypic[n][0]
 document.getElementById("mycaption").innerHTML=mypic[n][1]
 count=n
 }
 
 count = 0;
 function next() {
 count++
 if (count == mypic.length) {
 count = 0
 }
 document.getElementById("mainpic").src=mypic[count][0]
 document.getElementById("mycaption").innerHTML=mypic[count][1]
 }
 
 function prev() {
 count--
 if (count<0) {
 count = mypic.length-1
 }
 document.getElementById("mainpic").src=mypic[count][0]
 document.getElementById("mycaption").innerHTML=mypic[count][1]
 }
 
 // -->
 </script>
 </head>
 
 <body>
 <table border="1" align="center" cellpadding="0" cellspacing="0">
 <tr>
 <td><img src="imagenes/uk/alan_peters.jpg" name="mainpic" width="490" height="350" id="mainpic"><BR>
 <div id="mycaption">Caption One</div>
 </td>
 <td width="200" align="center">
 <a href="javascript:showpic(0)"><img src="imagenes/uk_light/alan_peters.jpg" width="60" height="35" border="0">
 <a href="javascript:showpic(1)"><img src="imagenes/uk_light/alison_crowther.jpg" width="60" height="35" border="0"></a>
 <a href="javascript:showpic(2)"><img src="imagenes/uk_light/andrew_skelton.jpg" width="60" height="35" border="0"></a><BR>
 <a href="javascript:prev()">prev</a> | <a href="javascript:next()">next</a>
 </td>
 </tr>
 <tr>
 </table>
 
 </body>
 </html>
 [/CODE]

@ange_rhmauthorApr 16.2007 — #Perfect! cant believe it was so easy ?

thank you Mr J!

@cyberseedApr 20.2007 — #Hi I dont use javascript much, I came across your code which works a treat. A quick question if the thumbs are on a different page how do you link to the page with the fullsize image and call up the javascript. The code at present is:
[CODE]<a href="javascript:showpic(1)"><img src="images/image-02.jpg" width="50" height="50" border="0"></a>[/CODE]

If the thumbs are on another page and the page with the full size image is at "index.htm" what would the code be. I tried putting the name of the file in the link with out success. Any help, yes please!

@Mr_JApr 20.2007 — #Just in case anyone else is following this thread

http://www.webdeveloper.com/forum/showthread.php?p=743528#post743528

@ange_rhmauthorApr 23.2007 — #Hi! One question about this script, why doesnt it work in Firefox? Some of the captions have non-english characters (accents and such), Im guessing Firefox doesnt support non-english characters in arrays? Is there a way around it? (aside from not using non-english characters, off course ? )

The gallery works perfectly in IE.

@Mr_JApr 23.2007 — #I have tried the above code in Firefox and it worked without any problems

Post the code you are using

@ange_rhmauthorApr 24.2007 — #My bad, nevermind. I wrote [B]á[/B] instead of [B]á[/B] and so on.

I was wrong, not the code ? Thanks!

@marcia_99May 29.2007 — #Hi Im using this galley and was wondering how can I add different links to the fullsize image, I added links and destination to the array like so:

[CODE]mypic = new Array();
 
 mypic[0]=["pic1.jpg","Caption One","http://www.link1.htm","_blank"]
 mypic[1]=["pic2.jpg","Caption Two","http://www.link2.htm","_blank"]
 mypic[2]=["pic3.jpg","Caption Three","http://www.link3.htm","_blank"]
 [/CODE]

What I cant figure out is how can I add a function so that the link changes with the image. I reckon is very simple and not worth starting its own thread ? ...

@Mr_JMay 29.2007 — #Try this

[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 <head>
 <title>Untitled Document</title>
 
 <script type="text/javascript">
 <!-- 
 
 mypic = new Array();
 mypic[0]=["pic1.jpg","Caption One","http://www.link1.htm"]
 mypic[1]=["pic2.jpg","Caption Two","http://www.link2.htm"]
 mypic[2]=["pic3.jpg","Caption Three","http://www.link3.htm"]
 
 url=mypic[0][2] // default url
 
 
 function showpic(n){
 document.getElementById("mainpic").src=mypic[n][0]
 document.getElementById("mycaption").innerHTML=mypic[n][1]
 url=mypic[n][2]
 count=n
 }
 
 count = 0;
 function next() {
 count++
 if (count == mypic.length) {
 count = 0
 }
 document.getElementById("mainpic").src=mypic[count][0]
 document.getElementById("mycaption").innerHTML=mypic[count][1]
 url=mypic[count][2]
 }
 
 function prev() {
 count--
 if (count<0) {
 count = mypic.length-1
 }
 document.getElementById("mainpic").src=mypic[count][0]
 document.getElementById("mycaption").innerHTML=mypic[count][1]
 url=mypic[count][2]
 }
 
 function goUrl(){
 window.open(url)
 }
 
 // -->
 </script>
 </head>
 
 <body>
 <table border="1" align="center" cellpadding="0" cellspacing="0">
 <tr>
 <td><img src="imagenes/uk/alan_peters.jpg" name="mainpic" width="490" height="350" id="mainpic" onclick="goUrl()"><BR>
 <div id="mycaption">Caption One</div>
 </td>
 <td width="200" align="center">
 <a href="javascript:showpic(0)"><img src="imagenes/uk_light/alan_peters.jpg" width="60" height="35" border="0">
 <a href="javascript:showpic(1)"><img src="imagenes/uk_light/alison_crowther.jpg" width="60" height="35" border="0"></a>
 <a href="javascript:showpic(2)"><img src="imagenes/uk_light/andrew_skelton.jpg" width="60" height="35" border="0"></a><BR>
 <a href="javascript:prev()">prev</a> | <a href="javascript:next()">next</a>
 </td>
 </tr>
 <tr>
 </table>
 
 </body>
 </html>[/code]

@marcia_99May 29.2007 — #problem solved ? Thank you

Also in #JavaScript _↴

Whats wrong with this?dynamic div height ServiceWorker problem with events and ifs

Success!

Help @ange_rhm spread the word by sharing this article on Twitter...

Tweet This

adding captions to javascript gallery

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

adding captions to javascript gallery

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴