Results 1 to 4 of 4

Thread: Placing Enlarged Thumbnails And Adding Text To Enlarged Thumbnails

  1. #1
    Join Date
    Apr 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Placing Enlarged Thumbnails And Adding Text To Enlarged Thumbnails

    1) Script Title: Adding Text To Enlarged Thumbnails

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...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/dynamici...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.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <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.
    DD Admin

  3. #3
    Join Date
    Apr 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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/prestas...p?id_product=3
    Last edited by MicrO_IcE; 05-02-2011 at 11:32 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •