Jquery Dynamic fancy box
Loading fancybox from Jquery how can I re开发者_JS百科trieve 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.
I have this problem also .
now it has been solved.
here is the answer:
function view(url){
$.fancybox(
url,
{
type: 'iframe',
width : '35%',
height : '50%',
showCloseButton: true,
opacity: true,
overlayOpacity: 0,
transitionIn: 'none',
transitionOut: 'none',
enableEscapeButton: true
}
);
}
<a onclick="view('ViewFacility?rid=2');return false;" >click</a>
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;
});
});
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;
});
});
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
精彩评论