0

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

2
  • The fancybox() method doesn't initiate the fancybox popup. It attaches the fancybox to the click of them item in question. Sep 26, 2011 at 14:04
  • I don't get it. Can you show me a good code?
    – Dragan
    Sep 26, 2011 at 14:06

2 Answers 2

0

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.

3
  • Had a look at the library.. I don't know if it will be of help to me. I need to have a form pop-up. Can prettyPhoto do that for me? Cuz all content seems to be is static once the pop-up shows.
    – Dragan
    Sep 26, 2011 at 14:10
  • Yes it can, you create a "div" on your page and simply hide it. Then call it with prettyphoto. Its all on that page I sent you :) have a look here glcreations.co.uk/OLD/resume.html its from my old site so the layout is screwed a bit, however click on my email address at the top and look what happens ;) Sep 26, 2011 at 14:16
  • Can you please tell me all the files that I need to include along with the images and css? Thanks
    – Dragan
    Sep 26, 2011 at 14:31
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.