Question

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!!

Answer 1

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.