PDA

View Full Version : Placing Enlarged Thumbnails And Adding Text To Enlarged Thumbnails



angel1
05-02-2011, 04:49 AM
1) Script Title: Adding Text To Enlarged Thumbnails

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

3) Describe problem: Hi to all,

I've got 2 small issues i'm experiencing.

i've learnt how to enlarge thumbnails from:

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

i've chosen to use the code from the 1st example in my site and i'm rather happy with my results. what i want to do is to be able to move the enlarged image more to the right of the thumbnail so it's proportional. i've tried to change the values on these codes but it doesn't move anywhere. this is my site so that perhaps it can give a better idea www.loftmidcentury.com:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="20%" valign="top">

IMAGE CODES ARE PLACED HERE. THUMBNAILS ARE ON LEFT SIDE OF PAGE

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

As you can see i've manipulated the <div...."width" to 1000px. i'm assuming that is where i change the integers to move the enlarged thumbnails.


My second problem is that using that same example, i notice that when i mouse over a thumbnail the caption appears by my cursor and although the same caption appears below the enlarged image i don't want that. i know where in the code that happens so i opted to keep it clear. what i want is to place text so that it appears under the enlarged image but not have the same appear as a caption when i mouseover the thumbnail.

in essence:
1. i would like to be able to place or move enlarged thumbnails where i want them.
2 i would like to add text or description of my enlarged thumbnails without having them captioned at the thumbnail where i mouse over them.

ddadmin
05-02-2011, 09:47 PM
For the enlarged images that load in the #loadarea DIV, to get them to appear more to the right of the thumbnail images, you'd just use CSS to add some margin targeting that DIV, for example:


<style>
#loadarea{
margin-left:200px;
}
</style>


i would like to add text or description of my enlarged thumbnails without having them captioned at the thumbnail where i mouse over them.

Sounds like you had the "title" attribute of each thumbnail link defined, though looking at your page now I don't see them.

angel1
05-02-2011, 11:05 PM
Hi,

i'm not sure where to place the div code:

<div id="loadarea" align="center" style="width: 1000px"></div>
<div id="loadarea2"></div>
</body></p>

<style>#loadarea{margin-right:200px;}</style> <----where do i place this?

and yes i left the "title" attribute empty. i don't wish to use captions. i would like to have the text appear when the enlarged image appears instead. is there a way for me to accomplish this?

MicrO_IcE
05-02-2011, 11:27 PM
hy. please help me with the same script. I want to make the enlarged image to apear in the left or right of the thumbnails, but I don't know how... at me, apears under the thumbnails :| and another problem... where I most modify to make the first thumbnail image to be enlarged already when I acces the page? please help me

I whant to make something like this: http://cms.template-help.com/prestashop_29758/product.php?id_product=3