image viewer script pllzzzz

X

xiibweb

Hi

I am struggling to find a code meeting my requirements... I want to
display 4 thumbnails of photos in a row (table 1X4). When any thumb is
clicked the large image size shud appear just below the 4 thumb aligned
as center... along with description of photo. Anyone cn help me out
plzz

Regards,

John...
 
L

Lee

(e-mail address removed) said:
Hi

I am struggling to find a code meeting my requirements... I want to
display 4 thumbnails of photos in a row (table 1X4). When any thumb is
clicked the large image size shud appear just below the 4 thumb aligned
as center... along with description of photo. Anyone cn help me out
plzz

<html>
<head>
<title>demo</title>
<script type="text/javascript">
var imgTable = [
{ src: "http://www.azphx.com/dhtml/tmp/alpha256256.jpg",
img: new Image(256,256),
msg: "This is the letter \"alpha\"."
},
{ src: "http://www.azphx.com/dhtml/tmp/beta256256.jpg",
img: new Image(256,256),
msg: "This is the letter \"beta\"."
},
{ src: "http://www.azphx.com/dhtml/tmp/gamma256256.jpg",
img: new Image(256,256),
msg: "This is the letter \"gamma\"."
},
{ src: "http://www.azphx.com/dhtml/tmp/delta256256.jpg",
img: new Image(256,256),
msg: "This is the letter \"delta\"."
}
];

for (var i=0;i<imgTable.length;i++) {
imgTable.img.src=imgTable.src;
}

function shwImage(n) {
document.getElementById("canvas").src=imgTable[n].img.src;
document.getElementById("canvasTitle").innerHTML=imgTable[n].msg;
}
</script>
<style type="text/css">
#images {text-align:center}
</style>
</head>
<body>
<div id="images">
<img src="http://www.azphx.com/dhtml/tmp/alpha6464.jpg"
border="1" height="64" width="64" onclick="shwImage(0)">
<img src="http://www.azphx.com/dhtml/tmp/beta6464.jpg"
border="1" height="64" width="64" onclick="shwImage(1)">
<img src="http://www.azphx.com/dhtml/tmp/gamma6464.jpg"
border="1" height="64" width="64" onclick="shwImage(2)">
<img src="http://www.azphx.com/dhtml/tmp/delta6464.jpg"
border="1" height="64" width="64" onclick="shwImage(3)">
<br>
<img id="canvas" src="http://www.azphx.com/dhtml/tmp/blank.gif"
border="1" height="256" width="256">
<br>
<div id="canvasTitle"></div>
</div>
</body>
</html>
 
A

ASM

Lee said:
(e-mail address removed) said:

to xiibweb

take care : in example below :
- large images are set in JS object : imgTable
- thumbnails have to be small images
and not big ones resized on fly as done here
and ... if JS is disabled no big image at all
<html>
<head>
<title>demo</title>
<script type="text/javascript">
var imgTable = [
{ src: "http://www.azphx.com/dhtml/tmp/alpha256256.jpg",
img: new Image(256,256),
msg: "This is the letter \"alpha\"."
},
{ src: "http://www.azphx.com/dhtml/tmp/beta256256.jpg",
img: new Image(256,256),
msg: "This is the letter \"beta\"."
},
{ src: "http://www.azphx.com/dhtml/tmp/gamma256256.jpg",
img: new Image(256,256),
msg: "This is the letter \"gamma\"."
},
{ src: "http://www.azphx.com/dhtml/tmp/delta256256.jpg",
img: new Image(256,256),
msg: "This is the letter \"delta\"."
}
];

for (var i=0;i<imgTable.length;i++) {
imgTable.img.src=imgTable.src;
}

function shwImage(n) {
document.getElementById("canvas").src=imgTable[n].img.src;
document.getElementById("canvasTitle").innerHTML=imgTable[n].msg;
}
</script>
<style type="text/css">
#images {text-align:center}
</style>
</head>
<body>
<div id="images">
<img src="http://www.azphx.com/dhtml/tmp/alpha6464.jpg"
border="1" height="64" width="64" onclick="shwImage(0)">
<img src="http://www.azphx.com/dhtml/tmp/beta6464.jpg"
border="1" height="64" width="64" onclick="shwImage(1)">
<img src="http://www.azphx.com/dhtml/tmp/gamma6464.jpg"
border="1" height="64" width="64" onclick="shwImage(2)">
<img src="http://www.azphx.com/dhtml/tmp/delta6464.jpg"
border="1" height="64" width="64" onclick="shwImage(3)">
<br>
<img id="canvas" src="http://www.azphx.com/dhtml/tmp/blank.gif"
border="1" height="256" width="256">
<br>
<div id="canvasTitle"></div>
</div>
</body>
</html>
 
L

Lee

ASM said:
to xiibweb

take care : in example below :
- large images are set in JS object : imgTable
- thumbnails have to be small images
and not big ones resized on fly as done here
and ... if JS is disabled no big image at all

Nothing is being resized on the fly.


<html>
<head>
<title>demo</title>
<script type="text/javascript">
var imgTable = [
{ src: "http://www.azphx.com/dhtml/tmp/alpha256256.jpg",
img: new Image(256,256),
msg: "This is the letter \"alpha\"."
},
{ src: "http://www.azphx.com/dhtml/tmp/beta256256.jpg",
img: new Image(256,256),
msg: "This is the letter \"beta\"."
},
{ src: "http://www.azphx.com/dhtml/tmp/gamma256256.jpg",
img: new Image(256,256),
msg: "This is the letter \"gamma\"."
},
{ src: "http://www.azphx.com/dhtml/tmp/delta256256.jpg",
img: new Image(256,256),
msg: "This is the letter \"delta\"."
}
];

for (var i=0;i<imgTable.length;i++) {
imgTable.img.src=imgTable.src;
}

function shwImage(n) {
document.getElementById("canvas").src=imgTable[n].img.src;
document.getElementById("canvasTitle").innerHTML=imgTable[n].msg;
}
</script>
<style type="text/css">
#images {text-align:center}
</style>
</head>
<body>
<div id="images">
<img src="http://www.azphx.com/dhtml/tmp/alpha6464.jpg"
border="1" height="64" width="64" onclick="shwImage(0)">
<img src="http://www.azphx.com/dhtml/tmp/beta6464.jpg"
border="1" height="64" width="64" onclick="shwImage(1)">
<img src="http://www.azphx.com/dhtml/tmp/gamma6464.jpg"
border="1" height="64" width="64" onclick="shwImage(2)">
<img src="http://www.azphx.com/dhtml/tmp/delta6464.jpg"
border="1" height="64" width="64" onclick="shwImage(3)">
<br>
<img id="canvas" src="http://www.azphx.com/dhtml/tmp/blank.gif"
border="1" height="256" width="256">
<br>
<div id="canvasTitle"></div>
</div>
</body>
</html>

 
A

ASM

Hi

I am struggling to find a code meeting my requirements... I want to
display 4 thumbnails of photos in a row (table 1X4). When any thumb is
clicked the large image size shud appear just below the 4 thumb aligned
as center... along with description of photo. Anyone cn help me out
plzz

Regards,

John...


Using something proposed by somewhere :

<html>
<base href="http://www.azphx.com/dhtml/tmp/">
<style type="text/css">
#images { text-align: center }
img { cursor: pointer }
#canvas { cursor: auto }
</style>
<div id="images">
<img src="alpha6464.jpg"
border="1" height="64" width="64" onclick="shwImage(this)"
title="This is the letter \"alpha\".">
<img src="beta6464.jpg"
border="1" height="64" width="64" onclick="shwImage(this)"
title="This is the letter \"beta\".">
<img src="gamma6464.jpg"
border="1" height="64" width="64" onclick="shwImage(this)"
title="This is the letter \"gamma\".">
<img src="delta6464.jpg"
border="1" height="64" width="64" onclick="shwImage(this)"
title="This is the letter \"delta\">
<br>
<img id="canvas" src="blank.gif"
border="1" height="256" width="256">
<br>
<div id="canvasTitle"></div>
</div>
<script type="text/javascript">
function shwImage(thisImage) {
document.getElementById("canvas").src=thisImage.src;
document.getElementById("canvasTitle").innerHTML=thisImage.title;
}
</script>
</html>


and for non-DOM browsers :

<html>
<base href="http://www.azphx.com/dhtml/tmp/" target="_blank">
<center>
<table border=1 cellpadding=0>
<tr>
<td>
<a href="alpha6464.jpg"
onclick="shwImage(this,'This is the letter \'alpha\'.'); return
false;">
<img src="alpha6464.jpg" border="0" height="64" width="64"></a>
</td><td>
<a href="beta6464.jpg"
onclick="shwImage(this,'This is the letter \'beta\'.'); return false;">
<img src="beta6464.jpg" border="0" height="64" width="64"></a>
</td><td>
<a href="gamma6464.jpg"
onclick="shwImage(this,'This is the letter \'gamma\'.'); return false;">
<img src="gamma6464.jpg" border="0" height="64" width="64"></a>
</td><td>
<a href="delta6464.jpg"
onclick="shwImage(this,'This is the letter \'delta\'.'); return false;">
<img src="delta6464.jpg" border="0" height="64" width="64"></a>
</td>
</tr>
<tr>
<td colspan="4" align=center>
<img name="canvas" src="blank.gif"
border="1" height="256" width="256">
</td></tr></table>
<form name="canvasvalue"><input type=text size=40></form>
</center>
<script type="text/javascript">
function shwImage(thisImage,thisTitle) {
document.images["canvas"].src=thisImage.href;
document.canvasvalue[0].value=thisTitle;
}
</script>
</html>


nota :
take care first example will not more work if javascript is disabled


Stephane Moriaux et son [moins] vieux Mac
 
A

ASM

Lee said:
ASM said:



Nothing is being resized on the fly.

for me :
height="64" width="64"
or
height="256" width="256"

are probably not original images sizes
so they are re-sized on the fly(*)
(at least the large image is)


(*) if you use other words to say so, I'll be happy to learn them
 
L

Lee

ASM said:
for me :
height="64" width="64"
or
height="256" width="256"

are probably not original images sizes
so they are re-sized on the fly(*)
(at least the large image is)

No, those are the exact sizes of the images on the server.
Specifying the size speeds up page rendering.
 
A

ASM

Lee said:
ASM said:



No, those are the exact sizes of the images on the server.

OK, we'll expect so.
Anyway, what is important to know is that
images must be pre-sized in sizes to display.
Specifying the size speeds up page rendering.

(we'll pass on the big ones which would be in cache)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top