www.webdeveloper.com
Results 1 to 5 of 5

Thread: Click one image to replace another

  1. #1
    Join Date
    May 2010
    Posts
    1

    Click one image to replace another

    Hi. I have found some great code here to do pretty much anything I have tried, but one thing that I seem unable to find is how to click on one image to replace another on the same page. For example, I have a main picture with some thumbnails below it. I would like to click on the thumbnail and it be enlarged on the main picture. I have seen something similar using frames, but if possible I would like to avoid that. Is this possible in html or javascript??? help! Thanks.

  2. #2
    Join Date
    Mar 2010
    Location
    Singapore
    Posts
    367
    Quote Originally Posted by fattyatkinson View Post
    Hi. I have found some great code here to do pretty much anything I have tried, but one thing that I seem unable to find is how to click on one image to replace another on the same page. For example, I have a main picture with some thumbnails below it. I would like to click on the thumbnail and it be enlarged on the main picture. I have seen something similar using frames, but if possible I would like to avoid that. Is this possible in html or javascript??? help! Thanks.
    When you click on the thumbnail, the thumbnail slowly grow big OR
    click on the thumbnail, the thumbnail enlarged picture appear on the main picture ?

    For the latter it is easier, you need to prepare for each thumbnail their equivalent enlarged picture. Then bind a onclick callback on the thumbnail. Inside the onclick load the equivalent enlarged picture onto the main picture.

    For the former, the effects I not so sure, you can explore jQuery gallery. I know they have "explode into pieces" effects but for small slowly become big effects I not so sure.

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    Imo you don't need separate thumbnail and enlarged image files. You can just set a smaller width in the <img> for the thumbnail.

    Each thumbnail <img> then just needs an onclick function that resets the .src for the enlargement <img> to the .src of the thumbnail.

    I would also preload the images to avoid any download delays when displaying an enlargement.

  4. #4
    Join Date
    Mar 2010
    Location
    Singapore
    Posts
    367
    Quote Originally Posted by sohguanh View Post
    For the former, the effects I not so sure, you can explore jQuery gallery. I know they have "explode into pieces" effects but for small slowly become big effects I not so sure.
    Hi I just browse through jQuery and they have something very similar to what you want. Unfortunately the example is illustrated using text wordings but I think the concept should apply to images also. The thumbnail when clicked slowly enlarge to become big.

    http://jqueryui.com/demos/toggleClass/

    Click on the "Run Effect" button to see the effect. Note it has a time component argument such that you can control the effect speed. I believe you can achieve the above effect in a couple lines of JavaScript code.

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    This is a JavaScript problem, thus I will move this Thread to the proper JavaScript Forum

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles