Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Combining Fancybox with Jquery Gallery (Pikachoose)

Posted on 2010-09-23
6
2,479 Views
Last Modified: 2013-11-11
Hello,
i'm using fancy box and i have problem... i try to combine it with
several jquery gallery system (i use jquery tools - pikachoose) and it
keep doesn't work.

please see the problem here:
http://www.dxc-server.com/herindo/test_fancybox.php

if you directly click "Click Here to Enlarge" the fancybox works. But
if you click on one of the thumbnail and then click the enlarge link, fancybox will not work.

It doesn't use ajax.. i only use:
$(document).ready(function(){
                    $('.iframe').fancybox({width:800})
                    })

and the link goes like this:
<a href="module/gallery/gallery_Detail.php?id=9" class="iframe"
rel="group1"><img src="images/enlarge-text.jpg" width="15"
height="14" /> Click Here to Enlarge</a>

any idea where i go wrong ?
0
Comment
Question by:doxadigital
  • 4
  • 2
6 Comments
 
LVL 2

Expert Comment

by:WilliamStam
ID: 33745153
wow... dirty code.. you including mosue wheel like a few times

get rid of

<script type="text/javascript" src="jquery/plugin/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="jquery/plugin/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>

only usefull if you use those features...

wow the amount of include files is messy..

seriously... clean it up...

i just tested the following. should get the fancybox to work.. you had conflicts.. notice the structure.. you should try keep all your js together

this is NOT clean code.. i just fixed the top end..
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gallery</title>
<meta name="keywords" content="Keyword" />
<meta name="description" content="Description" />
<link rel="stylesheet" href="css/evo.css" type="text/css" media="all" charset="utf-8" />  
<link rel="stylesheet" href="css/elastic.print.css" type="text/css" media="print" charset="utf-8" />  
<link href="jquery/plugin/jscrollPane/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />
<link href="css/jscrollpane.css" rel="stylesheet" type="text/css" />
<link href="jquery/plugin/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />

<style type="text/css">
 .pageImage{
	 background-image:url(images/dummy_pageImage_02.jpg);
	 background-repeat:no-repeat;
	 width:750px;
	 height:382px;

 }
 			/* Styles specific to this particular page */
.scroll-pane
{
	width: 300px;
	height: 200px;
	overflow: auto;
}

 </style>
 
<script src="jquery/jquery.js" type="text/javascript" language="javascript" charset="utf-8"></script>  
<script src="jquery/elastic.js" type="text/javascript" language="javascript" charset="utf-8"></script> 
<script src="jquery/cufon-yui.js" type="text/javascript" language="javascript" charset="utf-8"></script> 
<script src="jquery/helvetica_roman_400.font.js" type="text/javascript" language="javascript" charset="utf-8"></script>

<script type="text/javascript" src="jquery/plugin/jscrollPane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery/plugin/jscrollPane/mwheelIntent.js"></script>
<script type="text/javascript" src="jquery/plugin/jscrollPane/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="jquery/plugin/fancybox/jquery.fancybox-1.3.1.pack.js"></script>

<script type="text/javascript" src="jquery/plugin/pikachoose/js/jquery.pikachoose.js"></script>
 <script type="text/javascript">
            Cufon.replace('.hr', { fontFamily: 'helvetica_roman' });
			Cufon.replace('.menu', { fontFamily: 'helvetica_roman',hover:'true' });
			$(document).ready(function(){
				
				scrollwidth=$('.scrollable').width();
				scrollheight=$('.scrollable').height();
				//alert($('.scrollable>.scroll-pane').css("width"));
				$('.scrollable>.scroll-pane').css({
												  'width':scrollwidth,
												  'height':scrollheight
												  });
				//alert($('.scrollable>.scroll-pane').css("width"));
				$('.scroll-pane').jScrollPane({
								  showArrows: true,
								  verticalArrowPositions: 'before' 
								  });
								  
				$('.iframe').fancybox({width:800});
					
			
								  
				
			});
			function popup(vartest){

				 $('.iframe').trigger('click');
			}
			$(document).bind('elastic:beforeInitialize',function (){
					$("#pikame").PikaChoose({autoPlay:false});
					/*$('a#single_image').fancybox();
					$('.iframe').fancybox({
									  width:800
								  });*/
				});
		</script>
 





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

<body>
<div class="unit layout">
	<div class="on-2 columns same-height">
    	<div class="fixed column leftColumn" style="width:230px;">
       <div class="unit full-height">
        	  <div class="unit">
                    <img src="images/logo_02.jpg" width="227" height="93" class="logo" />
                </div>
       			<div class="unit elastic-height">
           &nbsp;

                </div>
                <div class="unit hr address">
                   <span style="font-size:14px">Main Office:</span><br />
    Galeri Niaga Mediternia L8i<br />
    Pantai Indah Kapuk<br />
    Jakarta Utara 14460<br />

    Indonesia<br />

    (hotline) 6221-93828289
                </div>
       </div>
           
      </div>
        <div class="elastic column">
        	<div class="container">
                <div class="unit pageImage">

                       
                            <div class="container bottom menu ">
                                <div class="menu_border">

                                <a href="index.php?mod=home&title=Indonesia-General-Construction-Company">home</a><a href="index.php?mod=about&title=about">about us</a><a href="index.php?mod=gallery&title=Asia-Travel-Promotion">gallery</a><a href="index.php?mod=article&title=About-Efly">article</a><a href="index.php?mod=career&title=Term-and-Condition">career</a><a href="index.php?mod=contact&title=Privacy-Statement">contact us</a>                                </div>
                            </div>
                       
                 </div>    
                 <div class="unit mainContent" >			
                 		<div class="container">

<div class="pikachoose" id="pikachoose">

    <ul id="pikame" class="jcarousel-skin-pika">
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic1_280x0.jpg"/><span>
             
        <h1>Sample 1</h1>
        <p>Type:type 1</p>
        <p>Subject: subject 1</p>
        <p>Location: location 1</p>

        <p>Style: style 1</p>

        <p>Designer: designer 1</p>  
        <div class="enlarge">
        <a href="module/gallery/gallery_Detail.php?id=12" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>
         </div>
        </span></li>
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic2_280x0.jpg"/><span>

             
        <h1>Sample 2</h1>

        <p>Type:Type 2</p>
        <p>Subject: Subject 2</p>
        <p>Location: Location 2</p>
        <p>Style: Style 2</p>
        <p>Designer: Designer 2</p>  
        <div class="enlarge">

        <a href="module/gallery/gallery_Detail.php?id=9" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>

         </div>
        </span></li>
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic3_280x0.jpg"/><span>
             
        <h1>Sample 3</h1>
        <p>Type:Type 3</p>

        <p>Subject: Subject 3</p>
        <p>Location: Location 3</p>

        <p>Style: Style 3</p>
        <p>Designer: Designer 3</p>  
        <div class="enlarge">
        <a href="module/gallery/gallery_Detail.php?id=8" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>

         </div>
        </span></li>
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic3_280x0.jpg"/><span>

             
        <h1>Sample 3</h1>
        <p>Type:Type 3</p>
        <p>Subject: Subject 3</p>
        <p>Location: Location 3</p>

        <p>Style: Style 3</p>
        <p>Designer: Designer 3</p>  
        <div class="enlarge">

        <a href="module/gallery/gallery_Detail.php?id=13" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>
         </div>
        </span></li>
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic3_280x0.jpg"/><span>

             
        <h1>Sample 3</h1>
        <p>Type:Type 3</p>
        <p>Subject: Subject 3</p>

        <p>Location: Location 3</p>
        <p>Style: Style 3</p>
        <p>Designer: Designer 3</p>  
        <div class="enlarge">

        <a href="module/gallery/gallery_Detail.php?id=14" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>
         </div>
        </span></li>

              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic3_280x0.jpg"/><span>
             
        <h1>Sample 3</h1>
        <p>Type:Type 3</p>

        <p>Subject: Subject 3</p>
        <p>Location: Location 3</p>
        <p>Style: Style 3</p>

        <p>Designer: Designer 3</p>  
        <div class="enlarge">
        <a href="module/gallery/gallery_Detail.php?id=15" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>

         </div>
        </span></li>
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic3_280x0.jpg"/><span>
             
        <h1>Sample 3</h1>

        <p>Type:Type 3</p>
        <p>Subject: Subject 3</p>
        <p>Location: Location 3</p>

        <p>Style: Style 3</p>
        <p>Designer: Designer 3</p>  
        <div class="enlarge">
        <a href="module/gallery/gallery_Detail.php?id=16" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>

         </div>
        </span></li>
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic3_280x0.jpg"/><span>

             
        <h1>Sample 3</h1>
        <p>Type:Type 3</p>
        <p>Subject: Subject 3</p>
        <p>Location: Location 3</p>

        <p>Style: Style 3</p>
        <p>Designer: Designer 3</p>  
        <div class="enlarge">

        <a href="module/gallery/gallery_Detail.php?id=17" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>
         </div>
        </span></li>
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic3_280x0.jpg"/><span>

             
        <h1>Sample 3</h1>
        <p>Type:Type 3</p>

        <p>Subject: Subject 3</p>
        <p>Location: Location 3</p>
        <p>Style: Style 3</p>
        <p>Designer: Designer 3</p>  
        <div class="enlarge">

        <a href="module/gallery/gallery_Detail.php?id=18" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>

         </div>
        </span></li>
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic3_280x0.jpg"/><span>
             
        <h1>Sample 3</h1>
        <p>Type:Type 3</p>
        <p>Subject: Subject 3</p>

        <p>Location: Location 3</p>

        <p>Style: Style 3</p>
        <p>Designer: Designer 3</p>  
        <div class="enlarge">
        <a href="module/gallery/gallery_Detail.php?id=19" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>
         </div>
        </span></li>

              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic3_280x0.jpg"/><span>

             
        <h1>Sample 3</h1>
        <p>Type:Type 3</p>
        <p>Subject: Subject 3</p>
        <p>Location: Location 3</p>
        <p>Style: Style 3</p>

        <p>Designer: Designer 3</p>  
        <div class="enlarge">

        <a href="module/gallery/gallery_Detail.php?id=20" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>
         </div>
        </span></li>
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic4_280x0.jpg"/><span>
             
        <h1>Sample 4</h1>

        <p>Type:Type 4</p>

        <p>Subject: Subject 4</p>
        <p>Location: Location 4</p>
        <p>Style: Style 4</p>
        <p>Designer: Designer 4</p>  
        <div class="enlarge">
        <a href="module/gallery/gallery_Detail.php?id=10" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>

         </div>
        </span></li>
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic4_280x0.jpg"/><span>
             
        <h1>Sample 4</h1>
        <p>Type:Type 4</p>
        <p>Subject: Subject 4</p>
        <p>Location: Location 4</p>

        <p>Style: Style 4</p>
        <p>Designer: Designer 4</p>  
        <div class="enlarge">
        <a href="module/gallery/gallery_Detail.php?id=21" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>
         </div>
        </span></li>
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic4_280x0.jpg"/><span>

             
        <h1>Sample 4</h1>
        <p>Type:Type 4</p>
        <p>Subject: Subject 4</p>
        <p>Location: Location 4</p>
        <p>Style: Style 4</p>
        <p>Designer: Designer 4</p>  
        <div class="enlarge">

        <a href="module/gallery/gallery_Detail.php?id=22" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>
         </div>
        </span></li>
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic4_280x0.jpg"/><span>
             
        <h1>Sample 4</h1>
        <p>Type:Type 4</p>

        <p>Subject: Subject 4</p>

        <p>Location: Location 4</p>
        <p>Style: Style 4</p>
        <p>Designer: Designer 4</p>  
        <div class="enlarge">
        <a href="module/gallery/gallery_Detail.php?id=23" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>

         </div>
        </span></li>

              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic4_280x0.jpg"/><span>
             
        <h1>Sample 4</h1>
        <p>Type:Type 4</p>
        <p>Subject: Subject 4</p>
        <p>Location: Location 4</p>

        <p>Style: Style 4</p>

        <p>Designer: Designer 4</p>  
        <div class="enlarge">
        <a href="module/gallery/gallery_Detail.php?id=24" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>
         </div>
        </span></li>
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic4_280x0.jpg"/><span>

             
        <h1>Sample 4</h1>

        <p>Type:Type 4</p>
        <p>Subject: Subject 4</p>
        <p>Location: Location 4</p>
        <p>Style: Style 4</p>
        <p>Designer: Designer 4</p>  
        <div class="enlarge">

        <a href="module/gallery/gallery_Detail.php?id=25" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>

         </div>
        </span></li>
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic4_280x0.jpg"/><span>
             
        <h1>Sample 4</h1>
        <p>Type:Type 4</p>

        <p>Subject: Subject 4</p>
        <p>Location: Location 4</p>

        <p>Style: Style 4</p>
        <p>Designer: Designer 4</p>  
        <div class="enlarge">
        <a href="module/gallery/gallery_Detail.php?id=26" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>

         </div>
        </span></li>
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic4_280x0.jpg"/><span>

             
        <h1>Sample 4</h1>
        <p>Type:Type 4</p>
        <p>Subject: Subject 4</p>
        <p>Location: Location 4</p>

        <p>Style: Style 4</p>
        <p>Designer: Designer 4</p>  
        <div class="enlarge">

        <a href="module/gallery/gallery_Detail.php?id=27" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>
         </div>
        </span></li>
              <li><img border="0" src="uploadmedia/gallery/thumbnails/pic4_280x0.jpg"/><span>

             
        <h1>Sample 4</h1>
        <p>Type:Type 4</p>
        <p>Subject: Subject 4</p>

        <p>Location: Location 4</p>
        <p>Style: Style 4</p>
        <p>Designer: Designer 4</p>  
        <div class="enlarge">

        <a href="module/gallery/gallery_Detail.php?id=28" class="iframe" rel="group1"><img src="images/enlarge-text.jpg" width="15" height="14" /> Click Here to Enlarge</a>
         </div>
        </span></li>

        </ul>
    </div>
    
    
    
                        </div>
                 </div>                                                                            
            </div>

        	<div class="container full-height dsLeftColumn">
            &nbsp;
            </div>
        </div>

    </div>
</div>
<div class="unit footer">
	Copyright@2010 - Herindo Adikarya Jaya
</div>
</body>

</html>

Open in new window

0
 
LVL 2

Expert Comment

by:WilliamStam
ID: 33745169
css includes
css
js includes
js

your page top should try follow that.. makes it easier for readability.. and performance issues..
0
 

Author Comment

by:doxadigital
ID: 33748231
Hello William..
nice to see you drop by..

i copy paste your suggestion, but the weird behavior still exist
i already upload it to: http://www.dxc-server.com/herindo/test_fancybox.php

you can see yourself, any idea what might gone wrong ?
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 2

Accepted Solution

by:
WilliamStam earned 500 total points
ID: 33749002
your viewer thing is taking the links out of the dom then inserting them again later on... .fancybox gets added to the div before its removed.. then when its added it doesnt have the .fancybox bind on it.. so doesnt work.. just short of turning all fancybox's internals to .live("click" your best bet would be to add a plugin called livequery

http://github.com/brandonaaron/livequery

and then use it like this

$('.iframe').livequery(function(){
  $(this).fancybox({width:800});
});

this is mostly all just gettign what you have to work... pretty much treating the symptoms instead of the illness..

but it works :P
0
 

Author Comment

by:doxadigital
ID: 33751096
so basically using livequery is just like having an "autobot" that will bind dom  based on selection.

for my case.. the ".iframe" , will bind to fancybox() as long as .iframe exist in the page....

in CSS terms, it would be like having !important...  do i get the understanding ?
0
 
LVL 2

Expert Comment

by:WilliamStam
ID: 33752919
hmm not too sure bout the !important thing.. soz..

yeah pretty much... .livequery is the same as .live(

only diference is .live is for events only.. where as livequery listens for all elements that match
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how can i make 2 columns? 4 37
100% tall div not scrollable on iPhone 3 20
ajax to record click 3 16
Javascript 2 22
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question