0

I am loading a MODAL that is fed an image that I get and load on click. Can someone please explain how to load and then display my image on click so that the dialog will center itself properly. As it stands, the Dialog doesn't know the image size so it is loading off center. I tried using the .load function but I don't know where to put it; because it gave me errors. The below code is fully functional but I need it to pre-load desIMG before I feed it to the dialog so it knows the size.

function thumbNailModal() {
    $('.thumb').click(function() {
        picDES = document.getElementById(this.id).getAttribute('id');
        var desIMG = $('<img/>', {
                        "class":"inline",
                        src: '/images/design/full/' + picDES
                    });
        $(desIMG).dialog(
            {
                modal:      true,
                draggable:  false,
                title:      'Designs',
                height:     'auto',
                width:      'auto',
                open:       function(){
                    jQuery('.ui-widget-overlay').bind('click',function(){
                        jQuery(desIMG).dialog('close');
                    })
                }
            }
        );
        $(".ui-dialog-titlebar").hide();
    });
}

EDIT

 function thumbNailModal() {
        $('.thumb').click(function() {
.load(
            picDES = document.getElementById(this.id).getAttribute('id');
            var desIMG = $('<img/>', {
                            "class":"inline",
                            src: '/images/design/full/' + picDES
                        });
)

I want something more like that. Where you click and THEN it loads. Not just preloading all the images as soon as you load the page.

ILikeTurtles
  • 1,012
  • 4
  • 16
  • 47
  • This post has a solution - http://stackoverflow.com/questions/476679/preloading-images-with-jquery – Jay Blanchard Dec 03 '12 at 22:49
  • But that requires me to preload the image? I don't want to load it unless they click on it... – ILikeTurtles Dec 03 '12 at 22:50
  • In order to find the image dimensions you're going to have to preload it somehow. jQuery cannot measure something that is not in the DOM. – Jay Blanchard Dec 03 '12 at 22:52
  • I edited the question. Maybe it is clearer now? I am trying to preload the image on click. So they click on the image, it gets loaded, then fed to the dialog. – ILikeTurtles Dec 03 '12 at 22:53

0 Answers0