开发者

Show a div as pop-up using Fancybox

开发者 https://www.devze.com 2023-04-07 09:14 出处:网络
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 .

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消