Show a div as pop-up using Fancybox
I need to show a div with application form as a pop-up using fancybox. Is it possible to .fancybox() anything but image because all the tutorials i came across on the internet use .
Thanks in advance!
I have the following code:
<input type="button" value="Preview" id="btnPreview" />
testen text!
<script type="text/javascript">
$(document).ready(function () {
$('#divDetails').hide();
$('#divPreview').hide();
$('.image').click(function () {
var imgPath = $(this).attr('src');
var imgName = imgPath.substring(0, imgPath.length - 4);
var imgAlt = $(this).attr('alt');
$('#mainDiv').hide();
$('#divDetails').show('slow');
$('#detailedImage').attr('src', imgName + '-large.jpg').attr('alt', imgAlt);
});
$('#btnPreview').click(function () {
$('#divDetails').show();
$("#divPreview").fancybox();
});
})
<开发者_开发百科/script>
The rest of the code is not relevant. when I click the btnPreview button I want the div with ID divPreview to pop-up and I call $("#divPreview").fancybox();
I include these scripts
<link href="../css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="../fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<script src="../fancybox/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
<script src="../fancybox/jquery.easing-1.3.pack.js" type="text/javascript"></script>
What am I doing wrong?
Thank you!!
I personally use prettyPhoto, its very simlar to fancy box, however Ive found it to be more compatible with older browsers.
have a look
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
I belive the page you are looking for, for loading custom content is here
http://www.no-margin-for-errors.com/blog/2010/09/28/tutorial-opening-custom-content-in-prettyphoto/
In that example they use a google maps :)
Hope this helps you out.
Give some more information please... What context? What is your html?
Possible mistakes:
1) jQuery is not loaded before you run this snippet (include it as first) 2) One or both id's are not found. 3) fancybox is not included before you run this snippet.
精彩评论