phusion - life in shadow.

Hi Sergio

Its okay =)!

For the exif information to be displayed on your minishowcase, you’ll need to create a file ‘exif.php’ inside your minishowcase root folder with the following content:

<?

$exif = exif_read_data($_GET["src"], 0, true);
foreach ($exif as $key => $section) {
if($key==”IFD0″ or $key==”FILE” or $key==”EXIF” )
foreach ($section as $name => $val) {
if($name == “FileName”) $html = “$name: $val<br />”;
//if($name == “FileDateTime”) $html .= “$name: $val<br />”;
//if($name == “FileSize”) $html .= “$name: $val<br />”;
if($name == “Make”) $html .= “Taken With: $val”;
if($name == “Model”) $html .=”, $val<br />”;
if($name == “Orientation”) $html .= “$name: $val<br />”;
if($name == “ExposureTime”) $html .= “$name: $val<br />”;
if($name == “FNumber”) $html .= “$name: $val<br />”;
if($name == “ExposureProgram”) $html .= “$name: $val<br />”;
if($name == “ISOSpeedRatings”) $html .= “$name: $val<br />”;
if($name == “ShtterSpeedValue”) $html .= “$name: $val<br />”;
if($name == “ApertureValue”) $html .= “$name: $val<br />”;
if($name == “Flash”) $html .= “$name: $val<br />”;
if($name == “FocalLength”) $html .= “$name: $val<br />”;
else echo “”;

}
}
?>

div = document.getElementById(’miniCaption’);
div.innerHTML = ‘< ?php echo $html; ?>‘;


(this file actually depicts how/what kind of exif information will be displayed on your minishowcase)

Next, on the AJAX side, you will need to modify libraries/ajax.functions.js and find the line:
imgdiv.style.height = Math.round(nh+65)+'px';

Then add this line below:

innerhtml('img', imgout+"<div id=miniCaption></div>");
var getExif = ajax_do(”exif.php?src=”+escapedImg);

(this function parse the information into the lightbox)

At the end of the same file, add this:

url1 = document.location.href;
xend = url1.lastIndexOf(”/”) + 1;
var base_url1 = url1.substring(0, xend);

function ajax_do(url1) {
var jsel = document.createElement(’SCRIPT’);
jsel.type = ‘text/javascript’;
jsel.src = url1;
document.body.appendChild (jsel);
}

(this function uses ajax to communicate with the exif.php)

So the actual script flow is actually like this:

OpenImage->Load exif with ajax from exif.php->parse exif into lightbox window.

That’s all feel free to email me if you have any doubts!

Hi sergio

Sorry I thought my email was stated somewhere on my blog but I realised it wasn’t! You can contact me via phusion[at]devsync[dot]net

Im not sure which part did I miss out in the tutorial, and I couldn’t see the backend because its hidden from the front source page so maybe this is the problem: updateImage();

Check your updateImage() whether is it the same as mine:

function updateImage(request)
{
var result = getEncoded(request,’url’);
currentImage = new Image();
currentImageData = new Object();

var output = result.split(’;');
var num = output[0];
var img = output[1];
var name = imageName(getEncoded(output[2],’esc’)); //// ######

var w = Math.floor(output[3]);
var h = Math.floor(output[4]);

var nw = w;
var nh = h;
var link = false;

var iname = ‘<strong>’+name
+’</strong> <small>’+w+’x'+h+’px (’
+lang['loading_image']+’ ‘
+num+’ ‘+lang['loading_of']+’ ‘
+images_total+’)</small>’;

var imgout = ”;

//// size code

//alert(’num:’+num+’\nimg:’+img+’\nname:’+name+’\nw:’+w+’\nh:’+h);

if (set_double_encoding) {
escapedImg = escape(img);
} else {
escapedImg = Url.encode(img);
}
escapedImg = escapedImg.substring(0);

//alert(acc); ajax_do("exif.php?src="+acc)

//// this code selects the image to be displayed
//// whether cached, resized or original

setMaxSizes();

var resized_img = false;

// set cached image size
if (nh > max_image_height) {
nh = max_image_height;
nw = Math.round((w*max_image_height)/h);
if (nw > max_image_width) {
dw = nw;
dh = nh;
nw = max_image_width;
nh = Math.round((dh*max_image_width)/dw);
}
resized_img = true;
}
var img_maxsize = (nh > nw) ? nh : nw;
var fw = nw;
var fh = nh;

if (resized_img && create_thumbnails) {
if(num == image_list.length-1) imgout = ‘<a href="javascript:;" target="_blank" onclick="prevImage();">’;
else
imgout = ‘<a href="javascript:;" target="_blank" onclick="nextImage();">’;

imgout += ‘<img id="mainimg" class="imagen" src="’;

if (scale_big_images) {
imgout += base_url+’libraries/thumb.display.php?’;
imgout += ‘max=’+img_maxsize
+’&q=’+large_image_quality
+’&img=’+escapedImg;
} else {
imgout += base_url+escapedImg;
}
imgout += ‘" width="’+fw+’" height="’+fh+’"’;
imgout += ‘ title="’+name+’" alt="’+name+’" />’;
imgout += ‘</a>’;

imgout += ‘<p><a href="’+escapedImg+’" target="_blank"><small>’+lang['alert_enlarge']+’</small></a></p>’;

} else {
imgout = ‘<img id="mainimg" class="imagen" src="’+escapedImg+’" width="’+fw+’" height="’+fh+’" title="’+name+’" alt="’+name+’" />’;

}

var imgdiv = getID(’img’);
imgdiv.style.width = Math.round(nw+35)+’px’;
imgdiv.style.height = Math.round(nh+65)+’px’;
innerhtml(’img’, imgout+"<div id=miniCaption></div>");
var acc = ajax_do("exif.php?src="+escapedImg);

//// set image title
innerhtml(’image_title’, iname);

//// create nav thumbs
//buildNavThumbs();

/*if (!preview_open) {
buildNavThumbs();
preview_open = true;

} else {
//updateNavThumbs();

if (nav_direction_flag == ‘next’) {
appendNavThumb();
} else if (nav_direction_flag == ‘prev’) {
prependNavThumb();
} else {
alert(’nav_direction_flag: undefined’);
}
}*/

setCurrentPosition();
}

And your css in styles/gallery.css, ensure that the content is being layout properly:

#image_container #miniCaption {
font-weight: normal;
background: #fff;
height: auto;
padding: 15px;
text-align: left;
}

And for my,

imgdiv.style.height = Math.round(nh+65)+’px’;

its to change my height for the image..

You’re Welcome!