Using jquery to have image when clicked link to URL in new tab

Question

I have tried many things to get this to work, I am basically trying to have the lightbox photo show up(which it does), and when clicked on, opens up a new tab with a specified URL. The image that I am trying to have link to a url in new tab is "images/ad1.jpg", which is in the code. Please show me the proper code and way it needs to be inputted so I can do this. I greatly appreciate everyones support on this and the great community of stackoverflow. Thank you.

(function($){
        $(window).load(function(){
            if(jQuery.isFunction(jQuery.fn.prettyPhoto)) {
                $.prettyPhoto.open(
                    "images/ad1.jpg", // Image to be opened
                    "title",    // Title of the pop-up
                    "desc."     // The description
                );
                setTimeout(function() {
                    $.prettyPhoto.close();
                }, 10000); // autoclose after 10 seconds
            } else {
                console.log("PrettyPhoto is not defined."); // log this message
            }
        });
    })(jQuery);

FYI: You are defining `$` as `jQuery` in your function call and then referring to it as `jQuery` in your code. while this does work, it sort of defeats the purpose of passing it in as `$`. — Gary Storey, Aug 28 '14 at 15:27

Wheeler · Answer 1 · 2014-08-28T15:38:24.107

You should modify jquery.prettyPhoto.js

$pp_pic_holder.find('.pp_previous, .pp_arrow_previous').bind('click',function(){
    $.prettyPhoto.changePage('previous');
    return false;
});

$pp_pic_holder.find('.pp_next, .pp_arrow_next').bind('click',function(){
   $.prettyPhoto.changePage('next');
   return false;
});

To

$pp_pic_holder.find('.pp_arrow_previous').bind('click',function(){
   $.prettyPhoto.changePage('previous');
   return false;
});

$pp_pic_holder.find('.pp_arrow_next').bind('click',function(){
    $.prettyPhoto.changePage('next');
    return false;
});

$(document.body).on("click", "#fullResImage", function(){
    window.open($(this).attr("src"));
})

I hope it will work.

Brian Dillingham · Answer 2 · 2014-08-28T15:39:45.043

This library has an option of image_markup, documentation, using that will avoid javascript solutions.

Add a link with target="_blank" within the image_markup option when you instance prettyPhoto

image_markup: '<a href="{path}" target="_blank"><img id="fullResImage" src="{path}" /></a>'

Example

$("a[rel^='prettyPhoto']").prettyPhoto({image_markup: '<a href="{path}" target="_blank"><img id="fullResImage" src="{path}" /></a>'});

Otherwise, you'd have to do something like this, jsFiddle Example

$(document.body).on('click', '#fullResImage', function(){
    window.open(this.src, '_blank');
});

Using jquery to have image when clicked link to URL in new tab

2 Answers2