0

Attempting to implement fancybox2 which will open a hidden div(maybe where the user clicks or predefined location).

The div

<div class="catSelections" style="display:none"><ol class="selectable ui-selectable"><div class="ui-selectee"><p class="ui-selectee">Dwelling Pictures</p><p class="ui-selectee"></p><li parentid="1" id="3" class="ui-widget-content ui-selectee">Front of Risk</li><li parentid="1" id="8" class="ui-widget-content ui-selectee">Right side of risk</li><li parentid="1" id="9" class="ui-widget-content ui-selectee">Left side of risk</li></div></ol></div>

The method I am invoking on a specific action(when user clicks on a photo div)

function addFancy(div){
    $(".catSelections").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });

}

Am I approaching this in the wrong way?

Error message

Uncaught TypeError: Object [object Object] has no method 'fancybox'

js loaded at bottom of page

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
..
..
..
user3032973
  • 415
  • 2
  • 8
  • 26
  • That error means that `fancybox` doesn't exist. Is the library loaded correctly? – elclanrs Jan 11 '14 at 19:08
  • Yeah I think it is. see above for script imports – user3032973 Jan 11 '14 at 19:09
  • possible duplicate of [Fancybox doesn't work with jQuery v1.9.0 \[ f.browser is undefined / Cannot read property 'msie' \]](http://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read) – JFK Jan 13 '14 at 04:56
  • 1
    and the answer http://stackoverflow.com/a/14344290/1055987 – JFK Jan 13 '14 at 04:56

1 Answers1

0

Ended up using jquery UI dialog to accomplish this. Seemed like a better fit.

$(".catSelections").dialog({
        width: 450,
        height: 400,


            }
            );
user3032973
  • 415
  • 2
  • 8
  • 26