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

Popular posts from this blog

django - How can I change user group without delete record -

java - Need to add SOAP security token -

java - EclipseLink JPA Object is not a known entity type -