Jquery Dynamic fancy box

Question

Loading fancybox from Jquery how can I retrieve the contents of a div ID on a page and not the whole page. This is my code so fare which gets me the whole page:

The index view(this links to the show view of styel):

<div class="style_image"> <%=link_to (image_tag style.cover.pic.url(:normal)), style %></div>

The show view (I want to to appear in the fancybox):

<div id="show_style">

    ALL THE CONTENT!

</div>

application.js:

$(function() {

$(".style_image a").live('click', function(event) { 

    $(".style_image a").fancybox();
    return false;       

});
}); 

I have also tried the following with no success:

$(function() {

$(".style_image a").live('click', function(event) { 

    $(".style_image a" + "#show_style").fancybox();
    return false;       

});
});

I'm not sure how this is done as there is little info on the fancy box docs. I wish this to be done dynamically not inline.

Answer 1

I'm not sure I know what you mean, but if you want to call fancybox() on just the element clicked try this:

$(function() {

$(".style_image a").live('click', function(event) { 

    $('this').fancybox();
    return false;       

});
}); 

Answer 2

Ok, based off of the newest information you provided I believe what you are trying to do is take all of the content from inside the show_style element and put it inside the fancybox. Here is the javascript.

$(function() {
    $("a#linkEle").fancybox({
        'hideOnContentClick': true
    });
});

And your html will point to the content inside the show_style element

<a id="linkEle" href="#show_style"></a>
<div style="display:none"><div id="show_style">ALL CONTENT TO BE SHOWN</div></div>

See how the anchor href points to the div with an id of show_style. If you are trying to get all of the content from inside show_style and put it inside the fancy box, I believe this is how you would do that.

Metropolis

Answer 3

According to the Fancybox documentation, you'll want your <a> tag to have #show_style as their href element.

<div class="style_image"><a href="#show_style">Click here to show fancybox</a></div>

Then your first code should work:

$(function() {

$(".style_image a").live('click', function(event) { 

    $(".style_image a").fancybox();
    return false;       

});
});