Lightbox no longer works after jQuery pagination is triggered

[Amok]

Thanks for this new version. I'm working now on php script + jQuery plugin (imgAreaSelect) and all images will be resized on upload so they will become smaller. Definitely it is good idea thumbnails to be loaded when are displayed - i will try to manage this. Because i work on my local computer and the speed of loading is not a problem yet i will test how long it takes to load everything. Probably Google servers are far away from common visitor's ISP, but trying to use cached jQuery from Google is also good idea. I have much work to do on this project, but your help was invaluable and i learned many new things. Thanks!

[jscheuer1]

OK, here's the latest version, probably my last unless you have a request or there's some problem with it:

gallerylt-4-h.zip

I worked out a fairly simple way to only load the thumbnails when they're made visible. It involves adding a little code to the pageselectCallback function:

	function pageselectCallback(page_index, jq){
		jq.prevAll('div[id^="Searchresult"]:last').empty().append(
			jq.next('div').find("a.result").slice(page_index * this.items_per_page, (page_index + 1) * this.items_per_page).clone()
		).find('img').each(function(i, im){im.src = $(im).data('src');});
		pageobj[jq.attr('id')] = page_index;
		window.opera && setcookieobj(cookiename, pageobj);
		return false;
	}

adding this style (from the updated on page stylesheet):

.portfolio_item img, .portfolio_item:hover img {
	display: inline-block;
	background: white url(images/prettyPhoto/default/loader.gif) center no-repeat;
}

and rewriting the hard coded images to, for example:

<img src='images/transparent.gif' data-src='./images/gallery/1/thumb_1291736206_4.jpg' />

That requires a small 1px by 1px transparent GIF image (right click and 'Save As'):

http://home.comcast.net/~jscheuer1/side/transparent.gif

Put it in the images folder. While the image is loading, the loading image from PrettPhoto will show in its place.

I also found a way to format the title/description in the PrettyPhoto Box a little better so that, in smaller browser windows, it doesn't get squeezed in with the navigation/close and counter elements. You can see how that's done in the updated on page style section.

Just to see, I downloaded the thumbnails and optimized them using optimizer pro's batch mode to 72% quality, 50% "magic compression", a proprietary method that automatically identifies areas of less detail in an image and applies greater compression to those areas. The thumbnail images, which were averaging about 20K or more then averaged 4K with little perceptible loss in quality.

[Amok]

Everything is perfect The gallery, navigation, slideshow and cookies. Thanks a lot!!! Thanks to your advice i have increased the compression on images and thumbnails so i hope the loading will be fast enough at the end. I will work later on different ways to reduce image size with minimal quality loss.
Thank You for your time! Hope this code will be helpful for others too.

[jscheuer1]

Great! I don't know how you got those thumbnails to begin with, but I found that if I started over from scratch from the larger images, I could get a better resolution after compression and better cropping. However, this did require individual attention, and resulted in slightly larger thumb file size ~ 5K.

Here's an example (click to see the image):



I don't have an optimizing batch program that can both resize and crop. I do, but it crops first before resizing, so the image that remains is not what is desired.

I looked into alternatives but found none that seem to fit the bill, one or two that might though. When I have more time I may investigate those. They say they do both cropping and resizing, but not in which order.

[Amok]

I use http://phpthumb.gxdlabs.com/ for thumbnails and image cropping (on client side is jQuery imgAreaSelect).

I made a simple php function where i will try to set optimal jpeg quality. The result is not as good as yours so i will try other libraries.

function resize_picture($path, $filename, $action, $percent=100, $x1=0, $y1=0, $width=0, $height=0)
{//require_once './include/phpthumb/ThumbLib.inc.php';
	$image = $path . $filename;
	$options = array('jpegQuality' => 85);
	try
	{
		$resized = PhpThumbFactory::create($image, $options);
	}
	catch (Exception $e)
	{
		print_r("ERROR: Image resizing problem!");
	}
	if ( ($action == "crop") && ($width+$height > 0) ) $resized->crop($x1, $y1, $width, $height)->save($image);	//coords from imgAreaSelect
	if ($action == "fixed_size") $resized->adaptiveResize($width, $height)->save($image);
	if ($percent < 100) $resized->resizePercent($percent)->save($image);
	
	$resized->adaptiveResize(150, 150)->save( $path."thumb_".$filename);
	return getimagesize($image);
}

[jscheuer1]

OK, I may play with that. But I think a program might be better, one that allows you to tell it to resize the image and then crop it to certain dimensions. It would have to calculate in advance what dimensions to shrink to so that there would be enough left to crop in width or height, whichever were smaller. It might even be worth it, if there were such an option, to have it let you select the crop individually. Like if you could set it to center crop, but have each image come up one by one during the process, you could either hit an accept button, or drag the crop where you wanted it. For most of those images a center crop would be fine. With that one it needs to be higher up. I think I settled for about 3 pixels from the top. That's 3px from the top after the resizing. Others would benefit from off center cropping as well.

The advantage that a program has is that it can (if well written) be much more sophisticated in the compression algorithms that it applies. If I can just find one with that level of sophistication and the features I was mentioning at the beginning of this post, it would be fairly simple to get some real nice thumbs.

Even with my current program, through only a little trial and error one could determine which images need to be resized to 150 height, which to 150 width, it's the optional cropping feature that it lacks. It can crop, but there's no control over where the crop goes in batch mode. The Gimp (a free image editing program like Photoshop) has a command line mode that allows for batch processing of images. It can be quite complicated, but I'm not sure if it can be made to do what I'm after or not.

I'm also interested in two or more programs from this:

http://www.smashingmagazine.com/2008...ge-processors/

listing. Most do not do cropping, but some look like they might even have the feature set I want or be able to be tweaked to have it - some can be programmed.

[Amok]

This is interesting idea - i will try to make something with html5 and imgAreaSelect. I will make a web page where i can drag and drop multiple files from computer and display them with some max-width/height (400x400) before uploading to php server. Then user can move a centered predefined selected area optionally (plase see Setting Initial Selection or Live Example: fixed width and height of thumb). Then i can send coordinates and files to php and i can have good thumbs (with some calculation because of max-width) The only problem is that images are not very good compressed and thumbs are ~3KB bigger than yours. Maybe at some time i must run some batch with better compression to reduce size of thumbs if is required. Because i need my thumbs to be fixed to 150x150 my job is easier but will try to play with different options. All this seems to be a good tool for uploading images with options