PDA

View Full Version : Help Enlarging Thumbnails



angel1
04-28-2011, 04:46 AM
1) Script Title:

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

3) Describe problem: I have a site: ( www.loftmidcentury.com ) where i have thumbnails on the left of my page which i want to have enlarged to the right of page and at the bottom of that the description of the image.

the script i wish to use is the first example shown on http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

someone's assisted me as far as they could i suppose and with a bit of tweaking i did get the result i wanted....sort of but still don't understand what i'm doing wrong. I've followed the instructions best i could by putting the script at the <head> and downloaded the thumbnail viewer but:

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'm not understanding. 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):

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

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.
5. when the thumbnail is moused over there is a caption. i don't want this to happen. i've tested it by putting a description of the image on the part when it's enlarged and when i moused over the thumbnail the caption shows the description.

I apologize if i have such a long list of issues i have to tweak. can anyone help me?

angel1
04-28-2011, 04:49 AM
The first example in: http://www.dynamicdrive.com/dynamici...thumbnail2.htm is the one i want to use just to clarify.

ddadmin
04-29-2011, 04:29 AM
The first thing you'll probably want to do is get the enlarged image to appear to the right of the thumbnail links. This is done simply by yourself inside the relevant code's markup. Something like the following should do it:


<div style="float:left;width:250px">
<a href="ball chair.bmp" rel="enlargeimage" rev="targetdiv:loadarea" title="Eero Aarnio Ball Chair">Eero Aarnio Ball Chair</a><br />
<a href="arco lamp 2.jpg"rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade">Arco
Lamp</a><br />
<a href="corona chair 2.jpg"rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade">Corona Chair</a><br />
<a href="swan chair.jpg"rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade">Swan Chair</a><br />
<a href="artichoke lamp.jpg"rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade">Artichoke Lamp</a><br />
<a href="barrel chair.jpg"rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade">Barrel Chair</a><br />
<a href="barcelona bench 5.jpg"rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade">Barcelona Bench</a><br />
<a href="mies daybed 2.jpg"rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade">Mies Daybed</a><br />
</div>


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

<br style="clear:left" />

The rest of the issues at a glance it seems you have resolved already...

angel1
04-29-2011, 12:37 PM
whoa...woke up this morning...and now my thumbnails don't enlarge. it worked last night. what the hell?

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

angel1
04-29-2011, 01:17 PM
what i found with the code below 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). it's similar to the instructions provided at the link http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm:

<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-01-2011, 05:00 AM
I've got most of what i wanted to acheive. I suppose it will take a bit more tweaking to make my page perfect. Many thanks to dynamic drive for their support!!!