Question

I am working on jquery ui dialog box to display multiple images. Here is my working code for a single image:

http://jsfiddle.net/pZMvf/

As you can see in above code I have one image with class userImage and it has a rel attribute which i am storing original width and height of image width|height and through css I have set this image size to 200px width and height 120px, So when user click on the image he get full size image.

Now my problem is i wants to add multiple images this way on page with diffrent sizes, so for example here is my next HTML and i include one more image in page:

<div class="userImg">
  <img class="userImage" src="http://i.imgur.com/ad3ct.png" alt="" rel="610|374" />
    <div class="dialog"></div>
</div>

<div class="userImg"><img class="userImage" src="http://i.imgur.com/83Fko.png" alt="" rel="510|274" /><div class="dialog"></div></div>

Example with multiple images: http://jsfiddle.net/pZMvf/1/

Now i have 2 images on page, my problem is here i am not sure how can i give image size from rel attribute of clicked image as I have it included before click function and it is displaying twice each image.

var getSizeFromRel = $(".userImage").attr('rel');
var size = getSizeFromRel.split('|');
var imgWidth = size[0];
var imgHeight = size[1];

Thank you for any help.
Regards

Answer 1

Set the width/height attributes on the img tag in your .click() event:

var img = $(this).attr("src");
var sizes = $(this).attr('rel').split('|');

$(dialog).prepend(
    $('<img />').attr({
        src: img,
        width: sizes[0],
        height: sizes[1]
    })
);

$(dialog).dialog('option', { 'width': sizes[0], 'height': sizes[1]});
$(dialog).dialog('open');

---

Edit for comments with autoOpen:

Setting the autoOpen option to true in your dialog will not work as expected because your dialog is empty when you create it, you populate the content on the click of an image.

What you can do is get the querystring variable value for ‘display’ and if it is true, trigger a click on the first image to sort-of ‘auto-open’ the dialog:

First here’s a function to extract querystring values (found here):

// extract a querystring value
// key: the name of the qstring parameter
// default_: a default value (optional)
function getQuerystring(key, default_)
{
    if (default_==null) default_=""; 
    key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
    var qs = regex.exec(window.location.href);
    if(qs == null)
        return default_;
    else
    return qs[1];
}

Set autoOpen: false for the dialog.

Then, at the end of the document.ready handler:

// get value of 'display' qstring param, default value is false (do not auto-open)
if (getQuerystring('display', false)) {
    $(".userImage:eq(0)").trigger('click');
}

---

Somes notes on your code:

You don’t have to make an instance of the dialog for each image like you do, it opens two dialogs:

<div class="userImg">
    <img class="userImage" src="http://i.imgur.com/ad3ct.png" alt="" rel="610|374" />
    <div class="dialog"></div>
</div>

Only make one <div /> for the dialog outside your userImg, you’ll get one dialog and you change the content anyway:

<div class="dialog"></div>

<div class="userImg">
    <img class="userImage" src="http://i.imgur.com/ad3ct.png" alt="" rel="610|374" />
</div>

<div class="userImg">
    <img class="userImage" src="http://i.imgur.com/83Fko.png" alt="" rel="200|50" />
</div>