PDA

View Full Version : 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 (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.
is this (http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm) 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
...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
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):
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
<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_.
<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
... - around yuor code, to make it easier to read.)

Duragroup
04-27-2012, 02:53 PM
Thanks again Traq

As you can see from the code presented I have attempted to implement the magnifier code (scripts) into an application called Zen Cart. I have the exact same code working outside this application. When running the Zen Cart application the image is presented in the browser but the magnifier is not shown. I believe it is JQuery which actually creates the code. Is there any other information I can provide to help correct this problem. With reference to the JQuery code in complete-com.js I used php to
print '<script src="includes/templates/sophyblue/jscript/complete-com.js"></script>'; The code presented in previous post was from firebug which is the resultant code after the php modules have created the page.

traq
04-27-2012, 03:49 PM
again, javascript does not "create" code. If something is missing, you have to put it in.

Look at the markup you posted earlier:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
<!--
this <script> element (and the three others in your <head>) is never closed.
It probably won't work,
and almost definitely has something to do with other stuff not working.

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

<!--and did you fix this one?-->
<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>
<!--
this script element calls the "complete-com.js" script.
the javascript inside the element (the .ready() function)
_will_never_be_run_.

should be like this:
-->
<script src="includes/templates/sophyblue/jscript/complete-com.js"></script>
<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>

I have the exact same code working outside this applicationlook at the two and compare them very carefully. Are paths correct on both versions (you're using relative paths for all you script src attributes; and at least some of them refer to "localhost" - are you testing one version live, and the other locally)? Does your working version have the same mistakes I've pointed out?

Duragroup
04-30-2012, 05:42 PM
traq I have found the problem thanks for all your effort. It has nothing to do with the magnifier code. There is another script called jscript_jquery.js that conflicts with the magnifier scripts. I don't know exactly why as of now. Find the script header, as whole script is quite large.



/*
* PseudoCSS 1.0 - Enables Cross Browser support of CSS2 and CSS3 pseudo classes
*
* Copyright (c) 2008 Alen Grakalic (pseudocss.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
* Built using jQuery library
*
* jQuery 1.2.3 - New Wave Javascript
* Copyright (c) 2008 John Resig (jquery.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*/