0

I've got Fancybox set on my images like so

<a class="fancybox fancybox.iframe" href="products.php?prod_id=36">
    <div class="prod-img">
        <img src="images/products/Apples_Red_Delicious.jpg" style="max-height:114px; max-width: 114px;" alt="Apples Red delicious  ($3.99kg)"/>
    </div>
</a>

And I've got the script for document ready set

$(document).ready(function() {
    $('.fancybox').fancybox({
        width: 560,
        autoHeight: true,
        scrolling: 'no'
    });
});

(type: 'iframe' has been removed from the script as isn't needed and didn't make a difference)

But it just won't load the page in Fancybox for me!

I literally copied and pasted the code from another document in the same folder and it works on there, but not here.

I've tried just moving the link to wrap around just standard text but still no luck

You can preview the page at http://www.dpdesignz.co.nz/homefresh/shop.php?prod=1. Can anyone see what might be wrong with it?

dpDesignz
  • 1,909
  • 10
  • 34
  • 70
  • 1
    Out of curiosity, why do you have the product's divs inside a form ?! It is a terible design mistake : http://stackoverflow.com/questions/9942538/is-it-correct-to-use-div-inside-form – Cosmin Sep 18 '12 at 12:59
  • @Cosmin a couple of browsers my clients customers use don't allow the number input field to work properly without them :). Can't remember what ones though – dpDesignz Sep 18 '12 at 13:00
  • 1. That is very strange. 2. I still don't get it WHY you use a form there? What information do you submit for processing ? Just remove the form tags. – Cosmin Sep 18 '12 at 13:02
  • @Cosmin No information is submitted. It just has to be inside form tags. I should probably remove all that extra info. – dpDesignz Sep 18 '12 at 13:03

3 Answers3

1

Try putting iframe in quotes, like this:

     type: 'iframe'
bjauy
  • 929
  • 16
  • 22
  • Sorry please see updated code. This works on the other page but still not this one – dpDesignz Sep 18 '12 at 12:50
  • No unfortunately. This is the only public page. The others are all my admin back end pages – dpDesignz Sep 18 '12 at 13:02
  • can you at least readd ```type: 'iframe'``` to the scripts in the example? – bjauy Sep 18 '12 at 13:10
  • you probably apply ```.fancybox()``` twice - there is one in bottom of page source, second in external script (```fancyboxui.js```). Simplest method would be to change class from ```fancybox``` to something unique in anchors and in script at the bottom – bjauy Sep 18 '12 at 13:18
  • thanks I've already tried both of those. Like I said though the exact same script works on another page. It just doesn't seem to be triggering for some reason. – dpDesignz Sep 18 '12 at 13:21
1

Although things told above were true your page's real problem is validator plugin

remove this and try 

<script type="text/javascript" src="js/jquery.validate.js"></script>

it seems there is a conflict.

BTW i advise you to use validation engine plugin. http://www.position-relative.net/creation/formValidator/index.html

Erdinç Çorbacı
  • 1,187
  • 14
  • 17
0

Using the type:iframe without quotes '' will cause an error. So just try replacing your fancy box call with the below code by adding single quotes to the type iframe.

$('.fancybox').fancybox({
        width: 550,
        height: 590,
        type: 'iframe'
    });

Hope this will help you

DisplayName
  • 3,093
  • 5
  • 35
  • 42
Maz
  • 1