CODEWITHSUNDEEP
jqueryajaximagedialogload
moudstar
moudstar

Reputation: 105

jQuery Dialog, load href as an image source into a dialog

I am trying to open an image into a jQuery dialog. When I click on href link, I want to load this href into a dialog.

Markup:

        <a href="www.blahblahblah.com/blah.jpg" class="slideshow_zoom">Link</a>

Jquery code:

$('.slideshow_zoom').each(function() {
    var $link = $(this);

    var $dialog = $('<div></div>')
         .load($link.attr('href'))
         .dialog({
               autoOpen: false,
               resizable: false,
               modal: true,
               width: 1000,
               closeOnEscape: true,
               dialogClass:'zoom'
            });

        $link.click(function() {
            $dialog.dialog('open');

            return false;
    });
});

This markup and jquery code only produce a dialog with nothing in it. Im guessing it is not actually loading the href...or maybe it is that the href needs to be changed into an image src in order for it to be viewed. Thanks for any help!

Upvotes: 1

Views: 3054

Answers (1)

Rodney G
Rodney G

Reputation: 4826

Just call the .dialog() method on an img:

var $dialog = $('<img src="' + $link.attr('href') + '" />')
    .dialog({
        autoOpen: false,
        resizeable: false,
        modal: true,
        width: 1000,
        closeOnEscape: true,
        dialogClass: 'zoom'
    });

Upvotes: 3

Related Questions