Thumbnail OnClick Display Enlarged Image in Same Window

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Nicole1307
    New Member
    • Feb 2010
    • 3
    #1

    Thumbnail OnClick Display Enlarged Image in Same Window

    Hi I'm trying to put together an Image Gallery. Everytime you click on an image it opens a new browser window. I want the Enlarged Imge to open in the same window in a designated area ('Box2'). How can I make this work???

    Here's the code:
    Code:
    </head>
<logo />
<body>
<div id="container">
<div id="Box1">
  <p><button /></p>
  <p><button /></p>
  <p><button/> </p>
</div>
<div id="Box2"><img src="" alt="" name="PlaceHolder" width="500" height="333" id="PlaceHolder" /> </div>
<div id="Box3">
  <div align="center">
    <p>&lt; </p>
    </div>
</div>
<div id="Box4">
  <a href="mg_site/images/large/1.gif" target="_blank"><img src="file:///Macintosh HD/Users/damianwilkinson/Desktop/mg_site/images/thumbnails/1th.gif" alt="1th" width="200" height="133" border="0" longdesc="mg_site/images/thumbnails/1th.gif" /></a>
  <a href="mg_site/images/large/2.gif" target="_blank"><img src="file:///Macintosh HD/Users/damianwilkinson/Desktop/mg_site/images/thumbnails/2th.gif" alt="2th" width="200" height="133" border="0" longdesc="mg_site/images/thumbnails/2th.gif" /></a>
  <a href="mg_site/images/large/3.gif" target="_blank"><img src="mg_site/images/thumbnails/3th.gif" alt="3th" width="200" height="133" border="0" longdesc="mg_site/images/large/3.gif" /></a>
  <a href="mg_site/images/large/4.gif" target="_blank"><img src="file:///Macintosh HD/Users/damianwilkinson/Desktop/mg_site/images/thumbnails/4th.gif" alt="4th" width="200" height="133" border="0" longdesc="mg_site/images/thumbnails/4th.gif" /></a>
  <a href="mg_site/images/large/5.gif" target="_blank"><img src="file:///Macintosh HD/Users/damianwilkinson/Desktop/mg_site/images/thumbnails/5th.gif" alt="5th" width="200" height="133" border="0" longdesc="mg_site/images/thumbnails/5th.gif" /></a></p>
</div>
<div id="Box5">
  <div align="center">
    <p>&gt; </p>
    </div>
</div>
</div>
</div>

</body>
</html>
    Last edited by gits; Feb 13 '10, 05:33 PM. Reason: added code tags
    Tags: div, images, scripting, target
    • Markus
      Recognized Expert Expert
      • Jun 2007
      • 6092
      #2
      Change those target attributes to target="_parent "

        Comment

        • Nicole1307
          New Member
          • Feb 2010
          • 3
          #3
          I've tried and It does open in that same window but it's just the image, I want the whole site to be viewed at the same time.

            Comment

            • Markus
              Recognized Expert Expert
              • Jun 2007
              • 6092
              #4
              Sorry, I misread. You'll need to use javascript. I'll move the question over there.

                Comment

                • Nicole1307
                  New Member
                  • Feb 2010
                  • 3
                  #5
                  Thanks, I really have no idea what I'm doing.

                    Comment

                    • gits
                      Recognized Expert Moderator Expert
                      • May 2007
                      • 5388
                      #6
                      use an onclick handler that sets the src-attribute of the img in the box2 div. you might give the image an id and then use:

                      Code:
                      document.getElementById('imgId').src = "yourImageSrc';
                      kind regards

                        Comment

                        Previous template Next
                        Working...