Question

You know how you see those jQuery Expandable box things that expand to display a bigger image in the center of the screen when you click on a Thumbnail image?

Well, how do I do pretty much the exact same thing, but instead of there just being an image inside, I need to fill that “box” with a div, and html content inside it. Like some pictures, with some text and hyperlinks?

I’ve looked everywhere I could think of, does this exist already? How would one go about doing something like this? Any help at all is appreciated.

Thank you!

Answer 1

you can do something like this with a dialog:

http://jsfiddle.net/maniator/dUBhw/

js:

$('.more').click(function(){
    var rel = $(this).attr('rel');
    var $rel = $('#'+rel);
    var div = $('<div>').append($rel);
    div.dialog({
        width: 500,
        position: 'center'
    });
    $rel.show();

})

html:

<div class='more' rel='the_more'>MORE</div>

<div id='the_more' class='hide'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempor sodales neque, ac venenatis neque posuere eu. Ut accumsan augue magna, ac lacinia massa. Praesent ultricies luctus rhoncus. Duis at neque ullamcorper risus fermentum auctor. Phasellus id ipsum purus, quis pretium quam. Phasellus id ligula turpis, at lobortis lorem.<img src='http://placehold.it/333/fe4'/>' Vivamus ac ipsum felis, eu blandit nisi. Aliquam leo lorem, lacinia non feugiat nec, facilisis nec ipsum. Etiam sollicitudin laoreet lorem quis laoreet. In lacinia porta metus, dictum semper urna dapibus tempus. Vivamus non odio lorem, a dapibus elit. Etiam iaculis urna non erat rhoncus a vehicula odio ultricies. Aliquam dignissim, ipsum sed lacinia rhoncus, mauris risus aliquam quam, eu tempus magna purus vitae nunc. Nullam feugiat viverra lacinia. Quisque ultricies pretium magna et facilisis.
</div>