By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,717 Members | 1,233 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,717 IT Pros & Developers. It's quick & easy.

image viewer script pllzzzz

P: n/a
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...

Aug 23 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Lee
xi*****@hotmail.com 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[i].img.src=imgTable[i].src;
}

function shwImage(n) {
document.getElementById("canvas").src=imgTable[n].img.src;
document.getElementById("canvasTitle").innerHTML=i mgTable[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>

Aug 23 '05 #2

P: n/a
ASM
Lee wrote:
xi*****@hotmail.com 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

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[i].img.src=imgTable[i].src;
}

function shwImage(n) {
document.getElementById("canvas").src=imgTable[n].img.src;
document.getElementById("canvasTitle").innerHTML=i mgTable[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>

--
Stephane Moriaux et son [moins] vieux Mac
Aug 23 '05 #3

P: n/a
Lee
ASM said:

Lee wrote:
xi*****@hotmail.com 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

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[i].img.src=imgTable[i].src;
}

function shwImage(n) {
document.getElementById("canvas").src=imgTable[n].img.src;
document.getElementById("canvasTitle").innerHTML=i mgTable[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>



Aug 23 '05 #4

P: n/a
ASM
xi*****@hotmail.com wrote:
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.sr c;
document.getElementById("canvasTitle").innerHTML=t hisImage.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
Aug 23 '05 #5

P: n/a
ASM
Lee wrote:
ASM said:
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.


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

--
Stephane Moriaux et son [moins] vieux Mac
Aug 23 '05 #6

P: n/a
Lee
ASM said:

Lee wrote:
ASM said:
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.


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.

Aug 23 '05 #7

P: n/a
ASM
Lee wrote:
ASM said:
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.


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)
--
Stephane Moriaux et son [moins] vieux Mac
Aug 24 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.