Loading comments and exif data dynamically in jQuery

fuz3d

This is my first attempt to make a Zenphoto theme. Actually, not 'make' a theme, but convert a jQuery gallery [http://tympanus.net/codrops/2010/05/14/sliding-panel-photo-wall-gallery-with-jquery/] to Zenphoto theme.

The thumbnails of the pictures are loaded, when the user clicks on the thumbnail, the image enlarges dynamically [jQuery] i.e. without going to the image page loading the image in the album page itself. I have been successful converting that jQuery gallery [as is] to a basic Zenphoto theme.

The issue arises when I want to show comments and meta data for the image clicked.

I am not sure what parameters to pass via jQuery to which file to get the comments and exif data loaded dynamically.

What I have done till now is:

-Get the image parameter via the id of the image which I have set on album.php

`
<?php $i = $_zp_current_image->getFileName(); ?>
<?php printThumbImage(html_encode(getUnprotectedImageURL()), html_encode(getBareImageTitle()), '', $i); ?>
`
-Make a PHP file with the following code ---- anotherfile.php:

`
<?php
require_once("functions.php");

$image = $_POST['image'];

//echo $image; <-- echoes the image id successfully for the image clicked

if (getMetaDataImage($image)) {
printImageMetadata('', false);
}

?>
`
But this throws an error understandably: `Call to a member function get() on a non-object`

What parameter do I have to pass to getMetaDataImage function or printImageMetaData function to load the metadata dynamically for the image clicked? And similarly to the comment function?

acrylian

Please see:
http://www.zenphoto.org/news/category/theming-templating
and especially:
http://www.zenphoto.org/news/zenphotos-object-model-framework

In short you arer outside the context and have to pass the image name and its albums name (you can have images of the same name in several albums, you know?) and then create a new image object on the page.

fuz3d

Thanks for your quick reply.

After reading those links, this is what I came up with:

anotherfile.php

`
<?php
require_once("functions.php");

$image = $_POST['image'];
$album = $_POST['album'];

$galleryobject = new Gallery();
$albumobject = new Album($galleryobject, $album);

$imageobject = newImage($albumobject, $image);

//echo $image;
if (getMetaDataImage($imageobject)) {
printImageMetadata('', false);
}

?>
`
This gives the error: `Class 'Gallery' not found`

Am I missing something?

sbillard

Unless your above code is situated in the zp-core folder the `require_once("functions.php");` will not load the Zenphoto file of that name. You will have to spell out the full path to that file.

How is `anotherfile.php` being loaded?

I may be confused, but I suspect your are going down the wrong track. Remember that there is a separation of the server side and the client side of your site. PHP runs on the server side. jQuery (or any javascript) runs on the client side.

What this means is that you have to populate any jQuery details into the page WITH php. I suggest you download the development nightly build. There you will find an update Effervescence+ theme that has a jQuery gallery based on ad-gallery. That may not be the gallery look you want but certainly it should give you insite on how these things are done.

fuz3d

anotherfile.php is loaded via jQuery.

Here is the code:

`
function exifLoad(image) {

var album = $(".zp_uneditable_album_title").html();

var postData = {
"image" : image,
"album" : album
};

$.ajax({
type: "POST",
url: "/zenphoto/themes/mytheme/anotherfile.php",
data: postData,
success: function(data){
$("#exif-panel").html(data);
}
});

}
`
And this is the changed `anotherfile.php`:

`
<?php
define('WEBPATH', '/zp-core');

require_once(dirname(dirname(dirname(__FILE__))). WEBPATH .'/functions.php');
require_once(dirname(dirname(dirname(__FILE__))). WEBPATH .'/functions-controller.php');

zp_load_gallery();

require_once(dirname(__FILE__)."/functions.php");

$image = $_POST['image'];
$album = $_POST['album'];

$galleryobject = new Gallery();
$albumobject = new Album($galleryobject, $album);

$imageobject = newImage($albumobject, $image);

//echo $image;
if (getMetaDataImage($imageobject)) {
printMetadataImage('', false);
}

?>
`
Though now it doesn't throw any error, it doesn't display any data either. Nada. Blank.

fuz3d

I would just like to add that I can load the images dynamically. It's just the comments and exif data of the selected photo.

sbillard

Nop, it is not uploaded by jQuery. It may be referenced by jQuery as an URL, but not uploaded because, as I said, jQuery runs on the client, PHP runs on the server.

I think you have got a bit out of your league. This is really not how WEB services work.

acrylian

A quick tipp: If you want to load a page dynamically via ajax/jquery that should be theme environment, use a custom theme page and the matching url (info on the theming tutorial).

fuz3d

@sbillard, I know jQuery is on client-side and PHP is on server-side. I'm not sure what you meant by 'loaded' and thought you were asking how the page is being called.

If I didn't know, I wouldn't have successfully be able to load the images directly via jQuery.

fuz3d

Thanks @acrylian for the tip!