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
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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With