Skip navigation
Currently Being Moderated

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

Sep 16, 2013 7:21 AM

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

 
Replies
  • Currently Being Moderated
    Sep 16, 2013 7:47 AM   in reply to complexity

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points