jQuery Degradable Popups

Do you want to have image preview popups, but want the links to still work if JavaScript is disabled? The following just changes the href value of the link by inserting the URL it was pointing to into a JavaScript function call.

function pu_preview(url)
{
var width = 760;
var height = 360;
var win_left = (screen.width-width)/2;
var win_top = (screen.height-height)/2;
new_window = window.open(url,'video_player_popup','width='+width+',height='+height+',top='+win_top+',left='+win_left+',toolbar=no,directories=no,status=no,scrollbars=yes,resizable=yes');
if (window.focus)
{
new_window.focus()
}
}
$(document).ready(function(){
$("#gallery a").attr("href", function() { return "javascript:pu_preview('"+this.href+"');" });
});

Here is what your HTML might look like

<a href="http://example.com/images/image.jpg"><img src="http://example.com/images/image_thumb.jpg" alt="" /></a>

Tags: ,

Comments -49-0 of 3 to “jQuery Degradable Popups”

  1. -49 · Anonymous says:

    this doesn’t work in IE 7.

  2. -48 · Aaron says:

    Yeah…this doesn’t work in IE 7 for me either. It works in EVERY browser but IE. Solutions?

  3. -47 · blogger says:

    It works for me in IE7. Perhaps you have your popup blocker settings on and on the High setting.

    You can check them by going to Tools -> Internet Options, then go to the Privacy tab. Then click on Settings, you probably have it set to High.

Leave a Comment

Comments are reviewed before publishing to prevent spam.