jquery.ui.dialog eklentisini kullanarak pencere içinde resim göstermek

Eğer jquery.ui hakkında bilginiz varsa muhtemelen ui.dialog eklentisini duymuşsunuzdur. Bu eklenti sayfanızda sürüklenebilir ve boyutlandırılabilir pencereler oluşturmanızı sağlar. Ancak bu eklentiyi kullanırken içeriğe göre pencerenin boyutunu önceden belirlemeniz ve eklentiye aktarmanız gerekiyor. Geçenlerde dialog eklentisiyle boyutu belli olmayan bir resmi göstermek üzere bir çalışma yaptım ve paylaşmak istedim. Aşağıdaki işlevlerden newid() işlevi sayfada benzersiz id değeri oluşturan basit bir işlev. Takip eden pageWidth ve pageHeight işlevleri de (internetten buldum) sayfanın görünür boyutunu almak için kullandığım işlevler. newWindow işlevi ise daha sonra oluşturacağımız pencere için yeni bir div oluşturup ona ait seçici ifadesini dönüyor. showImageWindow işlevi de parametre olarak aldığı dosya adını ve başlık değerini kullanarak yeni bir pencere oluşturuyor ve pencerenin boyutlarını resim ekrana sığacak şekilde küçültmek üzere boyut oranını koruyarak img imindeki width yada height değerlerini ayarlıyor. Bu yöntemle genel lightbox eklentilerinin aksine aynı anda birden fazla resim penceresi gösterilebiliyor.

var uid=0;

function newid (){ return ++uid;}

function pageWidth() {
    return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ?       document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}

function pageHeight() {
    return  window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ?  document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}

function newWindow(title){
    var id;
    var t;
    t='';
    if(title!=undefined){
        t=' title="'+title+'" ';
    }
    id = 'dialog_'+newid();
    $('body').append('<div id="'+id+'" '+t+'class="flora"></div>');
    return '#'+id;
}

function showImageWindow(file,title){
    $imgWindow = $(newWindow(title));
    img = new Image();
    img.src=file;
    img.onload=function(){
        w = img.width;
        h = img.height;
        r = w/h;
        pagew = pageWidth();
        pageh = pageHeight();
        attr =null;
        val ='';
        if(w>(pagew-20)){
            w=pagew-20;
            h = w/r;
            attr ="width";
            val = w;
        }
        if(h>(pageh-50)){
            h=pageh-50;
            w=h*r;
            attr ="height";
            val = h;
        }
        $imgWindow.hide().html(" <img src='"+file+"' /> ");
        $imgWindow.find("img[src='"+file+"']").click(function(){
            $imgWindow.dialog("destroy");
        });
        if(attr!=null){
            $imgWindow.find("img[src='"+file+"']").attr(attr,val);
        }
        $imgWindow.show().dialog(
        {
            width:parseInt(w)+20,
            height:parseInt(h)+50,
            modal: true,
            overlay: {
                opacity: 0.5,
                background: "black"
            }
        });
        $(".ui-dialog-titlebar-close").blur();
    };
}