Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Mar 2008
    Location
    Dordrecht, Netherlands
    Posts
    2
    Member #
    16624
    I'm having a bit of trouble with my website.
    The idea is to click a thumbnail, which opens an image in a div at the bottom of the same page.

    Is there a way to do this, or am I going to have to resort to frames?
    Frames are sooo 1998

  2.  

  3. #2
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Oh, you'll want javascript for this. And with the many libraries there are for this, I'd suggest jQuery.

    HTML Code:
    <a href="#thumbnail" id="thumblink"><img src="thumbnail.jpg" alt="Click me for full image!" /></a>
    
    <div id="thumb">
      <img src="big-image.jpg" />
    </div>
    Code:
    $(document).ready(function(){
    
    $("#thumb").hide();
    $("#thumblink").click(function(){
      $("#thumb").show("slow");
    });
    
    });
    Feel free to ask if you don't understand the code, after checking out jQuery's site. Or you could use a different library like mootools or scriptaculous. Or maybe even write one from scratch...
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  4. #3
    Junior Member
    Join Date
    Mar 2008
    Location
    Dordrecht, Netherlands
    Posts
    2
    Member #
    16624
    I'm sorry, I just don't get JavaScript.
    I've done some editing but I'm not sure anymore.

    Where do I have to add the code blocks?

  5. #4
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    You can learn about how to start off with jQuery on it's own site, it's not very hard. Give the tutorials a few runs, then try out this code.

    Actually, you only need to use the usual script HTML tags to include the jquery file, then put that JS code in script tags in the head section, as usual. That's that.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.


Remove Ads

Posting Permissions

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

Search tags for this page

how to click on image and open in a new div

,

open image in a div

Click on a term to search for related topics.
All times are GMT -6. The time now is 02:47 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com