Newbie HELP!: Image Thumbnail Viewer II

atomic · #1 Mar 23rd, 2004, 11:16

Hi folks - I hope you can help me.

The script I want to use is -http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

I use Front Page 2000 and I've tried and tried but because I'm quite new to scripts I'm not quite sure where my pics should go!

As an example, I've called the images "smallpic1.jpg" and "bigpic1.jpg" - could someone please show me where to place them?
Also, my big images are all different sizes - where do I insert the max.size?
If I could just get a start, I can take it from there.
Hope you can help!
This is what I've done so far...

**********************************
<html>

<head>
<title>New Page 1</title>
<script type="text/javascript">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["photo1.jpg", "http://www.cnn.com]
dynimages[1]=["photo2.jpg", "http://www.yahoo.com]
dynimages[2]=["photo3.jpg", "http://www.google.com]

//Preload images ("yes" or "no"):
var preloadimg="no"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progidXImageTransform.Microsoft.Grad ientWipe(GradientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='[img]'+theimg[0]+'[/img]'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

</script>

</head>

<body>
image 1 (onmouseover)

image 2 (onmouseover)

image 3 (onclick)

<div id="dynloadarea" style="width:80px;height:225px"></div>

<div id="dynloadarea2" style="width:80px;height:200px"></div>
</body>

</html>
*******************************

Smokie · #2 Mar 23rd, 2004, 13:06

on the line in the javascript which says:

//Specify image paths and optional link (set link to "" for no link):

you will see the images, just change their paths to the same has what you have in the HTML:

../My Sites/portfolio/images/smallpic1.jpg

Good luck!

atomic · #3 Mar 23rd, 2004, 16:06

Thank you Smokie - I'll give it a try!
Can it really be that easy?! Hope so...
Cheers

atomic · #4 Mar 23rd, 2004, 22:02

Yeehaaa!
I've been trying all day and was about to give up and ask for help again but... I finally did it! Thanks to you Smokie
I now have text links which show the big images on mouseover - the basis of my future image gallery!

Next poser: How do I chage them into thumbnail images?
I'd also like to be able to play around with the layout of the page/images but can't figure out how.

Can you, or anyone, help me do this please..please..pretty please?

atomic · #5 Apr 4th, 2004, 17:54

No need for more help, Smokie! I've managed to achieve my aim at last.
Thank you very very much for your valuable help.
Until the next time...

Smokie · #6 Apr 5th, 2004, 09:44

the pleasure was all mine...

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How do I do this? (flash content viewer with thumbnail scroller) Check this page out.	jpf566	Flash & Multimedia Forum	1	Mar 7th, 2008 19:49
There has to be a simpler way to do this!! Animated Image/Information viewer!	jpf566	Flash & Multimedia Forum	4	Feb 25th, 2008 13:41
[SOLVED] JS Image viewer	Graisbeck	JavaScript Forum	5	Jan 2nd, 2008 01:47
creating an interactive 3d object viewer	stroodle01	Flash & Multimedia Forum	2	Oct 1st, 2007 15:21
Problems with Image Viewer	JennyChaos	JavaScript Forum	2	Jul 10th, 2007 17:50

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Newbie HELP!: Image Thumbnail Viewer II