Recently I coded an interesting photo gallery using jQuery. I’ve named it “jQuery Mix Photo Gallery”. I’ve included the screen-shots here.
You may have a look at the live demo here. The photo gallery is free to download. Here is the download link. You may modify it according to your need and use it in your commercial projects. Please drop a comment if you like it and suggest me how can I make it much better.
On my another post I mentioned that cycle is a great jQuery plugin. I use it very often for slideshow. Recently I used it on a project where the slideshow had many(20+) wallpaper sized images. So loading time was a great issue.
The default cycle integration includes all the images during page loading which is okay for small images, but highly affects the page loading time for high resolution images. cycle plugin is highly flexible! I fixed the issue by loading images dynamically one after another at the end of each slide, literally before the beginning of each slide.
Here is how I did it:
<div id="slideshow"><!-- slides will be added here --></div>
var gallery = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg", "images/7.jpg", "images/8.jpg", "images/9.jpg", "images/10.jpg", "images/11.jpg", "images/12.jpg", "images/13.jpg", "images/14.jpg"]; // and so on.. array of images
// Array clone function.
Array.prototype.clone = function () {
var arr = new Array();
for (var property in this) {
arr[property] = typeof(this[property]) == 'object' ? this[property].clone() : this[property];
}
return arr;
}
var gal = null; // gal should be global as I'll use it inside onBefore function
$(function () {
gal = gallery.clone(); // cloning the array is not mandatory, but doing so will keep the main array unchanged.
$('#slideshow').empty().append('<img src="' + gal.pop() + '" /><img src="' + gal.shift() + '" /><img src="' + gal.shift() + '" />') // adding the last, first and second element of the array to the slideshow div, then start the cycle plugin.
.cycle({
startingSlide: 1,
// this is required (1 is the 2nd slide) as the first slide is the last element of the array. if you use manual next/prev button clicking on #prev will show the first element.
before: onBefore, // loads the next image at the beginning of each slide. (NOT all at once)
next: "#next",
prev: "#prev"
});
var totalSlideCount = 1 + gal.length;
function onBefore(curr, next, opts, fwd){
// at first addSlide is not defined, so we should return.
if (!opts.addSlide) return;
// if all the elements of the array are added no need to add them again!
if (opts.slideCount == totalSlideCount) return;
// shift or pop from slide array
var nextSlideSrc = fwd ? gal.shift() : gal.pop();
// add next slide
opts.addSlide('<img src="' + nextSlideSrc + '" />', fwd == false);
}
});
In this code above, cloning the array is optional. I used it as I needed the main array for later use. Probably you know if you use the global array reference to a local variable and apply pop()/shift()/push() functions to the local variable, the global one will be affected. cos the local variable is just a reference to the address of the global array variable.
At first the last, 1st and 2nd elements of the array are added to the #slideshow div and the cycle is started from the 2nd slide. Before starting of each slide onBefore function is called. The onBefore function adds new slide to the slideshow and stops when all the array elements are added to the slide.
You may use it for small size images also if you need to improve the page loading duration.
IE6 is always a nightmare for web developers. The most painful drawback is it does not support the alpha transparency of transparent png images and you know how to solve this problem using iepngfix or jquery.pngFix.js.
You must be thinking.. what is new in my post then!! Have you ever used any of them for dynamic png images? Some people call it “Loading an image via ajax”. Let me explain what I mean by “dynamic png images”.. say you have a page where clicking on a link does not reload the page, but load a transparent/semitransparent png image. Most specifically, I was working on a project where user types some text in a text box, it is converted to transparent png image on the fly using php and then it is displayed inside a div which has a graph-paper like background-image. This whole thing is done without reloading the page at all.
It looks okay on FF, safari, IE7 but on IE6 the transparent portion looks Grey. The iepngfix.htc script didn’t help, cos it only works on the images which are loaded and showed at the beginning of page loading. After the page is fully loaded and you load another png image using ajax this script won’t work. But I could not do that for my project as it is meant to be loaded dynamically using ajax for the sake of advanced user experience.
I started googling for it, no luck. Finally I modified a portion of code used in the iepngfix.htc file and fixed the problem using this simple javascript code. (FYI, I was using YUI so only the browser checking part is done using it, you can use jQuery or pure javascript for browser detection)
var textImage = new Image();
textImage.src = "text.png"; // src of the png image. okay if not ie6
if (YAHOO.env.ua.ie > 5 && YAHOO.env.ua.ie < 7) { // if IE 5+ or 6 or 6+
var timg_src = textImage.src; // textImage
var new_img = new Image(); // just as a preloader
new_img.src = timg_src;
new_img.onload = function(){ // remember, the image is being loaded dynamically, so apply the filter after it is loaded.
var ti = document.getElementById("textImage"); // the ID of the img tag where it'll be loaded
ti.style.width = new_img.width; // you can get the width/height of image after it is fully loaded
ti.style.height = new_img.height; // and you must "DEFINE" the image height/width. "auto" height/width won't work!
// This is it. apply the filter :)
ti.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + timg_src + "', sizingMethod='scale')";
ti.setAttribute('src', 'blank.gif'); // don't forget this part. the image src is replaced with a blank gif image.
}
}
Here is another version of the code which is not for dynamic images. It’s alternative of iepngfix.htc. In some cases you may not like using iepngfix.htc, rather want to control it yourself. For example if your page has hundreds of png images which are not transparent and only a few images that are transparent, in this case using iepngfix.htc will make the whole process too slow. I applied a pseudo class “png” to all png images & divs with png background image with fixed height & width and applied this simple jQuery code:
$(window).load(function(){ // after all the images are loaded
if ($.browser.msie && parseInt($.browser.version.substr(0, 1)) < 7) { // ie6 or 5
$("img.png").each(function(){
$(this).css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + $(this).attr('src') + "', sizingMethod='scale')").attr("src", "images/blank.gif");
});
$("div.png").each(function(){
var bg = $(this).css("backgroundImage");
bg.match(/^url[("']+(.*\.png)[)"']+$/i);
bg = RegExp.$1;
$(this).css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bg + "', sizingMethod='crop')").css("backgroundImage", "none");
});
}
});
Hope you’ll find it helpful. Please let me know if you have any better idea.
As a programmer we must always think about the exceptional situations. Generally I use my own function to resize uploaded images. It supports jpg, gif, png images with transparency which is “almost” okay.
<?php
// example use
// resizeImage("corrupted_image_1.jpg", "corrupted_image_resized.jpg", 100, 100, "jpg");
function chkImgExt($n){
$tmp = explode('.', $n);
$ext = strtolower(array_pop($tmp));
if($ext == 'jpg' || $ext == 'jpeg' || $ext == 'gif' || $ext == 'png')
return $ext;
else
return false;
}
function resizeImage($src, $dest, $w, $h, $ext){
$real_path = dirname(__FILE__) . '/';
$tmpFile = $real_path."tmp_images/".time().'TMP.'.$ext;
copy($src, $tmpFile); // you may use move_uploaded_file() if the $src is a $_FILES referance
@chmod($tmpFile, 0777);
$src = $tmpFile;
list($width, $height) = @getimagesize($src);
$new_width = $w;
$new_height = $h;
switch($ext){
case 'jpg':
$image = imagecreatefromjpeg($src);
break;
case 'jpeg':
$image = imagecreatefromjpeg($src);
break;
case 'gif':
$image = imagecreatefromgif($src);
break;
case 'png':
$image = imagecreatefrompng($src);
break;
}
// Resample
$image_p = @imagecreatetruecolor($new_width, $new_height);
if ( ($ext == 'gif') || ($ext == 'png') ) {
$trnprt_indx = imagecolortransparent($image);
// If we have a specific transparent color
if ($trnprt_indx >= 0) {
// Get the original image's transparent color's RGB values
$trnprt_color = imagecolorsforindex($image, $trnprt_indx);
// Allocate the same color in the new image resource
$trnprt_indx = imagecolorallocate($image_p, $trnprt_color['red'], $trnprt_color['green'], $trnprt_color['blue']);
// Completely fill the background of the new image with allocated color.
imagefill($image_p, 0, 0, $trnprt_indx);
// Set the background color for new image to transparent
imagecolortransparent($image_p, $trnprt_indx);
}
// Always make a transparent background color for PNGs that don't have one allocated already
elseif ($ext == 'png'){
// Turn off transparency blending (temporarily)
imagealphablending($image_p, false);
// Create a new transparent color for image
$color = imagecolorallocatealpha($image_p, 0, 0, 0, 127);
// Completely fill the background of the new image with allocated color.
imagefill($image_p, 0, 0, $color);
// Restore transparency blending
imagesavealpha($image_p, true);
}
}
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
if(file_exists($dest)){
@unlink($dest);
}
// Output
switch($ext){
case 'jpg':
imagejpeg($image_p, $dest, 100);
break;
case 'jpeg':
imagejpeg($image_p, $dest, 100);
break;
case 'gif':
imagegif($image_p, $dest);
break;
case 'png':
imagepng($image_p, $dest);
break;
}
imagedestroy($image_p);
unlink($tmpFile);
return true;
}
?>
But when I tried resizing these 2 images (corrupted_image_1.jpg, corrupted_image_2.jpg) it failed! The error is:
gd-jpeg, libjpeg: recoverable error: Corrupt JPEG data: 9 extraneous bytes before marker 0xd9
I don’t know what does it mean!
First I thought the problem may be due to large file size or GD. I tried with larger file and it worked fine! Then I opened the corrupted images with photoshop and just save as jpg again, and yes it worked. It does not make good sense to me. How a general user will do that? I searched a lot on Google and got a lot of alternative image resizing codes and none of them worked. :(
Now what? Yes I used phpThumb long ago and to me (also most of you) it feels like using a lot of unnecessary codes just for simply resizing a silly image! I can’t believe phpThumb created the thumbnails of both of the corrupted images! yes, using GD! no imagemagick.
I have no idea how phpThumb do it? I never dare to look inside their codes :P
Here is the code using phpThumb to resize the images:
<?php
require_once('phpthumb/phpthumb.class.php');
$phpThumb = new phpThumb();
$capture_raw_data = false; $phpThumb->resetObject();
$phpThumb->setSourceFilename($targetFile); // your source image file
$output_filename = $tpath; // output file path
$phpThumb->setParameter('w', 100); // thumbnail width
$phpThumb->setParameter('q', 100); // thumbnail quality
$phpThumb->setParameter('config_output_format', 'jpeg'); // preferred thumbnail format
if ($phpThumb->GenerateThumbnail()){
if($phpThumb->RenderToFile($output_filename)){
// success
} else {
$msg = "Error during resizing \n" . $phpThumb->fatalerror . ' ' . $phpThumb->debugmessages;
}
} else {
$msg = "Error with file\n" . $phpThumb->fatalerror . ' ' . $phpThumb->debugmessages;
}
?>
If you are using your own function for image resizing please check with these 2 files (corrupted_image_1.jpg, corrupted_image_2.jpg). If you see it doesn’t work I would suggest to use phpThumb, it’s free. You should also make sure your web host has the latest php version on the server or go with a php hosting provider, that specializes in it.
Thanks a lot to phpThumb for their amazing work!
My Elance Profile
Recent Comments