Image Thumbnail Viewer trouble

**forcryingoutloud** · 02-10-2007, 01:19 AM

1) Script Title:
Image Thumbnail Viewer

2) Script URL (on DD):
http://dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Problem:

The script won't execute when I place the link in an array that I use to swap text. I just takes me to a separate page with the pic.

4) Shortened code:

Code:

<link rel="stylesheet" href="thumbnailviewer.css" type="text/css" />
<script src="thumbnailviewer.js" type="text/javascript" ></script>

<script type="text/javascript">
var clientData = new Array();

clientData[0] = '<div>Title 1</div><div><a href="images/im1.jpg" rel="thumbnail"><img src="images/img1.jpg"/></a>text here text here text here text here text here text here text here ';

clientData[1] = '<div>Title 2</div><div><a href="images/img2.jpg" rel="thumbnail"><img src="images/img2.jpg"/></a>text here text here text here text here text here text here text here ';

function swapText(clientId) {
document.getElementById("clientInfo").innerHTML = clientData[clientId];
}
</script>
</head>

<body>

<a href="javascript: swapText(0);">SwapText 0</a> 
<a href="javascript: swapText(1);">SwapText 1</a>

<div id="clientInfo">
This Text gets replaced.
</div>

</body>

Works great when its not stored in the array. Any suggestions?

Thanks

**jscheuer1** · 02-10-2007, 05:41 AM

The script needs to init its content while it is a part of the page. Normally it does this on page load (onload). If you keep drawing new content from your array after page load, it isn't initialized.

Unless this method (drawing new content from the array) is essential, a different way of placing it on the page should be found. Instead of placing each item in an array, why not simply have them all on the page? This could probably be done by having them all in the same location with all but one of their display properties set to none. Each one could then be revealed in turn by setting the one that is displayed's display to none while switching the new one's display to block.

That way all items could be initialized onload. The other alternative would be to initialize the script each time new content is drawn. However, this may cause problems with some user's systems, slowing or crashing them.

**ddadmin** · 02-10-2007, 08:17 AM

John is right- basically the script only scans the page once, when the page first loads completely, to associate any link on the page with rel="thumbnail" with the specified enlarged image. I definitely think there's a better way to do the swap text effect than you are doing now as John has mentioned. You can, however, try to re-initialize the script each time swaptext() is called:

Code:

function swapText(clientId) {
document.getElementById("clientInfo").innerHTML = clientData[clientId];
thumbnailviewer.init()
}

**jscheuer1** · 02-10-2007, 12:39 PM

Originally Posted by ddadmin

John is right- basically the script only scans the page once, when the page first loads completely, to associate any link on the page with rel="thumbnail" with the specified enlarged image. I definitely think there's a better way to do the swap text effect than you are doing now as John has mentioned. You can, however, try to re-initialize the script each time swaptext() is called:

Code:

function swapText(clientId) {
document.getElementById("clientInfo").innerHTML = clientData[clientId];
thumbnailviewer.init()
}

True but, that could easily lead to memory leakage in IE. That was what I was cautioning about. A problem like that wouldn't be readily apparent either. You could try it out, it could work but, once you went live, many folks might find that your site was slowing and/or crashing their computers. You might never hear about this. Can't be good if your aim is to have a high traffic site though. I have for quite some time been advising people using a similar script to do just about the exact same thing but, this was in situations where it wasn't as avoidable as it is in this case.

**forcryingoutloud** · 02-10-2007, 07:07 PM

Thanks for responses guys.

While I was waiting to hear back from someone, this is what I did to make the script work:

I changed the 3rd line in the loadimage() function from:

Code:

var imageHTML='<img src="'+link.getAttribute("href")+'" style="'+this.opacitystring+'" />'

to:

Code:

var imageHTML='<img src="'+link+'" style="'+this.opacitystring+'" />'

and changed the links to the images to:

Code:

<a href="#" onclick="thumbnailviewer.loadimage(\'images/img1-big.jpg\')"><img src="images/img1.jpg"/></a>

So I basically bypassed the whole init() function.

While this works fine, it's kind of a sloppy workaround and I lose the ability to show the title of the image (not a big deal though).

I would instead like to try what you suggested, jscheuer1, and swap my text by having it all in the same location with all but one of their display properties set to none.

Could you give me an example of code that would do that?

Thanks for you help!

**jscheuer1** · 02-10-2007, 07:30 PM

Pretty clever what you did there. Here is a simple yet, I think, well thought out method of doing what I was suggesting. You would replace things like:

Code:

Text Text Text Text Text Text Text Text Text Text Text

and:

Code:

Something Something Something Something Something Something Something

with your own content. It can include whatever tags you need and will be a part of the page onload so will get initialized.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
width:350px;
}
</style>
<script type="text/javascript">

var disStyle=0
var dom=document.getElementById||document.all

function getItem(id) {
return document.getElementById&&document.getElementById(id)? document.getElementById(id) : document.all&&document.all[id]? document.all[id] : null;
}

if(dom)
document.write('<style type="text/css" id="dummy">\
.tlink{\
display:none;\
}\
<\/style>')

if(dom&&typeof getItem('dummy').disabled=='boolean'){
document.write('<style type="text/css" id="showhide">\
.showhide{\
display:none;\
}\
#cdiv0 {\
display:block;\
}\
<\/style>');
disStyle=1;
}

function displayOne(idPrefix, idNum){
var i=0;
while (getItem(idPrefix+i)!==null){
getItem(idPrefix+i).style.display='none';
i++;
}
if (typeof idNum!=='undefined')
getItem(idPrefix+idNum).style.display='';
}

function show_hide_init(){
displayOne('cdiv', 0);
if (disStyle)
getItem('showhide').disabled=true;
}

if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", show_hide_init, false );
else if ( typeof window.attachEvent != "undefined" )
    window.attachEvent( "onload", show_hide_init );
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            show_hide_init();
        };
    }
    else
        window.onload = show_hide_init;
}
</script>
</head>
<body>
<a href="#cdiv0" onclick="displayOne('cdiv', 0);return false;">See text</a>
<a href="#cdiv1" onclick="displayOne('cdiv', 1);return false;">See more text</a>
<a href="#cdiv2" onclick="displayOne('cdiv', 2);return false;">See something</a>
<a href="#cdiv3" onclick="displayOne('cdiv', 3);return false;">See hey</a>
<div id="container"><div class="showhide" id="cdiv0" name="cdiv0">Text Text Text Text Text Text Text Text Text Text Text <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
<div class="showhide" id="cdiv1" name="cdiv1">More Text More Text More Text More <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
<div class="showhide" id="cdiv2" name="cdiv2">Something Something Something Something Something Something Something <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
<div class="showhide" id="cdiv3" name="cdiv3">Hey! Hey! Hey! Hey! <a class="tlink" href="#">[Top]</a><br>&nbsp;</div></div>

</body>
</html>

**forcryingoutloud** · 02-10-2007, 11:20 PM

Thanks so much for your help John. I've got everything working now, including the thumbnail viewer.

This is an example of what I did with the HTML from your example:

Code:

<!-- TOP LEVEL MENU -->
<a href="#cdiv0" onClick="displayOne('cdiv', 0);displayOne('cdivB', 0)">Home</a>
<a href="#cdiv1" onClick="displayOne('cdiv', 1);displayOne('cdivB', 3)">About</a>
<a href="#cdiv2" onClick="displayOne('cdiv', 2);displayOne('cdivB', 6)">Contact</a>
<hr/>
<!-- END TOP LEVEL MENU -->

<!-- 2ND LEVEL MENU -->
<div id="container">
	<div class="showhide" id="cdiv0" name="cdiv0">
		HOME menu<br/>
		<a href="#cdivB0" onClick="displayOne('cdivB', 0);return false;">Sub Home 1</a>
		<a href="#cdivB1" onClick="displayOne('cdivB', 1);return false;">Sub Home 2</a>
		<a href="#cdivB2" onClick="displayOne('cdivB', 2);return false;">Sub Home 3</a>
	</div>
		
	<div class="showhide" id="cdiv1" name="cdiv1">
		ABOUT menu <br/>
		<a href="#cdivB3" onClick="displayOne('cdivB', 3);return false;">Sub About 1</a>
		<a href="#cdivB4" onClick="displayOne('cdivB', 4);return false;">Sub About 2</a>
		<a href="#cdivB5" onClick="displayOne('cdivB', 5);return false;">Sub About 3</a>
	</div>
		
	<div class="showhide" id="cdiv2" name="cdiv2">
		CONTACT menu<br/>
		<a href="#cdivB6" onClick="displayOne('cdivB', 6);return false;">Sub Contact 1</a>
		<a href="#cdivB7" onClick="displayOne('cdivB', 7);return false;">Sub Contact 2</a>
		<a href="#cdivB8" onClick="displayOne('cdivB', 8);return false;">Sub Contact 3</a>
	</div>
</div>
<!-- END 2ND LEVEL MENU -->

<hr/>

<!-- BOTTOM LEVEL CONTENT -->
<div id="container2">
	<div class="showhide" id="cdivB0" name="cdivB0">SUB HOME 1 page SUB HOME 1 page SUB HOME 1 page <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
	<div class="showhide" id="cdivB1" name="cdivB1">SUB HOME 2 page SUB HOME 2 page SUB HOME 2 page <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
	<div class="showhide" id="cdivB2" name="cdivB2">SUB HOME 3 page SUB HOME 3 page SUB HOME 3 page <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
	<div class="showhide" id="cdivB3" name="cdivB3">SUB ABOUT 1 page SUB ABOUT 1 page SUB ABOUT 1 page <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
	<div class="showhide" id="cdivB4" name="cdivB4">SUB ABOUT 2 page SUB ABOUT 2 page SUB ABOUT 2 page <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
	<div class="showhide" id="cdivB5" name="cdivB5">SUB ABOUT 3 page SUB ABOUT 3 page SUB ABOUT 3 page <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
	
	<div class="showhide" id="cdivB6" name="cdivB6">SUB CONTACT 1 page SUB CONTACT 1 page SUB CONTACT 1 page<a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
	<div class="showhide" id="cdivB7" name="cdivB7">SUB CONTACT 2 page SUB CONTACT 2 page SUB CONTACT 2 page<a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
	<div class="showhide" id="cdivB8" name="cdivB8">SUB CONTACT 3 page SUB CONTACT 3 page SUB CONTACT 3 page<a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
</div>
<!-- END BOTTOM LEVEL CONTENT -->

I was just a little unsure about what this code was doing:

Code:

if(dom)
document.write('<style type="text/css" id="dummy">\
.tlink{\
display:none;\
}\
<\/style>')

if(dom&&typeof getItem('dummy').disabled=='boolean'){
document.write('<style type="text/css" id="showhide">\
.showhide{\
display:none;\
}\
#cdiv0 {\
display:block;\
}\
<\/style>');
disStyle=1;
}

And just a comment for anyone who tries to use your script to swap text: When labeling the div IDs (ie. <div id="cdiv0">, <div id="cdiv1">) if you skip numbers, it kind of messes things up. Start from 0 and go up.

**jscheuer1** · 02-10-2007, 11:38 PM

That part that you are unsure of takes care of a problem that often occurs in scripts of this type when they go live. What happens is, with a page that takes a while to load, all of your content is visible until the onload event fires. It hides everything except those divisions that you set in it to display:block until the script itself can take over onload.

Thread: Image Thumbnail Viewer trouble

Thread Tools

Search Thread

Image Thumbnail Viewer trouble

Bookmarks

Bookmarks

Posting Permissions