PDA

View Full Version : Image Thumbnail Viewer



mikeyewz
02-13-2007, 06:15 PM
1) Script Title: Image Thumbnail Viewer

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

3) Describe problem: It says I have to download thumbnailviewer.css and thumbnailviewer.js. They immediately download to Dreamweaver. Where in my page do I put them? i.e. <Body> section or <head>?

Thanks, Mike.

jscheuer1
02-13-2007, 06:31 PM
The files are external files. The call to the script (.js file) and the link to the stylesheet (.css file) go in the head of the page as stated on the demo page for this script:


Step 1: Add the following to the <head> section of your page:


<link rel="stylesheet" href="thumbnailviewer.css" type="text/css" />

<script src="thumbnailviewer.js" type="text/javascript">

/***********************************************
* Image Thumbnail Viewer Script- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

mikeyewz
02-13-2007, 06:35 PM
Done it!! Thanks a lot!!
Mike.

mikeyewz
02-13-2007, 09:39 PM
Just one more thing, how do I get the 'loading.gif' to work. When I download it, I just get the animation moving in a new window. Where do I go from there?
Thanks.

jscheuer1
02-13-2007, 10:02 PM
I don't know what you mean by 'the animation' or by 'download'. Did you right click on the loading.gif text and chose 'save as' or 'save target as' and save it to the same directory that your page is in?

mikeyewz
02-13-2007, 10:18 PM
No, I just double clicked on the 'loading.gif' link. What I have done now is as you said, chosen 'save target as', and it now works great!
Also, my thumbnails have blue border round them, is it possible to either change the colour, or remove them altogether? You can see them here:
http://www.maximumrnb.com/test3.htm

Thanks again.
Mike.

jscheuer1
02-13-2007, 10:25 PM
<img src="http://www.maximumrnb.com/Jimi201.jpg" style="border:none;width: 168px; height: 238px" />

or:


<img src="http://www.maximumrnb.com/Jimi201.jpg" style="border:1px solid red;width: 168px; height: 238px" />

Or whatever you like.

mikeyewz
02-13-2007, 10:28 PM
Thanks John.....is it possible to use 'mouseover' in this script?
Mike.

jscheuer1
02-13-2007, 10:43 PM
You could try:


<a href="http://www.maximumrnb.com/Jimi01.jpg"" rel="thumbnail" onmouseover="this.onclick();">

If that doesn't work, the solution would probably be a bit complex but, doable.

mikeyewz
02-13-2007, 10:53 PM
Thanks again!! It worked a treat!! Thank you very much for your superfast replies. You do a great job!!
Regards, Mike.

Nightwing308
11-23-2010, 01:15 AM
You could try:


<a href="http://www.maximumrnb.com/Jimi01.jpg"" rel="thumbnail" onmouseover="this.onclick();">

If that doesn't work, the solution would probably be a bit complex but, doable.

I realize this thread is ancient, but it's the ONLY reference I could find to
what I'm trying to accomplish.
The "onmouseover" to open the large image works like a charm, but is there any way to get the image to close again with "onmouseout" (not having to click to close them)?
I need the large images to open basically on top of (or at least close to) the thumbnails, and I haven't found a way to accomplish this with the Thumbnail Viewer II script (no room in the area I'm working with for a separate "loadingarea" div).
The way ThumbnailViewer I opens the large images is perfect, only that I need them to open and close with "onmouseover" and "onmouseout".
Any help with this would be greatly appreciated.

jscheuer1
11-23-2010, 03:07 AM
Forget about adding onmouseover and onmouseout events one by one to your thumbnail links. Remove all of those.

Just add this highlighted script as shown as the last thing before the closing </body> tag:


<script type="text/javascript">
(function(){
var a = document.links, i = a.length - 1;
for (i; i > -1; --i){
if(a[i].rel === 'thumbnail'){
a[i].onmouseover = function(){this.onclick();};
a[i].onmouseout = function(){thumbnailviewer.closeit();};
}
}
})();
</script>
</body>
</html>