Display images using a jQuery UI Dialog widget, for example in a FancyBox

Question

I just started using jQuery with CSS themes and framework. I do a few dialogs for my AJAX calls and everything works fine, but I have a problem displaying images.

I have used in the past FancyBox easy viewing of images on the same page, use a class to the anchor, and then doing something like: $("a.example.").fancybox();.

Is there a way to do this using jQuery UI Dialog?

Thanks you!

Answer 1

HTML

<a class="preview" href="#" />
<div class="myImage">
   <img src="http://myimage.png" alt="myimage" />
</div>

CSS

div.myImage
{
    display: none;
}

JQuery

$("a.preview").click(function() {
    $('div.myImage').dialog();
});