jquery - Getting Fancybox to work -
i must going blind here, i've been trying ages fancybox trigger! i've read , re-read documentation , have copied exact code have used, , yet fancybox refuses trigger...
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en:uk"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="robots" content="index,follow" /> <link type="text/css" rel="stylesheet" href="styles/style.css" /> <link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" /> <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.6"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".various").fancybox({ maxwidth : 800, maxheight : 600, fittoview : false, width : '70%', height : '70%', autosize : false, closeclick : true, openeffect : 'none', closeeffect : 'none' }); }); </script> <title>title</title> </head> <body> <div id="wrapper"> <div class="menu"> <div id="box1_and_2"> <a class="various" data-fancybox-type="iframe" href="http://fancyapps.com/fancybox/demo/iframe.html"> <div id="box1" class="link"> <img src="images/box1.jpg" alt="" class="fade" /> <div class="info"> <p>title</p> <img src="images/info.png" alt="" /> </div> </div>
many thanks!
you calling fancybox js before jquery called. practice add additional scripts before closing body tag. tested , works. :)
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en:uk"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="robots" content="index,follow" /> <link type="text/css" rel="stylesheet" href="styles/style.css" /> <link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.6"></script> <title>title</title> </head> <body> <div id="wrapper"> <div class="menu"> <div id="box1_and_2"> <a class="various" data-fancybox-type="iframe" href="http://fancyapps.com/fancybox/demo/iframe.html"> <div id="box1" class="link"> <img src="images/box1.jpg" alt="" class="fade" /> <div class="info"> <p>title</p> <img src="images/info.png" alt="" /> </div> </div> <script type="text/javascript"> $(document).ready(function() { $(".various").fancybox({ maxwidth : 800, maxheight : 600, fittoview : false, width : '70%', height : '70%', autosize : false, closeclick : true, openeffect : 'none', closeeffect : 'none' }); }); </script> </body> </html>
Comments
Post a Comment