|
|||||||||
|
|||||||||
|
|||||||||
 |
|||||||||
| |
||
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
|
|||||||||
| |
||
|
|
|
| ||||||||||||||||||||||||||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
ASP Free Forums Sponsor:
|
|
|
|
#1
October 14th, 2009, 05:42 PM
|
|||
|
|||
|
JavaScript - Need help with javascript gallery thumbs
I am in final stages of a website development project that includes a small image thumbnail gallery for each product. Here is a link to one of the work-in-progress pages containing the gallery.
http://www.evolution-clothing.co.uk/develop/Men/item.asp?idRef=18 Here is the javascript I used for the gallery, I found it on the web, I know absolutely no javascript. Code:
var lastID = 0;
function SelectImg(id) {
if (lastID > 0) {
document.getElementById(lastID).className = "thumbNormal";
}
document.getElementById(id).className = "thumbSelected";
document.getElementById(0).src = document.getElementById(id).src;
lastID = id;
}
function LoadTrigger() {
SelectImg(1);
}
window.onload = LoadTrigger;
followed by:
<img id=1 class="thumbNormal" src="productImages/card_c2.jpg" alt="Timberland zip cardigan" width="70" onclick="SelectImg(1)"/>
<img id=2 class="thumbNormal" src="productImages/card_c.jpg" alt="Timberland zip cardigan" width="70" onclick="SelectImg(2)"/>
<img id=3 class="thumbNormal" src="productImages/card_c1.jpg" alt="Timberland zip cardigan" width="70" onclick="SelectImg(3)"/>
<img id=0 src="">
The problem I am experiencing is in IE, there is pause before the main image is displayed, a missing image icon momentarily appears. On a couple of occasions the main image did not load at all. Is there something wrong with this code? Or is there a really simple alternative script that will achieve the same effect but a bit more reliably? many thanks in advance.
|
|
#2
October 19th, 2009, 06:06 PM
|
||||
|
||||
|
Need help with javascript gallery thumbs
you can do it either by creating a transparent gif and set the default image of 0 as that, or hide the image 0 until it loads the image to be displayed like:
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<script language="javascript">
<!--//
var lastID = 0;
function SelectImg(id) {
if (lastID > 0) {
document.getElementById(lastID).className = "thumbNormal";
}
document.getElementById(id).className = "thumbSelected";
document.getElementById(0).src = document.getElementById(id).src;
if (document.getElementById("fullDiv").style.visibility == "hidden") document.getElementById("fullDiv").style.visibility = "visible"
lastID = id;
}
function LoadTrigger() {
document.getElementById("fullDiv").style.visibility = "hidden";
SelectImg(1);
}
window.onload = LoadTrigger;
//-->
</script>
<style type="text/css">
body
{
}
.thumbNormal
{
border-top: solid 2px #000000;
border-bottom: solid 2px #000000;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
padding-right: 5px;
}
.thumbSelected
{
border-top: solid 2px #ff0000;
border-bottom: solid 2px #ff0000;
border-left: solid 2px #ff0000;
border-right: solid 2px #ff0000;
padding-right: 5px;
}
#thumbDiv
{
height: 60px;
}
</style>
</head>
<body>
<div id="thumbDiv">
<img id="1" name="1" class="thumbNormal" src="http://www.google.co.uk/intl/en_uk/images/logo.gif" alt="Timberland zip cardigan" width="70" onclick="javascript:SelectImg(this.name)" />
<img id="2" name="2" class="thumbNormal" src="http://www.bbc.co.uk/home/release-36-2/img/new_logo.png" alt="Timberland zip cardigan" width="70" onclick="javascript:SelectImg(this.name)" />
<img id="3" name="3" class="thumbNormal" src="http://www.google.co.uk/intl/en_uk/images/logo.gif" alt="Timberland zip cardigan" width="70" onclick="javascript:SelectImg(this.name)" />
</div>
<div id="fullDiv">
<img id="0" />
</div>
</body>
</html>
__________________
Hope this advise helps.  If so please show your appreciation by adding reputation points (click gauge image on top right of this post and score). 
|
|
#3
October 20th, 2009, 11:11 AM
|
||||
|
||||
|
yes, the code is bad.
first of all, don't name things by numbers! that's the worst possible practice. second, image with no "src" will cause the browser to fetch the "Not Found" page from the server - you don't want it. improved version of the code: Code:
var lastID = "";
function SelectImg(id) {
if (lastID.length > 0) {
document.getElementById(lastID).className = "thumbNormal";
}
var oImage = document.getElementById(id);
oImage.className = "thumbSelected";
GetFullImage().src = oImage.src;
lastID = id;
}
function GetFullImage() {
var oFullImage = document.getElementById("FullImage");
if (!oFullImage) {
oFullImage = document.createElement("img");
oFullImage.id = "FullImage";
document.getElementById("FullImagePlaceholder").appendChild(oFullImage);
}
return oFullImage;
}
function LoadTrigger() {
SelectImg("image1");
}
window.onload = LoadTrigger;
followed by:
<img id="image1" class="thumbNormal" src="productImages/card_c2.jpg" alt="Timberland zip cardigan" width="70" onclick="SelectImg(this.id)"/>
<img id="image2" class="thumbNormal" src="productImages/card_c.jpg" alt="Timberland zip cardigan" width="70" onclick="SelectImg(this.id)"/>
<img id="image3" class="thumbNormal" src="productImages/card_c1.jpg" alt="Timberland zip cardigan" width="70" onclick="SelectImg(this.id)"/>
<div id="FullImagePlaceholder"></div>
good luck, let us know how it goes. Last edited by Shadow Wizard : October 20th, 2009 at 11:16 AM.
|
|
#4
October 22nd, 2009, 11:21 AM
|
|||
|
|||
|
Quote:
Many thanks for these responses, I managed to find some good but admittedly more elaborate javascript with a couple of effect functions that I was able to get working just as these responses were added. I'm just starting to learn javascript so the scripts you have posted here will be a good place for me to start.
|
|
#5
October 23rd, 2009, 05:13 AM
|
||||
|
||||
|
Quote:
|
|
| Viewing: ASP Free Forums > Programming > HTML, JavaScript And CSS Help > JavaScript - Need help with javascript gallery thumbs |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
