1. Stay tuned
    2. Blog
    3. 2010
    • Published
    • 1 min

    FancyBox tips

    <p>I had some troubles getting my FancyBox implementation working in IE8, so to save you from spending time Googling, I'll share two tips here.</p>

    By Lars Øyvind Bodahl

    I have a list of images where I've attached a FancyBox lightbox so the users can click and get a larger preview.

    My FancyBox were working fine in FireFox, but when I tried it in IE8, it only worked for the first element on the page. After reading the FAQ  I solved this problem by:
    Tip 1:
    Use class as a selector, not id. Meaning: Use $(".selector").fancybox() instead of $("#selector").fancybox()

    But, by solving that problem, I got a new problem: The images were not displayed correctly. They were displayed as unreadable signs. After googling some more, I found the solution:
    Tip 2:
    Set the content type. I'm displaying images, so by setting the type to image everything works just fine :)

    $("a.fancyboxImg").fancybox({
        'type': 'image'           
    });