fancybox not called on page load
Question
I am trying to use Fancybox in my asp.net mvc view on page laod and using this example 6 at http://fancybox.net/blog
My html is:
<head>
<title>Home Page</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="main">
<link rel="stylesheet" type="text/css" href="../../Content/FancyBox/jquery.fancybox.css" />
<script type="text/javascript" src="../../Content/FancyBox/jquery.fancybox.js"></script>
<script>
$(document).ready(function () {
$("#dialog-user-login").trigger('click');
});
</script>
<div id="dialog-user-login">
I am here
</div>
</div>
</div>
</body>
but fancybox is not called on page load. Is there anything missing in my code ?
[ Edited ]
tried this but didnt work as well:
$(document).ready(function () {
$("#dialog-user-login").fancybox({
'showCloseButton' : false,
'titlePosition' : 'inside',
'titleFormat' : formatTitle
});
$("#dialog-user-login").trigger('click');
});
3 answers
solution1
0 2013-01-26 08:24:32
when using a jquery plugin you should call it on the element you want ..
here is how you do it for fancy box
$(document).ready(function () {
$("#dialog-user-login").fancybox({
'showCloseButton' : false,
'titlePosition' : 'inside',
'titleFormat' : formatTitle
});
$("#dialog-user-login").trigger('click');
});
solution2
0 2013-01-26 09:58:20
as much as i wanted to post this as a comment...
anyway, to DotnetSparrow, I've just recently made a site myself and implemented fancybox, and it works fine.
On ex. 5 & 6, I tried it on my page and it works fine too.
your html lacks a lot, as others have commented, the blog you based it from are snippets, and not the whole set of instruction...
follow the following:
1.Follow the first paragraph of this instruction first: http://fancyapps.com/fancybox/#instructions
2.In HTML
<a id="urLink" title="Login" href="#dialog-user-login">Login Here</a>
<div id="dialog-user-login" style="display:none">
I am here
</div>
3.In javascript
<script type="text/javascript">
$(document).ready(function() {
//attach fancybox on ur <a> tag
$("#urLink").fancybox({
'scrolling' : 'no',
'titleShow' : false,
'onClosed' : function() { $("#login_error").hide(); }
});
//if you want to show the login in fancybox on load
$("#urLink").trigger('click');
});
</script>
solution3
0 2013-05-15 15:02:36
a little late but i hope this answers any similar question:
$(function() {
$.fancybox.open([{
//o $("#myDiv").html() aunque este ultimo muestra los datos en bruto
content: $("#myDiv").text()
}]);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.