CODEWITHSUNDEEP
jqueryhtmlvariablesclick
lharby
lharby

Reputation: 3265

jquery open image in new window

I have the following html:

<li><a href="#" filename="prettygirls_1"><img src="large/prettygirls_1.jpg" alt="Pretty Girls Doing Horrid Things" /></a></li>
<li><a href="#" filename="prettygirls_2"><img src="large/prettygirls_2.jpg" alt="Pretty Girls Doing Horrid Things" /></a></li>

I am trying to write some jquery that will pass the filename property into a variable and then open a large version of the source file in a new window.

My jquery looks like this (I know this is incorrect):

$('div#slider ul li a').click(function() {
    var img_to_load = $(this).attr('filename');
    filePath = 'large/'; 
    $('<a href=" ' + filePath + img_to_load + '.jpg' + 'target="_blank"' + '</a>').html();
    //alert (img_to_load);
});

How do I construct this?

All the code is actually available here: http://dev.jessicaharby.com/work/tempindex.cfm

Upvotes: 2

Views: 25100

Answers (4)

abcd
abcd

Reputation: 3210

Try this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery demo</title>
  <script src="jquery-1.9.1.js"></script>
</head>
<body>
<script>
$(document).on("click", "#btn", function(event) {
    window.open("http://www.google.com", '_blank');
});
</script>
<input type=button name="btn" id="btn">
</body>
</html>

Upvotes: 0

gaurang171
gaurang171

Reputation: 9080

Now, solution for above query has been provided by codebins. So, try it on http://codebins.com/codes/home/4ldqpb5

$(function() {
    $('div#slider ul li a').click(function(e) {
        e.preventDefault();
        var imageWin;
        var imageUrl = $.trim($(this).attr('filename')),
            imageWin = window.open(imageUrl);

    });
});

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

I'd suggest:

$('ul li a').click(function(e) {
    // prevents the default action of the link's click-event ('e'), above
    e.preventDefault();
    // finds the 'img' element within the 'a', using 'find()`
    // and converts that, using '[0]' to a plain DOM node
    // and retrieves the full, absolute, 'src' from that element
    var img_to_load = $(this).find('img')[0].src,
        imgWindow = window.open(img_to_load, 'imgWindow');
});​

JS Fiddle demo.

The above will open any subsequently clicked images into the same window (reloading the opened-window with the new image element), as it will first see if there's a window open with the same name (in this case 'imgWindow', the second parameter in the window.open() function) and, if it exists, re-use it. Otherwise it'll open a window with that name.

If you want images to open in their own window every time, simply omit that parameter and simply use:

$('ul li a').click(function(e) {
    e.preventDefault();
    var img_to_load = $(this).find('img')[0].src,
        imgWindow = window.open(img_to_load);
});​

JS Fiddle demo.

References:

Upvotes: 1

uınbɐɥs
uınbɐɥs

Reputation: 7341

Try this:

JS:

window.open(filePath + img_to_load + '.jpg', '', 'width=640,height=480');

Change the width and height to suit, or if you cannot specify an exact width and height, just use

window.open(filePath + img_to_load + '.jpg');

See window.open - MDN.

Because it is opened on the click event, it won't be blocked by pop-up blockers, as long as the URL being opened is in the same domain.

Upvotes: 4

Related Questions