Question

On this site that I’m working on for work – http://www.basicliving.com – when you click on the mother’s day specials ad it brings you to a seperate page with the image and a grey background. I’m using fancybox and I have followed the directions on the fancybox site perfectly. I’ve checked in firebug and all the files are there and connected. What it should do is just overlay the image with a grey, but somewhat transparent background so that you can still see the homepage content behind the image. Here’s the code…

$(document).ready(function(){
        /* This is basic - uses default settings */

        $("#init_over").fancybox({
            'speedIn'       :   600, 
            'speedOut'      :   200, 
            'overlayShow'   :   false,
            'hideOnContentClick': true
        });

    });

and html…

<a id="init_over" href="<?php echo DIR_WS_TEMPLATES . TEMPLATE_NAME; ?>/images/mothersDayAd.jpg">
            <img src="<?php echo DIR_WS_TEMPLATES . TEMPLATE_NAME; ?>/images/momsDayAd.jpg" alt="Mother's Day Bosch Sale!" /></a>

I’ve also linked the CSS in the head, along with the necessary JQuery and fancybox scripts. They are all there. I’ve checked the site FAQ’s and all it said was, “make sure everything is installed properly”. I’ve googled it and read other questions on stack and I couldn’t fix so I thought it’s time to ask… Thanks!

Answer 1

It looks like you have included jQuery twice.

    <script type="text/javascript" src="templates/OS03C00309/includes/js/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>