PDA

View Full Version : Enlarging thumbnail images



angel1
04-26-2011, 05:38 AM
1) Script Title:

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

3) Describe problem: I would like to have thumbnails on left of page enlarged to right of screen on mouseover and have description or details of image underneath it (captions or text). I've found the exact example of this. It's the first example at the link: http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm . However I don't want the image hyperlinked nor do I want the mouse to show captions when I mouseover a thumbnail. I only want the enlarged image to show description of the thumbnail underneath. I've tried viewing the source of the example and decipher the codes myself as well as followed the instructions provided below which did not give me the desired result.

I've given myself 3 more days to launch my site. Other than updating my site is pretty simple and almost complete. On my site: www.loftmidcentury.com , I have a scrolling marquee and hope that if anyone is able to help me with the coding that it will not affect the marquee.

Thank you to anyone and everyone who can help me with this.

Nile
04-26-2011, 05:41 AM
In your rev, if you do something like:


rev="enabletitle:no,link:undefined"

Then it shouldnt show the caption, and I dont think the link should open in a new window. If it still does, get rid of the link:undefined, and add onto the <a> itself:

onclick="return false;"

Tell me how that goes

angel1
04-26-2011, 06:16 AM
Hi nile,

I've tried those and wasn't successful. I suppose it's because I was trying to find the code by viewing the source but couldn't find it at all. Or it could be I wasn't pasting it properly in my coding. Would you be able to help me find the code for the first example? I'm trying to as well by trying to find the beginning and end of the code.

Nile
04-26-2011, 06:19 AM
Sure. Can I have a page that you're using this script on? I couldn't seem to find it on the page you linked me to.

angel1
04-26-2011, 07:33 AM
www.loftmidcentury.com

Thank you nile. I delete what I've pasted so I don't get my lost in my own coding so that's probably why you can't see it.

Nile
04-26-2011, 04:13 PM
You would REALLY need to put in the script BEFORE I can help you.

angel1
04-26-2011, 08:53 PM
That is what I'm trying to do. I'm trying to figure out where the script starts and ends. However, this is the code I was able to retrieve and test but all it does is hyperlink the images when clicked which i don't want:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="20%" valign="top">
<a href="../dynamicindex17/sofagirllarge.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="Nothing better than relaxing on the sofa sometimes">
<img border="0" src="../dynamicindex17/sofagirl.jpg" width="91" height="61"></a><br>
<br>
<a href="../dynamicindex17/redleaveslarge.jpg" rel="enlargeimage" rev="targetdiv:loadarea">
<img border="0" src="../dynamicindex17/redleaves.jpg" width="80" height="58"></a><br>
<br>
<a href="../dynamicindex5/imagemap.gif" rel="enlargeimage" rev="targetdiv:loadarea" title="I never did quite master the game of pool">
<img border="0" src="../dynamicindex5/imagemap.gif" width="75" height="69"></a></td>
<td width="80"><!--webbot bot="HTMLMarkup" startspan --><div id="loadarea" style="width:510px; height: 220px"></div><!--webbot bot="HTMLMarkup" endspan i-checksum="11986" --></td>

These are codes of the images I want to work on (I hope it helps):
<p>
<left><img src="arco lamp 2.jpg" width="75px" height="75px" border="0" /><font color="#666666">Arco Lamp</font>
<p>
<left><img src="corona chair 2.jpg" width="75px" height="75px" border="0" /><font Size=3><font color="#666666">Corona chair</font>
<p>
<left><img src="swan chair.jpg" width="75px" height="75px" border="0" /><font color="#666666">Swan Chair</font>
<p>
<left><img src="artichoke lamp.jpg" width="75px" height="75px" border="0" /><font color="#666666">Artichoke Lamp</font>
<p>
<left><img src="barrel chair.jpg" width="100px" height="75px" border="0" /><font color="#666666">Barrel Chair</font>
<p>
<left><img src="barcelona bench 5.jpg" width="100px" height="75px" border="0" /><font color="#666666">Barcelona Bench</font>
<p>
<left><img src="mies daybed 2.jpg" width="100px" height="75px" border="0" /><font color="#666666">Mies Daybed</font>

Nile
04-26-2011, 08:56 PM
Follow and read all the instructions on this (http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm) page, please.

angel1
04-26-2011, 08:58 PM
I'm sure that I can fix the rel and the caption when moused over problem. I just want the thumbnails to be enlarged to the right of my page with the description or text below it. I'll keep searching for the code myself and sorry if the codes I gave you don't help.

angel1
04-26-2011, 08:59 PM
I've tried to but I will try again.

Nile
04-26-2011, 09:00 PM
In order to have the images popup bigger on the right side of the page, you need to include the javascript.

angel1
04-26-2011, 09:04 PM
I'll read the page again and test or view the source again.

angel1
04-27-2011, 12:54 AM
ok. i've followed the instructions best i could and implemented them and now i am left with 2 hyperlinked text. I understood one line being the thumbnail and the next line with the same imaged to be enlarged.

<div style="width:300px;height:700px;overflow:auto;border-width:2px;border-color:000000;border-style:dotted;">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

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

/***********************************************
* 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
***********************************************/

</script>
<a href="ball chair.bmp" rel="enlargeimage" rev="targetdiv:loadarea" title="Eero Aarnio Ball Chair">Ball Chair</a><br />

<div id="loadarea" style="width: 600px"></div>

<br /><br />

<a href="ball chair.bmp" rel="enlargeimage" rev="targetdiv:loadarea2,trigger:click,preload:none,fx:reveal">Ball Chair(click)</a><br />

<div id="loadarea2"></div>

angel1
04-27-2011, 01:28 AM
I've played around with it and now that i add a title whenever i mouseover the NOW text link the caption by the mouse. Again, images are enlarged in a hyperlinked rather than appear on the right.

<div style="width:300px;height:700px;overflow:auto;border-width:2px;border-color:000000;border-style:dotted;">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

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

/***********************************************
* 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
***********************************************/
</script>
<a href="Ball Chair.bmp" rel="enlargeimage" rev="targetdiv:loadarea" title="Eero Aarnio Ball Chair">Eero Aarnio Ball Chair</a><br />

<div id="loadarea" style="width: 600px"></div>

<br /><br />

<a href="Ball Chair.bmp" title="this is a really cool chair"rel="enlargeimage" rev="targetdiv:loadarea2,trigger:mouseover,preload:yes,fx:fade">Eero Aarno Ball Chair</a><br />

<div id="loadarea2"></div>

angel1
04-27-2011, 02:00 AM
Hi Nile,

gonna take a break...this is how i left my page coded last. again the intended image is a text hyperlink neither of which i want. i'll try again later on tonight and again thank you very much for trying to help me:

www.loftmidcentury.com


<p>
<div style="width:300px;height:700px;overflow:auto;border-width:2px;border-color:000000;border-style:dotted;">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

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

/***********************************************
* 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
***********************************************/
</script>
<a href="Ball Chair.bmp" rel="enlargeimage" rev="targetdiv:loadarea" title="Eero Aarnio Ball Chair">Eero Aarnio Ball Chair</a><br />

<div id="loadarea" style="width: 600px"></div>

<br /><br />

<a href="Ball Chair.bmp"rel="enlargeimage" rev="targetdiv:loadarea2,trigger:mouseover,preload:yes,fx:fade">Eero Aarnio Ball Chair</a><br />

<div id="loadarea2"></div>

Nile
04-27-2011, 02:30 AM
You didn't upload thumbnailviewer2.js to your server, therefore http://www.loftmidcentury.com/thumbnailviewer2.js is not a valid file.

Also - move the script to the <head> part of your document, like the instructions say.

angel1
04-27-2011, 04:16 AM
i've now put the script to the<head> part and i now downloaded thumbnailer 2.js. this is a new thing for me and i was weary of downloading it for fear of some sort of virus and thought it was optional. i'm gonna try it now.

Nile
04-27-2011, 04:17 AM
Don't worry. It shouldn't contain a virus. If you are worried about it - you may click on it and copy the source of it into your own file named thumbnailviewer2.js

angel1
04-27-2011, 04:25 AM
it worked!!!...but it was the top texted hyperlink that invoked it. now i will try and figure out how to change that from text to thumbnail (which i thought i did) and i don't want it hyperlinked. i also noticed that when it's enlarged the image stays within the scrolling marquee and not to the right of the page...hmmm...lemme try some playing around.

angel1
04-27-2011, 04:41 AM
nile, another problem i notice is that when one of the "thumbnails" is moused over it does enlarge but it should disappear when another is chosen. there is something in the code i don't quite understand now:

<a href="ball chair.bmp" rel="enlargeimage" rev="targetdiv:loadarea" title="Eero Aarnio Ball Chair">Eero Aarnio Ball Chair</a><br />

<div id="loadarea" style="width: 600px"></div>
<br /><br />
<a href="ball chair.bmp"rel="enlargeimage" rev="targetdiv:loadarea2,trigger:mouseover,preload:yes,fx:fade">Eero Aarnio Ball Chair</a><br />
<div id="loadarea2"></div>

to my understanding of the instructions the top link is the thumbnail and the lower is the enlarged image. but as you see on my page, they both show up as independant images (or text)...

angel1
04-28-2011, 12:43 AM
Hi Nile,

I'm getting close to what I want to acheive but I still don't understand what I'm doing wrong:

1. I notice is that when one of the "thumbnails" is moused over it does enlarge but it should disappear when another is chosen. There is something in the code i don't quite understand now:

<a href="ball chair.bmp" rel="enlargeimage" rev="targetdiv:loadarea" title="Eero Aarnio Ball Chair">Eero Aarnio Ball Chair</a><br />

<div id="loadarea" style="width: 600px"></div>
<br /><br />
<a href="ball chair.bmp"rel="enlargeimage" rev="targetdiv:loadarea2,trigger:mouseover,preload:yes,fx:fade">Eero Aarnio Ball Chair</a><br />
<div id="loadarea2"></div>

to my understanding of the instructions the top link is the thumbnail and the lower is the enlarged image. but as you see on my page, they both show up as independant images (or text)...

2. The images I want enlarged are still text instead of thumbnails.
3. They are still hyperlinkled. I don't want any actions upon a click
4. The enlarged image does not appear on the right of the scroll marquee.

Can you help me?

lasa2
04-28-2011, 10:53 AM
Angel1

The full inst. are below the images step 1 and step 2:
If you are getting the image to appear but its in the wrong place...
I think what you are missing is to place your <div id="loadarea" style="width: 600px"></div> were you want the larger image to appear.

Maybe...

Lasa2

angel1
04-28-2011, 01:45 PM
i've tried that...and the image is still within the scroll marquee not to the right of the page where i need them to be. and what i want to mouse over is text instead of the thumbnail.

Nile
04-29-2011, 12:01 AM
There are two things going on here.

1. Your image - your image isn't actually defined with the <img> element, but with a <a> (don't worry, you're doing that part right). Each image has a "rev" attribute where the load area is defined. For example:


rev="targetdiv:loadarea"

That image will load inside the div that has the id of "loadarea"
2. The loading div - the loading div where images should appear. The images only appear in this div if it's defined by the targetdiv in the rev.

If you wanted to group the images, instead, you'd need to adjust your code to this:


<a href="ball chair.bmp" rel="enlargeimage" rev="targetdiv:loadarea" title="Eero Aarnio Ball Chair">Eero Aarnio Ball Chair</a><br />
<a href="ball chair.bmp"rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade">Eero Aarnio Ball Chair</a><br />

<div id="loadarea" style="width: 600px"></div>

Where both divs have the same target div.

angel1
04-29-2011, 02:19 AM
let me try that...*crosses fingers*.

angel1
04-29-2011, 04:16 AM
it worked! but they are no longer thumbnails. they are text now. with this code uploaded to my ftp shouldn't it be a thumbnail image and not text?:

<a href="ball chair.bmp" rel="enlargeimage" rev="targetdiv:loadarea" title="Eero Aarnio Ball Chair">Eero Aarnio Ball Chair</a><br />

i also tried to move the enlarged image to the immediate right of the thumbnail (or text in this case) but had no success. perhaps i'm not using the right integers?:

<div id="loadarea"> style="width: 600px"></div></left>

i'll play around a little with the code to get the thumbnail back.

Nile
04-29-2011, 11:50 AM
<div id="loadarea"> style="width: 600px"></div>

Remove the highlighted.

angel1
04-29-2011, 12:39 PM
whoa...woke up this morning...and now my thumbnails don't enlarge. it worked last night before i went to bed. hmmmm...

thank you btw niles for your help on all this and my apologies if i'm a complete idiot at this.

angel1
04-29-2011, 12:42 PM
never mind...i know what the problem is. i forgot i broke my thumb drive...shoot

angel1
04-29-2011, 01:12 PM
fixed what i thought was the problem but now still no enlarged images!!!....DANGIT!!!!

nile what i found with this code is that when my site is refreshed there appear 2 of the same that function the same (i've left it up on my site should you want to reference:

<a href="ball chair.bmp" rel="enlargeimage" rev="targetdiv:loadarea" title="Eero Aarnio Ball Chair">Eero Aarnio Ball Chair</a><br />
<a href="ball chair.bmp"rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade">Eero Aarnio Ball Chair</a><br />

i did remove: the lower of the 2 and everything faded and enlarged fine (besides the issue i'm experiencing now)

the problem i'm experiencing now is that NOW there are no enlargements. i busted my thumb drive and had to move everything to my C: but since all my images are uploaded into my ftp it shouldn't matter but now i can't figure out why i nothing gets enlarged. i didn't do anything to it after your suggestion last night.

angel1
05-05-2011, 05:14 AM
Hi Nile'

rev="enabletitle:no,link:undefined" didn't work. It still hyperlinks when clicked and when I try to add text to the enlarged image it doesn't show. instead what happens is that the text (description of my item) appears underneath the thumbnail.

I've also removed "link:undefined", and don't know where to add onclick="return false;" onto the <a>

Here is an example I've tried to edit:

<a href="artichoke lamp 6.jpg" rel="enlargeimage" rev="enabletitle:no,targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade,onclick="return false;"><img border="0" src="artichoke lamp 6.jpg" width="91" height="91"><span title="">Artichoke Lamp</span></a><br />

Where do I put text (description) of my item so it shows on the enlarged image without having it captioned?

Nile
05-10-2011, 11:59 AM
I'm sorry, I've been very busy. Did you figure this issue out? If not, I won't be able to help until may 23rd (I won't be home until then).