Jquery FancyBox target specific DIV ID?

Question

How do I get Fancy box to target a specific DIV ID on a page and not request the whole page in the fancybox.? This my code so fare

$(function() {

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

    $(".style_image a").find("#show_style").fancybox();       

});
});

This don't work?

I originally tried the following:

 $(function() {

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

        $(this.href + " #show_style").fancybox();       

    });
    });

Not sure how this done, or if it is even possible?

here are the doc's

score 24 · Answer 1 · edited Jan 28 '12 at 01:55

If you want fancybox to open a certain div you just use the following simple steps:

First you need a link to hook FancyBox to:

<a href="#myDivID" id="fancyBoxLink">Click me to show this awesome div</a>

Note the div id next to the anchor.

Second you need a div that will be shown inside the FancyBox:

<!-- Wrap it inside a hidden div so it won't show on load -->
<div style="display:none">
    <div id="myDivID">
         <span>Hey this is what is shown inside fancybox.</span>
         <span>Apparently I can show all kinds of stuff here!</span>
         <img src="../images/unicorn.png" alt="" />
         <input type="text" value="Add some text here" />
    </div>
</div>

And third some very easy javascript to hook it all together

<script type="text/javascript">
    $("a#fancyBoxLink").fancybox({
        'href'   : '#myDivID',
        'titleShow'  : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });
</script>

How about using an ID to open the div in a fancybox if you can't change the href value? i.e. open a div in a fancybox when clicking on an img that has an ID> — Charlie Schliesser, Jan 04 '12 at 17:42
If I understood well this example, it's very complicated with 100 images because I need to write 100 scripts, each for one image because it works with ID. Also, my aim was to open fancy image in a div which is cca. 70% of the screen width but with this method, when I open the image, it is opening in 100% screen size, just like originally... — Igor Laszlo, Oct 24 '17 at 00:17

score 7 · Answer 2 · edited Oct 08 '15 at 11:54

You just need this selector:

$("#show_style").fancybox();

The ID selector (since IDs should be unique) is just #IDGoesHere

I think what you're after is loading the content in some fancybox, if you want to load say <div id="content"></div> from the page the href points to, you'd do this using .load():

$(".style_image a").on('click', function(event) { 
  $('#show_style').load(this.href + " #content").fancybox();       
});

.load() has an option for url selector that loads only part of the destination page.

Jquery FancyBox target specific DIV ID?

2 Answers2

Linked