jquery opens 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


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.