Results 1 to 4 of 4

Thread: [RESOLVED] Trying to get a larger image to show in new window?

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,000

    Resolved [RESOLVED] Trying to get a larger image to show in new window?

    I'm building a simple image viewer web page. There is javascript code to load all the images. The html code below is styled to load the images into a div element on the page.

    This first code snippet is what I have now and it works fine
    Code:
    <div class='images'>
         <a href=''><img src='img1.jpg' width='450' height='auto'>
         <div class='caption'></div></a>
    </div>
    What I want to do is....when the thumbnail image is clicked on, I want the full-size image to appear on a new page.

    Can I do this below:
    Code:
    <div class='images'>
         <a href=''><img src='img1.jpg' width='450' height='auto' onclick="<img src='img1.jpg' target='_blank'>">
         <div class='caption'></div></a>
    </div>
    Is this possible? If not, what is the best way to perform this?

    Thanks,
    Blake

  2. #2
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

    Re: Trying to get a larger image to show in new window?

    You can use a div to make it look like a popup (or modal window) within your page.
    Here's the tutorial: https://www.w3schools.com/howto/howto_css_modals.asp

    Otherwise you can simply use the window.open() method, passing the full url of the image so that it will be displayed in another tab/window.

    Hope it helps

    If my post was helpful to you, then express your gratitude using Rate this Post.
    And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
    My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet

    Social Group: VBForums - Developers from India


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

  3. #3

    Re: Trying to get a larger image to show in new window?

    Hii blakemckenna,

    Try like this...

    JS

    Code:
    function swipe() {
       var largeImage = document.getElementById('largeImage');
       largeImage.style.display = 'block';
       largeImage.style.width=200+"px";
       largeImage.style.height=200+"px";
       var url=largeImage.getAttribute('src');
       window.open(url,'Image','width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');
    }
    HTML

    Code:
    <img src="abc.jpg" onClick="swipe();"/>
    Hope it helps you!!

  4. #4

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,000

    Re: Trying to get a larger image to show in new window?

    HarshShah,

    That worked great! Thank you!
    Blake

Posting Permissions

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



Click Here to Expand Forum to Full Width