cpmFetch + EnlargeIT + ajax refresh?

[Shane]

I am trying to get the best of both worlds here... 

site:  http://philmontforum.com - a Joomla installation with Mehdi's Coppermine Bridge

I have deployed two different cmpFetch php files into my Joomla homepage that show either a) 1 350px wide random image from cpg; or b) 1x4 random thumbnail images.  These are selected on the home page randomly by the Joomla front page component.  Both of these cpmFetch php files include a modified version the EnlargeIt script (found here) and it works perfectly.  Now I'm trying to include the ajax refresh (found here) into this file.  If you are going to the site, you may have to reload the home page a few times until the correct php file is loaded.  It will be the one with the "Get another photo" link above the single photo.  The "Get another photo" link just doesn't work.  Therein lies the problem...

I know pretty much nothing about coding, but have gotten the coding to work to the point that EnlargeIt still works and I have a "refresh" link to appear above the random image that calls the java (ajax) scripting.

I fear that I need to work on the java script, and I don't know what to change...

php file path:  pf.com/cms/images/jumienlargeit1x1ajaxrefresh.php
gal-samp.js path:  pf.com/cms/images/Source/ajax-galsamp.js
pf.com = philmontforum.com... Not sure what other paths you might need...

Here is the jumienlargeit1x1ajaxrefresh.php file:

Code Select Expand


<?php
//
// Gallery Coppermine script by P.J.Lawrence (October 2008)
// Disclaimer: This mod is provided "as is" without express or implied warranty.
//
// Using... 
// Enlargeit Script (http://enlargeit.timos-welt.de/english/index.php)
// CpmFetch http://cpmfetch.fistfullofcode.com/
//
// Notes..
// Ensure that the variable enl_gifpath in enlargeit.js points to the correct directory

$CoppermineWebPath = '../cpg/';  // Web path to Coppermine Gallery
$EnlargeitWebPath = '/Source/'; // Web path to Enlargeit java code
$cpmfetchPath = '../cpg/cpmfetch/'; // System Path to CPMFetch

if ($_GET['rows']) {
$Rows=(int) $_GET['rows'];
}
else {
$Rows=1;
}
if ($_GET['cols']) {
$Cols=(int) $_GET['cols'];
}
else {
$Cols = 1;
}

include  $cpmfetchPath."cpmfetch.php";
echo '<script type="text/javascript" src="images/Source/enlargeit.js"></script>';
echo '<script type="text/javascript" src="images/Source/ajax-galsamp.js" /></script>';

echo '<CENTER>';
echo '<div id=ajax-galsamp>';
echo '<a href="javascript:getGalsamp()">Get another photo</a>';
$objCpm = new cpm($cpmfetchPath."cpmfetch_config.php");
$option = array(
'linkstyle' =>'image" target="_blank" onclick="return false;',
'imagestyle'  =>'set1" onclick="enlarge(this);',
"imagesize" => "large" ,
"imagewidth" => "350" ,
'alttag' => '{{pFilename}}" id="{{pPid}}" longdesc="'.$CoppermineWebPath.'albums/{{pFilepath}}{{pFilename}}',
//'tablestyle' => 'windowbg" width="150" bordercolor="#0099ff" border="5" height="150"',
"tablestyle" => "cpmfetch");


$objCpm->cpm_viewRandomMediaFrom("cat=2,3,4,5,7",$Rows,$Cols,$option);

$objCpm->cpm_close(); 

echo '<a href="'.$CoppermineWebPath.'">| View the Photo Gallery |</a>';
echo '</div>';
echo '</center>';
?>


Here is the ajax-galsamp.js code:

Code Select Expand


function getGalsamp() {
var xmlHttpGalsamp=null;
try {
    xmlHttpGalsamp = new XMLHttpRequest();
} catch (e) {
    try {
       xmlHttpGalsamp=new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
       xmlHttpGalsamp=new ActiveXObject("Microsoft.XMLHTTP");
    }
}
xmlHttpGalsamp.onreadystatechange = function() {
    if (xmlHttpGalsamp.readyState == 4)
       try {
          if (xmlHttpGalsamp.status == 200) {
             document.getElementById("ajax-galsamp").innerHTML
                = xmlHttpGalsamp.responseText;
          }
       } catch (e) {
          document.getElementById("ajax-galsamp").innerHTML
             = "Error on Ajax return call : " + e.description;
       }
}
xmlHttpGalsamp.open("get","jumienlargeit1x1ajaxrefresh.php");
xmlHttpGalsamp.send(null);
}
ajaxGetGalsamp();


Is there a way to do this without the <div id=ajax-galsamp> and </div> around the cpmFetch code in the php file?
Any help here would be great.

Even if it doesn't/can't work, both of these cpmFetch additions (EnlargeIt & Ajax refresh) are great, and I want to say thanks to both contributors.

[PeterLawrence]

I think I've spotted the problem.
You don't place the <div id=galsamp> inside the php script.

The <div id=galsamp></div> should go inside your main html document to indicate where the html generated by the php script is to be displayed.

If you look at the original post it states....
On the page where the image appears, remove the image html code and replace it with an empty div:

Code Select Expand


<div id=galsamp></div>


Anywhere on the page, insert:

Code Select Expand


<script type="text/javascript" src=ajax-galsamp.js" />


[PeterLawrence]

This is my html test page, which seems to be ok in firefox, but for some reason it does not update in ie.

Code Select Expand


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="/ajax-galsamp.js"></script>
<script type="text/javascript" src="/modules/enlargeit/Source/enlargeit.js"></script>
<script type="text/javascript" src="/modules/enlargeit/Source/ajax-galsamp.js" /></script>
</head>
<body onload="javascript:getGalsamp()">
<div id=ajax-galsamp></div>
<a href="javascript:getGalsamp()">Refresh</a>
</body>
</html>


Note the enlargeit js scripts are included here and not in the php file.

[PeterLawrence]

Note the second include for ajax-galsamp.js is not required. Typo on my part.

[PeterLawrence]

I think I've found the problem with Internet Explorer.
Internet Explorer only refreshes the cached if the response has expired (i.e., after the date of received "Expires" header), hence you keep getting the same image.
A possible work around can be found at... http://en.wikipedia.org/wiki/XMLHttpRequest#Caching

[PeterLawrence]

I've updated the original js code so it now refreshes in IE too.

Code Select Expand


function getGalsamp(TheUrl) {
var xmlHttpGalsamp=null;

// Provide the XMLHttpRequest class for IE 5.x-6.x:
if( typeof XMLHttpRequest == "undefined" ) XMLHttpRequest = function() {
  try { return new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch(e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch(e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP") } catch(e) {}
  try { return new ActiveXObject("Microsoft.XMLHTTP") } catch(e) {}
  throw new Error( "This browser does not support XMLHttpRequest." )
};

xmlHttpGalsamp = new XMLHttpRequest();

xmlHttpGalsamp.onreadystatechange = function() {
if (xmlHttpGalsamp.readyState == 4) {
   if(!xmlHttpGalsamp.getResponseHeader("Date")) {
  // Work around  for Internet Explorer Cache problem
  var cached = xmlHttpGalsamp;
  xmlHttpGalsamp =  new XMLHttpRequest();
  var ifModifiedSince = cached.getResponseHeader("Last-Modified");
  ifModifiedSince = (ifModifiedSince) ?
  ifModifiedSince : new Date(0); // January 1, 1970
  xmlHttpGalsamp.open("GET", TheUrl, false);
  xmlHttpGalsamp.setRequestHeader("If-Modified-Since", ifModifiedSince);
  xmlHttpGalsamp.send("");
  if(xmlHttpGalsamp.status == 304) {
xmlHttpGalsamp = cached;
  }
   }
           
           // display the given url
   try {
  if (xmlHttpGalsamp.status == 200) {
document.getElementById("ajax-galsamp").innerHTML
= xmlHttpGalsamp.responseText;
  }
   } catch (e) {
  document.getElementById("ajax-galsamp").innerHTML
= "Error on Ajax return call : " + e.description;
   }
}
}
xmlHttpGalsamp.open("get",TheUrl);
xmlHttpGalsamp.send(null);
}

...and my test html code now looks like this..

Code Select Expand


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="ajax-galsamp.js"></script>
<script type="text/javascript" src="enlargeit.js"></script>
</head>
<body onload="javascript:getGalsamp('cpmenlarge.php')">
<div id=ajax-galsamp>Loading...</div>
<a href="javascript:getGalsamp('cpmenlarge.php')">Refresh</a>
</body>
</html>


Note that the file to import via the js code is now specified in the call to the function getGalsamp.

[Shane]

Peter,

I've finally had time to play with this some.

I've got the test.htm file to work (pull photos from CPG and refresh) but the enlargeit script is not working.

I've attached a zip file with my working files for this little project - test.htm, cpmenlarge.php, and ajax-galsamp.js.

All are loaded in the http://philmontforum.com/cms/images/Source directory.
test.htm - http://philmontforum.com/cms/images/Source/test.htm
cpmenlarge.php - http://philmontforum.com/cms/images/Source/cpmenlarge.php

Any idea of why the enlargeit script is not working?  The "working" gif opens, but the photo never enlarges.

Thanks for your help on this!
Shane

[PeterLawrence]

If you just load the cpmenlarge.php into the browser does it work then?
If it does, then try removing the loading of the enlargeit.js from the php file since this is done in the test.htm.

[Shane]

No, cpmenlargeit.php does not work either.  The "timer" .gif loads, but the photo is not enlarged.

I have the loading of the enlargeit script in both the .htm file and the .php file.  If I take the loading off the .php file, I do not get the "timer" when viewing the .php file in my browser.

[PeterLawrence]

I think the solution is to first get the php script to work standalone.
I noticed that the $CoppermineWebPath path variable is not assign, this should be set to the location of your coppermine gallery.
e.g.
$CoppermineWebPath = '../../../cpg'
Once it works standalone then remove the line
echo '<script type="text/javascript" src="enlargeit.js"></script>';
from the php file since the load of the enlargeit.js should be done in the main web page, in this case test.htm.

[Shane]

Thanks Peter!  It works!  Somewhat...

See it in action at http://philmontforum.com.  The front page will load with a photo (or photos) pulled from my Coppermine install.

In the past, I've used a file rotator to rotate loading of two cpmfetch .php files on my front page.  One .php file shows one image at 350pixel width (call it 1x1).  The other shows one row of three thumbnail images (call it 1x3).

I have these both setup now on my live site using the ajax+enlargeit (go to the site and hit refresh to see each version of the file).  I had to add the <script> lines and the <body onload> lines to my joomla template html for this to work.  I also changed the function name of the applet to getGalsamp1x1 and getGalsamp1x3.

I have set up two <body onload> statements - one for each version of the ajax+enlargeit file.  Here is my actual <body onload> line:

Code Select Expand

<body onload="initLightbox();javascript:getGalsamp1x3('images/Source/cpmenlarge1x3.php');javascript:getGalsamp1x1('images/Source/cpmenlarge1x1.php')" id="pagebg">

My problem is that I cannot make one onload statement specific for the 1x1 file and the other statement specific for the 1x3 file.  Whether joomla loads the 1x1 file or the 1x3 file, the template will load the 1x3 applet in firefox.  In IE it loads the 1x1 applet.

Any ideas how to control which galsamp applet loads for which file?

File names:
For 1x1 - site/cms/images/jumi1x1refreshenlarge.htm; site/cms/images/Source/ajax-galsamp1x1.js; site/cms/images/Source/cpmenlarge1x1.php
For 1x3 - site/cms/images/jumi1x3refreshenlarge.htm; site/cms/images/Source/ajax-galsamp1x3.js; site/cms/images/Source/cpmenlarge1x3.php

Files used for this are attached...

Once again, thank you Peter for helping me get this thing working!

[Shane]

Fixed the problem from the above post.

I woke up this morning and the first thought in my mind was "rename the <div>s" so that is what I did.

<div> for the 1x1 call is now <div id=ajax-galsamp1x1>
<div> for the 1x3 call is now <div id=ajax-galsamp1x3>

I changed the <div> name in each version of the applet so the correct one loads depending on which version loads on my home page.

I should have been smarter than that.  I really wish I knew what I was doing...