-
Jul 7th, 2020, 08:16 PM
#1
Thread Starter
PowerPoster
[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,
-
Jul 9th, 2020, 03:54 AM
#2
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,...
-
Jul 20th, 2020, 11:04 PM
#3
Member
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!!
-
Jul 20th, 2020, 11:13 PM
#4
Thread Starter
PowerPoster
Re: Trying to get a larger image to show in new window?
HarshShah,
That worked great! Thank you!
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|