Power Zoomer in a PHP environment

**Duragroup** · 04-23-2012, 06:33 PM

Looking for help utilizing Power Zoomer in a PHP environment. Installed software in a stand alone basis and it works fine. Attempted to install in a php environment (Zen Cart) and the magnifier does not show. Using Firebug I see that the code for the magnifier does not appear in the body of the page whereas it does appear in the non PHP installation. What am I doing wrong? Any assistance would be appreciated

**traq** · 04-23-2012, 07:50 PM

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

is this the script you're referring to?

Your question is unclear.
Please provide more information, and be as specific as possible.

What do you want to accomplish?
What have you already tried?
What problems did you encounter?

Also, please be sure that you have included all relevant code and/or a link to the page in question.

Please post a link to the page on your site that contains the problematic script so we can check it out.

**Duragroup** · 04-24-2012, 01:01 PM

Yes, ddpowerzoomer.js does not write the appropriate code into the body of the web page therefore the magnifier does not show. The version of ddpowerzoomer is /*Image Power Zoomer v1.1 (June 18th, 2010) in its generic form (no modifications).

jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom({
defaultpower:4, //default power: 3x original image
powerrange: [4, 10], //Possible range: 2x to 10x magnification
magnifiersize: [120, 120] //Set size of magnifier to 120px by 120px
})
})

<img src="/images/Canvas Photos/can401 frame.jpg" id="myimage" style="width: 1000px; height: 700px;" />

**traq** · 04-24-2012, 03:09 PM

Originally Posted by Duragroup

...ddpowerzoomer.js does not write the appropriate code into the body of the web page

The script won't write itself - you need to insert the script on the page, or use PHP to print it in the appropriate location.

If you need further help,

Please post the code you are having trouble with, and/or a link to the page on your site that contains the problematic script so we can check it out.

**Duragroup** · 04-24-2012, 06:03 PM

Thanks. How do I use php to write the script to replace the ddpowerzoomer.js

**traq** · 04-24-2012, 08:04 PM

You're not replacing it - you just need to put it on your page in the first place.

Two approaches:

1) write the document.ready function call towards the end of the page (as close to the closing </body> tag as possible):

PHP Code:


<?php
print '<script>
    jQuery(document).ready(function($){ //fire on DOM ready
        $("#myimage").addpowerzoom({
            defaultpower:4, //default power: 3x original image
            powerrange: [4, 10], //Possible range: 2x to 10x magnification
            magnifiersize: [120, 120] //Set size of magnifier to 120px by 120px
        });
    });
</script>';

a better approach, however, is to simply put all of your javascript into an external file on your website. then, use php to write a <script> tag to call it (towards the bottom of the page is still best):

PHP Code:


print '<script src="/path/to/your/scripts.js"></script>';

**Duragroup** · 04-25-2012, 02:56 PM

traq thank you for your suggestions. I tried both approaches and still no luck. The code identified was already in the HEAD section of the web page. I have now replaced it from the HEAD and put it in the BODY. The code missing is the code written by ddpowerzoomer.js found in the init:function var $magnifier

**traq** · 04-25-2012, 03:32 PM

Please post the code you are having trouble with, and/or a link to the page on your site that contains the problematic script so we can check it out.

**Duragroup** · 04-26-2012, 04:29 PM

[HTML]<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
<script src="includes/templates/sophyblue/jscript/jscript_ddpowerzoomer.js" type="text/javascript">
<script src="includes/templates/sophyblue/jscript/jscript_easySlider.js" type="text/javascript">
<script src="includes/templates/sophyblue/jscript/jscript_jquery.js" type="text/javascript">
</head>
<body id="indexBody">
<div id="mainWrapper">
<div id="headerWrapper">
<a name="top"></a>
<div id="logoWrapper">
<div id="logo">
<a href="http://localhost/">
<img width="1015" height="115" alt="" src="includes/templates/sophyblue/images/header_bg.jpg">
</a>
</div>
</div>
<br class="clearBoth">
</div>
<div id="searchCartBarWrapper">
<div id="navEZPagesTopWrapper"> </div>
<div id="navCatTabsWrapper">
<table id="contentMainWrapper" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td id="navColumnOne" class="columnLeft" style="width: 175px">
<div id="navColumnOneWrapper" style="width: 175px">
<div id="categories" class="leftBoxContainer" style="width: 175px">
<div id="information" class="leftBoxContainer" style="width: 175px">
<div id="languages" class="leftBoxContainer" style="width: 175px">
<h3 id="languagesHeading" class="leftBoxHeading">Languages</h3>
<div id="languagesContent" class="sideBoxContent centeredContent">
<a href="http://localhost/index.php?main_page=index&cPath=3_1&language=en">
<img width="60" height="17" title=" English " alt="English" src="includes/languages/english/images/English2.gif">
</a>
<a href="http://localhost/index.php?main_page=index&cPath=3_1&language=fr">
<img width="60" height="15" title=" français " alt="français" src="includes/languages/french/images/bufrench1.gif">
</a>
</div>
</div>
<div id="currencies" class="leftBoxContainer" style="width: 175px">
<div id="moreinformation" class="leftBoxContainer" style="width: 175px">
</div>
</td>
<td valign="top">
<div id="navBreadCrumb">
<div id="indexCategories" class="centerColumn">
<h1 id="indexCategoriesHeading">Gesso</h1>
<div id="categoryDescription" class="catDescContent">
Made of 100% Gesso Coated cotton to exacting requirements and then coated with a white matte, water resistant, ink jet receptive coating that is both acid-free and pH neutral. It offers excellent image quality, high color saturation, wide color gamut, and brilliant color reproduction. The coating is highly resistant to cracking and flexible enough to easily bend and stretch over frames without sagging. Suitable for all applications which require superior image quality and archival display life.
<br>
<br>
<img id="myimage" src="/images/Canvas Photos/can401 frame.jpg" style="width: 1000px; height: 700px;">
</div>
<div class="categoryListBoxContents" style="width:33%;">
<a href="http://localhost/index.php?main_page=index&cPath=3_1_4">
<img width="1" height="1" title=" CAN1001 " alt="CAN1001" src="images/pixel_trans.gif">
<br>
CAN1001
</a>
</div>
<div class="categoryListBoxContents" style="width:33%;">
<a href="http://localhost/index.php?main_page=index&cPath=3_1_5">
<img width="1" height="1" title=" CAN201 " alt="CAN201" src="images/pixel_trans.gif">
<br>
CAN201
</a>
</div>
<div class="categoryListBoxContents" style="width:33%;">
<a href="http://localhost/index.php?main_page=index&cPath=3_1_6">
<img width="1" height="1" title=" CAN701 " alt="CAN701" src="images/pixel_trans.gif">
<br>
CAN701
</a>
</div>
<br class="clearBoth">
</div>
</td>
</tr>
</tbody>
</table>
<div id="navSuppWrapper">
<div id="siteinfoLegal" class="legalCopyright">
<script src="includes/templates/sophyblue/jscript/complete-com.js">
// JavaScript Document
jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom({
defaultpower:4, //default power: 3x original image
powerrange: [4, 10], //Possible range: 2x to 10x magnification
magnifiersize: [120, 120] //Set size of magnifier to 120px by 120px
})
})
</script>
</div>[\HTML]

**traq** · 04-26-2012, 07:30 PM

Code:

<script src="includes/templates/sophyblue/jscript/complete-com.js">
// JavaScript Document
jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom({
defaultpower:4, //default power: 3x original image
powerrange: [4, 10], //Possible range: 2x to 10x magnification
magnifiersize: [120, 120] //Set size of magnifier to 120px by 120px
})
})
</script>

When your <script> element has a src attribute, the browser looks for that script, and everything inside the <script> tags is _ignored_.

HTML Code:

<script>
// JavaScript Document
jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom({
defaultpower:4, //default power: 3x original image
powerrange: [4, 10], //Possible range: 2x to 10x magnification
magnifiersize: [120, 120] //Set size of magnifier to 120px by 120px
})
})
</script>

That might be the problem you're referring to, but I'm still not sure I completely understand what you're asking. For one, this:

ddpowerzoomer.js does not write the appropriate code into the body of the web page...

gives the impression that you expect the script to add code to the page. It does not, and is not supposed to.

Also, when I suggested that you needed to use PHP to add the script to your page, I assumed that the script was missing - however, your last post shows the script, in place, on your page; so that's probably not the problem.

If neither of these are the case, you'll need to explain exactly what's going on, very carefully and specifically, so there is no confusion.

(Also, please use the board's BBCode tags - like [HTML] ... [/HTML] - around yuor code, to make it easier to read.)

Thread: Power Zoomer in a PHP environment

Thread Tools

Search Thread

Power Zoomer in a PHP environment

Bookmarks

Bookmarks

Posting Permissions