Powerzoom Inside a Fancybox

**HollyG** · 08-20-2012, 02:10 PM

http://www.dynamicdrive.com/dynamici...owerzoomer.htm

Hi

I'm trying to get powerzoomer inside a Fancybox from http://fancyapps.com/fancybox/

I can get an image to display & firebug is not reporting any errors, when hovering over the image nothing happens.

This is my code it preceded by links to jquery fancybox and ddpowerzoom

Code:

<script type="text/javascript">
jQuery(document).ready(function($) {
  $('#Pzoom').fancybox({
        beforeShow : function() { 
            $('#fancybox-img').wrap(
            $('<a />')
           .attr('href', this.href) // this.href gets the "href" of the current image
           .addClass('power-zoom')
           .attr('rel', "position: 'inside'")
           .attr('id', "listenmusic")
  
    ); // wrap
        AddZoom('#listenmusic')
        } //BeforeShow
        }); //Pzoom
 
      
}) ; // ready
 
function AddZoom(Selector)
    {
    alert  ("AddZoom " + Selector)
   jQuery(Selector).addpowerzoom({
                   defaultpower: 2,
                   powerrange: [2,5],
                   largeimage: null,
                   magnifiersize: [100,100] //<--no comma following last option!
 
          });
   }
</script>

Thanx Holly

**jscheuer1** · 08-21-2012, 07:25 AM

a is not a self closing tag, that could present problems in at least some browsers, try writing it out (<a></a>). You should check in a DOM inspector or equivalent (something that shows the DOM tree of the page including any modifications made via javascript) to see if your created element is there. Perhaps use a different id each time. Investigate whether or not the created element is retained. If it is, you will have nested a tags within each other, that would cause problems.

You could always use FancyBox to present an iframe with the zoom script set up inside it.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

**HollyG** · 08-21-2012, 03:26 PM

Hi

Taking your suggestion on board I've reworked the the code so that fancybox calls an iframe and the zoom script is fireing from within the iframe. However it is still not working the image appears but the is no magnification on mouse hover.

I'm unable to show you a live website as i'm at the developent stage which is also why id's etc are hard coded. I can upload the two files the first img.html contains jQuery / Fancybox Code sending a link to GetImg.php that has the zoom code.

it seems that if i don't load the jquery.js inside the iframe firebug reports an error saying $ or jQuery is a function I also had ddpowerzoomer.js in the parent file but that didn't make any differance either.

I'd apreciate if some one would be kind enough to look and tell me what i'm doing wrong and there isn't some kind of incompatilbility between fancybox and powerzoomer

Thanx for your help

Holly
img.htm

Code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
      <!-- Add jQuery library -->
	<script type="text/javascript" src="fancyBox-2.0.6/lib/jquery-1.7.2.min.js"></script>
    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="fancyBox-2.0.6/lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="fancyBox-2.0.6/source/jquery.fancybox.js?v=2.0.6"></script>
    <link rel="stylesheet" type="text/css" href="fancyBox-2.0.6/source/jquery.fancybox.css?v=2.0.6" media="screen" />

    <!-- Add Button helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="fancyBox-2.0.6/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
    <script type="text/javascript" src="fancyBox-2.0.6/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>

    <!-- Add Thumbnail helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="fancyBox-2.0.6/source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
    <script type="text/javascript" src="fancyBox-2.0.6/source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>

    <!-- Add Media helper (this is optional) -->
    <script type="text/javascript" src="fancyBox-2.0.6/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
    
    
    <script type="text/javascript">
     jQuery(document).ready(function($){
     	$("#fancybox-manual-b").click(function() {
				$.fancybox.open({
					href : 'GetImg.php?img=/images/listenmusic.jpg',
					type : 'iframe',
					padding : 5
				});
			});
     
     }) ; // ready 
    </script>     
 
  </head>
  <body>
              
              <p>
             <a id="fancybox-manual-b" href="javascript:;" title="A witty Title">Graphic A</a>
              </p>
  </body>
</html>

GetImg.php

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Holly Gibbons</title>
<script type="text/javascript" src="fancyBox-2.0.6/lib/jquery-1.7.2.min.js"></script>
    
      <script type="text/javascript" src="/js/ddpowerzoomer.js"></script>    
    <script type="text/javascript">
     	jQuery('#image3').addpowerzoom({
         		defaultpower: 2,
      		powerrange: [2,5],
      		largeimage: null,
      		magnifiersize: [100,100] //<--no comma following last option!

				}); 
    </script>
  </head>
  <body>
  <?php 
  $my_img = $_GET['img'];
  ?>
<p> <img id="image3" src = <?php echo $my_img ?> /></p>
</html>

**jscheuer1** · 08-21-2012, 04:39 PM

for GetImg.php:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Holly Gibbons</title>
<script type="text/javascript" src="fancyBox-2.0.6/lib/jquery-1.7.2.min.js"></script>
    
      <script type="text/javascript" src="/js/ddpowerzoomer.js"></script>    
    <script type="text/javascript">
    jQuery(function($){
    	$('#image3').addpowerzoom({
    		defaultpower: 2,
    		powerrange: [2,5],
    		largeimage: null,
    		magnifiersize: [100,100] //<--no comma following last option!  
    	}); 
    });
    </script>
  </head>
  <body>
  <?php 
  $my_img = $_GET['img'];
  ?>
<p> <img id="image3" src = <?php echo $my_img ?> /></p>
</html>

The browser cache may need to be cleared and/or the page refreshed to see changes.

**HollyG** · 08-22-2012, 02:12 PM

Thanx That worked!

**HollyG** · 08-23-2012, 03:31 PM

Any suggestions why on mouse scroll I can zoom in but not out again?

**jscheuer1** · 08-23-2012, 03:47 PM

That could be because there was a change in the way jQuery handles mousewheel events. You may need to downdate the version of jQuery used on the GetImg.php page to:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Give that a try and let me know.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

**HollyG** · 08-24-2012, 04:30 PM

Thanx changing the jQuery version worked!
However have a feeling this will end in tears, Because when i've sorted out an incorrect iframe re-size issue i'll be putting this on a wordpress site that uses yet a differant version of jQuery.

Thanx again
Holly

**jscheuer1** · 08-24-2012, 05:52 PM

If that's an issue, try this modified version of the script:

ddpowerzoomer.js

Test it out with the later version of jQuery just to be sure. I just did and it's working fine here.

Thread: Powerzoom Inside a Fancybox

Thread Tools

Search Thread

Powerzoom Inside a Fancybox

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions