2 Replies Latest reply: Sep 16, 2013 11:58 PM by complexity RSS

    any simple way to do popup image view overlay in DW? Can't get pickachoose+fancybox+fluid working

    complexity Community Member

      Hey all,

      Just wondering if anyone knows any simple ways to create a popup over lay window like what fancybox/lightbox/shadow box does and get it to work with a Dreamwever fluid grid site?

       

      I've got pikachoose+fancy box to run together perfectly in a plain html page, but when I bring that code into a Dreamweaver fluid grid site, the code doesn't work (well images don't cycle, and popover doesnt load when you click on the image link).

       

      I'm guessing it's a jquery conflict of some kind.

       

      Any help would be great, I can post the full code if someone is able to take a look. When I inspect the code in Google Chrome web inspector I get in the console:

      Uncaught TypeError: Cannot read property 'msie' of undefined jquery.fancybox-1.3.4.pack.js:18

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

       

      Code below

       

      <!doctype html>

      <html class="">

      <head>

      <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <title>-</title>

      <link href="boilerplate.css" rel="stylesheet" type="text/css">

      <link href="css/ce4.css" rel="stylesheet" type="text/css">

      <link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.4.css" media="screen" />

      <link type="text/css" href="styles/bottom.css" rel="stylesheet" />

       

       

      <script src="respond.min.js"></script>

      <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

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

      <script type="text/javascript" src="jquery.fancybox-1.3.4.pack.js"></script>

       

       

      <script language="javascript">

       

       

      $(document).ready(function (){

      var a = function(self){

      self.anchor.fancybox();

      };

      $("#pikame").PikaChoose({hoverPause:true,  showCaption:false, text: {previous: "", next: "" }, buildFinished:a});

      });

       

       

      </script>

      </head>

      <body>

       

       

      <div class="pikachoose">

      <ul id="pikame" >

       

      <!-- <li><a href="1.jpg"><img src="1.jpg"></a>-->   

       

      <li>

      <a href="images/1large.jpg">

      <img src="images/1small.jpg"/>

      </a>

      <span></span></li>

       

       

      etc... etc...

       


      Any help would be great

        • 1. Re: any simple way to do popup image view overlay in DW? Can't get pickachoose+fancybox+fluid working
          Nancy O. CommunityMVP

          I don't know what a pikachoose is, but Fancybox2 works in Fluid Layouts.  Copy & paste the following code into a new, blank document.

           

           

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>HTML5, with Fancybox2 Viewer</title>
          
          <!--LATEST JQUERY CORE LIBRARY-->
          <script src="http://code.jquery.com/jquery-latest.min.js"></script>
          
          <!--FANCYBOX plugins-->
          <link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
          <script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
          
          <style>
          /**this styles image container**/
          #thumbs p {
          float:left;
          width: 180px;
          height: 12.5em;
          margin: 10px 0 0 20px;
          padding: 10px; 
          border: 1px solid silver;
          /**rounded borders**/
          -moz-border-radius: 20px;
          -webkit-border-radius:20px;
          border-radius: 20px;
          /**this styles caption text**/
          font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;
          color: #666;
          text-align:center;
          }
          
          /**recommend using same size images**/
          #thumbs img {
          width:  160px; /**adjust width to thumbnail**/
          height: 120px; /**adjust height to thumbnail**/
          margin-bottom: 1.5em;
          opacity: 0.75;
          }
          
          #thumbs img:hover {opacity: 1.0}
          
          /**float clearing**/
          #thumbs:after {
          content:".";
          clear:left; 
          font-size:0px;
          line-height:0;
          display:block;
          visibility:hidden;
          }
          </style>
          
          
          </head>
          
          
          <body>
          
          <h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Viewer with images</h1>
          
          <!--insert thumbnails with links to full size images below-->
          <div id="thumbs">
          <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 1" /></a> <br /> 
          Caption 1
          </p>
          
          <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 2" /></a> <br /> 
          Caption 2
          </p>
          
          <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 3" /></a> <br /> 
          Caption 3
          </p>
          
          <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 4" /></a> <br /> 
          Caption 4
          </p>
          
          <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120" alt="Thumbnail 5" /></a> <br /> 
          Caption 5
          </p>
          <!--end thumbs--></div>
          
          
          
          
          <!--FancyBox function code--> 
          <script>
          $(document).ready(function() {
               $('.fancybox).fancybox();
          });
          </script>
          </body>
          </html>
          

           

           

          Nancy O.

          • 2. Re: any simple way to do popup image view overlay in DW? Can't get pickachoose+fancybox+fluid working
            complexity Community Member

            Hi Nancy I tried Fancybox2 and Jquery 1.10 and it worked straight away! Thanks! Pikachoose is just a solid and free image gallery slider, check it out. http://www.pikachoose.com