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:
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]);
HI!
Before you read, I’m sorry about reply in a incorrect place and sorry about my bad english.
I saw that you modified your minishowcase with EXIF information:
http://minishowcase.net/community/comments.php?DiscussionID=245&page=1#Item_0
and I can’t do it in my new gallery.
Could you tell me it step by step?
Thanks a lot for all!
Regards from Spain
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 = '';
(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!
Sorry, I can’t see yout email in your blog so I will reply you here.
I made changes in files but exif don’t show in my gallery.
My file libraries/ajax.functions.js shows
imgdiv.style.height = Math.round(nh+18)+’px’;
Your line is:
imgdiv.style.height = Math.round(nh+65)+’px’;
Why?
The rest is the same but not work for me.
My gallery: http://www.theolivo.net/xer/
Thanks a lot
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!