PDA

View Full Version : Image Thumbnail Viewer II IE



QuizToon
04-15-2005, 09:58 PM
Image Thumbnail Viewer II IE (http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm)

I am pretty new to websites and javascript and have found this site a real help.

I have been getting to grips with the Image Thumbnail Viewer II IE script and got it working quite well with some images.

I was wondering if anyone knew if there is a way to load a text or html file instead of an image file.

ie one link loads an image the next link might load an html file, the next another image file etc etc.

Hope someone who will much cleverer than me could come to my assistance.

Thanks in advance

Quiztoon

jscheuer1
04-16-2005, 05:36 AM
.

Try this one out:


<html>

<head><title>Thumb 2</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
* Modified here to accept external text file as well as images
* Modified for optional captions, read all comments in top
* of script and in HTML code below.
* Modifications John Davenport Scheuer - jscheuer1TAKETHISOUTTOUSEEMAIL@comcast.net
***********************************************/
/*
IMPORTANT NOTE - In most cases specifying only a small external file for display
will yield the best results - IMPORTANT NOTE
Specify image/text file paths and optional link (set link to "" for no link)
set third parameter to "i" for image file, "t" for text file: */
var dynimages=new Array()
dynimages[0]=["photo1.jpg", "http://www.cnn.com", "i"]
dynimages[1]=["photo2.jpg", "http://www.yahoo.com", "i"]
dynimages[2]=["photo3.jpg", "http://www.google.com", "i"]
dynimages[3]=["ext.htm", "http://www.google.com", "t"]

//Set scrolling for text content if text content used("yes" or "no"):
var scrolltext="no"

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

//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="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

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

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

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
if (theimg[2]=="i")
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[2]=="t")
imghtml+='<iframe src="'+theimg[0]+'" frameborder="'+imgborderwidth+'" height="'+document.getElementById("dynloadarea").style.height+'" scrolling="'+scrolltext+'"></iframe>'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

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

function get_cap(cap){
if (document.getElementById){
document.getElementById('caploadarea').innerHTML=cap;}
else if (document.all){
document.all('caploadarea').innerHTML=cap;}
else{
return;}
}

</script>
</head>

<body>
<!--Configure your links below, notice that if you add ;get_cap(this.name); to the onMouseover event
and a name to the anchor tag, you will get a caption -->
<a href="#" name="1st Image" onMouseover="modifyimage('dynloadarea', 0);get_cap(this.name);"><img src=thumb1.jpg width=50px height=50px border=0 alt="" title=""></a><br>&nbsp;<br>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)"><img src=thumb2.jpg width=50px height=50px border=0 alt="" title=""></a><br>&nbsp;<br>
<a href="#" onMouseover="modifyimage('dynloadarea', 2)"><img src=thumb3.jpg width=50px height=50px border=0 alt="" title=""></a><br>&nbsp;<br>
<a href="#" name="Above is Some Text Content" onMouseover="modifyimage('dynloadarea', 3);get_cap(this.name);">Text Content</a><p>
<!--Configure size of display areas below -->
<div id="dynloadarea" style="width:140px;height:225px"></div>
<hr align=left width=140>
<div id="caploadarea" style="width:200px;height:2em;text-align:left"></div></body>
</html>

QuizToon
04-16-2005, 04:45 PM
Thanks for your reply I will have a go at t and let you know the outcome.



Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.


:( For the above - Not sure I know where you need the link to go. I did put the title of the thread as the link to the script, I have, as yet, not uploaded anything to the web that uses this script.

Thanks for your help

QuizToon
04-16-2005, 09:13 PM
Hi again

I have now tried out your new script and that does do what I want it to do, thanks for that.

However, I am having a little problem in the layout size of the dynloadarea div. I have uploaded a test page (http://www.quiztoon.com/dhtml/test.html)

I wondered if you could have a look at the script and see what I have done wrong.

Incidentally, the file which isnt displaying correctly (link 2) is an html file with a table whose width is less than that of what I think I have set the div at.

Quiztoon


:o If at first you dont succeed, maybe you are stupid (I know I am) :D

jscheuer1
04-17-2005, 01:52 AM
I actually thought about that later, replace:
if (theimg[2]=="t")
imghtml+='<iframe src="'+theimg[0]+'" frameborder="'+imgborderwidth+'" height="'+document.getElementById("dynloadarea").style.height+'" scrolling="'+scrolltext+'"></iframe>'with:
if (theimg[2]=="t"){
scrollHeight=(document.getElementByID)?document.getElementById('dynloadarea').style.height:document.all('dynloadarea').style.height
scrollWidth=(document.getElementByID)?document.getElementById('dynloadarea').style.width:document.all('dynloadarea').style.width
imghtml+='<iframe src="'+theimg[0]+'" frameborder="'+imgborderwidth+'" height="'+scrollHeight+'" width="'+scrollWidth+'" scrolling="'+scrolltext+'"></iframe>'
}Sorry about that.

QuizToon
04-17-2005, 11:10 PM
That is great Thanks.

You truly are a god in human form (or am I going a little over the top in my praise)

Either way you are a great help, and I dont just mean to me, I have looked at all the posts you have made helping peopler sort out problems, what a star you are.

It is refreshing to find someone who has the time and patience to help newbies.

Regards

Quiztoon

QuizToon
04-18-2005, 08:24 PM
Hi again

Just one more quick question

How do I set the initial object in the frame to be an html file instead of an image.

I know that you put the image file here

<div id="dynloadarea" style="width:572px;height:600px">image file goes here</div>

but what do i need to put to display an html file instead -or is it not possible

jscheuer1
04-19-2005, 03:51 AM
<div id="dynloadarea" style="width:572px;height:600px">image file goes here</div>You must have gotten that from another post of mine, the idea will work with an HTML file. The principle at work here is that whatever code you put between this division's tags will get overwritten when the script starts displaying things there. Here is an example of what could go there:
<div id="dynloadarea" style="width:280px;height:225px">
<iframe src="some.html" frameborder="1" height="225" width="280" scrolling="no">
</iframe>
</div>Notice how the height & width agree with the division's dimensions (you can play around with this but results could be odd). Scrolling should be set to the same thing as 'var scrolltext=' is set to in the script unless you want the initial scrolling behavior to be different. The frameborder should be set to same value as 'var imgborderwidth=' in the script unless you want different.

thumbkin
04-20-2005, 10:12 PM
This is in reference to the nifty script at http://dynamicdrive.com/dynamicindex4/thumbnail2.htm

The Image Gallery II script.

I love this thing, but have noticed some odd behavior.

Under IE6SP1 (XP SP1) at home, the DX9 effects work fine.
At work, with the same setup, the DX9 effects fail. You can right click on where the picture should be, and get the "Show Picture" option, which when selected does in fact show the picture.

I don't understandwhy it works under IESP1 on one box and not another. Both IEs are using default (Medium) security settings.

See the example at http://www.randisphotography.com/gallery2a.htm

Any and all help is greatly appreciated.

Thanks

Thumbkin
b)

jscheuer1
04-21-2005, 04:23 AM
Very nice pictures and site!
You can right click on where the picture should be, and get the "Show Picture" option, which when selected does in fact show the picture.I can't replicate the problem exactly. I'd check this on IE:

Tools
-----Internet Options
---------------------Advanced
scroll down to the Multimedia section and make sure 'Show Pictures' is checked. This is not a security setting, it is a user preference. I'm not sure what DX9 is.

thumbkin
04-21-2005, 08:28 PM
I checked those settings -- no dice. Turned off all of IE's little "helpful" settings like automatic image dithering, the image toolbar, etc, no help.

Comes up just fine and dandy in Firefox 1.03.

By DX9 I meant the Direct X effects that work in IE. At first I thought I need a Direct X update, but I'm already on 9.0c.

Can anyone duplicate this error?

And if one can, is there a way to detect DirectX version on the client and then write a plain vanilla image to the layer w/o the effects (as it does for non IE browsers)?

And thanks for the nice comments on the pics -- Randi is very good (and available for shoots in the NY area if anyone wants to hire her).... I just threw the site together for her....

-scott-

kiddo
02-14-2006, 07:04 AM
I am using the modification to the thumbnail viewer script that allows linking to html files (instead of just images) and it works great except in Safari where it just repeats the first mouseover file for each thumbnail. Does anyone have any suggestions for a fix for this?

This is what i'm working on...(I'm open to any new script suggestions that will achieve the same effect.)

my project (http://www.jeanlaughton.com/new-laughton/gowest2.html)

Thanks

jscheuer1
02-14-2006, 12:18 PM
kiddo,

I've looked over your code and not being all that familiar with Safari, it would be hard to say. A fine point - is the one image that Safari will show this one? :

images/go-west/dodge.jpg

If so, the script isn't working at all in Safari as, that one is hard coded into the HTML part of the page.

If the script can be made to work in Safari using the image syntax rather than the text syntax, it would be worth considering using that. The only advantage I see in the text syntax is the switching of the pages via links on them. Something to approximate that action could be devised for an image only approach. If you are interested, set up a demo and see if it will work in Safari using the image syntax only approach. If it does work post a link, I'll see what I can whip up for controls.

kiddo
02-15-2006, 06:05 PM
John:

Thanks for your offer of assistance.

I put up an image-based-thumbnail-demo at

demo (http://www.jeanlaughton.com/new-laughton/gowest.html)

The idea was to have the ability to mouseover the thumbs to see the large images, but also have the capability to navigate between the large images using buttons below them.

you can view the non-safari-friendly previous version at myoldfiasco (http://www.jeanlaughton.com/new-laughton/gowest2.html)

Also, I'm trying to get rid of the extra space at the end of the scrolling thumbnails, do you have any suggestions for that as well?

cheers,
Kiddo

jscheuer1
02-15-2006, 09:03 PM
See how this works out for you:

257

kiddo
02-15-2006, 10:33 PM
John,

You are my new most favorite swell person. The script works perfectly.

smiles,

Kiddo

jscheuer1
02-16-2006, 10:29 AM
Don't speak too soon, I made a small error in the script for the controls. This line:


curImg=curImg>0? curImg<dynimages.length? curImg : 0 : dynimages.length-1

should look like so:


curImg=curImg>-1? curImg<dynimages.length? curImg : 0 : dynimages.length-1