jQuery easyThumb
Description
jQuery easyThumb is a plugin for jQuery. The easy description is that it turns a list of full-scale images to a list of thumbnails on-the-fly. It uses a php-script to return a thumbnail for each image, and jQuery to generate the list. Let’s jump right to the installation.Installation
- Download the pack: jQuery easyThumb.
t.php: This is the php-file that generates thumbnails (note: The code originates from FhImage, flash-here.com).
jquery.easythumb: This is the plugin.To make it work you will only need these two files, and the CSS-code located in index.html.
Example
- Online example, check the source-code.
- Check the index.html file that is located within the .zip-file.
Note: The example takes use of Lightbox plugin.
License
You may use jquery.easythumb.js freely. For the other files, follow their own license. You also use this scripts at your own risk.
Updates
This is the very first version. Updates will come in the near future.
I am trying to test out this set up but running into a wall.
I try to load an image in an unordered list in the page below.
http://bretbouchard.com/easyThumb/index.html
The jquery part seems to be running correctly. and is outputting the following url for the image ( I added the url and folders so you can find the file output)
http://bretbouchard.com/easyThumb/t.php?image=images/518_logo.jpg&w=150
I’m not sure why it’s just out putting just the url string on the page. Any thoughts?
When trying to two URL’s you are providing my browsers only displays an ordinary website. I’m not sure if your webserver redirects me? Anyways.
If your directory-structure is like this:
public html\
public html\easyThumb
public html\images\518_logo.jpg
Then you need to set the “prefix” option in easyThumb along with the others: $(”.easyThumb”).easyThumb({width: 50,makeLink: true,prefix: ‘../’});
Which means that the t.php needs to go back one directory to find the images directory. Hope that helps!
sorry about that i had a similar thought yesterday and had moved the files. but to no avail.
now my files are located as follows:
http://bretbouchard.com/test.html
http://bretbouchard.com/t.php
http://bretbouchard.com/images/518_logo.jpg
Not sure if it would matter but I’m running PHP 5.2.4
I wont move anything until I hear from you.Again thank you for your help.
Bret
Hey!
Seems like your easyThumb version differs from the updated one.
Get this: http://www.hverven.net/div/easyThumb/jquery.easythumb.js
And take the CSS-code from:
http://www.hverven.net/div/easyThumb/
If this won’t work, I think there is a high chance that there is something wrong with running the script on your server. Maybe some apache module etc?
Regards
Script was able to generate thumbnails but showed blank image placeholders. When you click on it, it shows the original image in the lightbox. To fix this, i replaced, resizejpg(”./”.$image,$w); to resizejpg($image,$w); then it worked fine.
Hi there,
I am using your plugin to show product pictures, however when it shows the enlarged photo, I get the full gallery, and I would like to show only the pictures from that specific product.
Is it possible to limit it?
Thanks and congratulations on such a nice piece of work!
Al
Hey!
Nice of you to inform people about that.
Al:
easyThumb works on unsorted lists. I’m not sure I understand what the problem is, but:
If you use this in the header:
$(”.productOne”).easyThumb({width: 50,makeLink: true});
Your unsorted list with class=productOne:
easyThumb will now only create thumbnails of productOne.
Or.. do you mean: When the big picture pops up, you don’t want the next/previous buttons etc?
For anything related to lightbox, visit the plugin site Here.
You can also remove those buttons by simply removing their images.
Thanks, and,
Regards, Christian.
If your script isn’t returning an image and only a string when you try to access it it’s a possibility it’s because of global permissions. Most hosts don’t allow global access and some hosts even have trouble accessing them through a key (like this script)…
I had the same issue as Bret, and my solution was to change…
header(”Content-type: image/jpeg”);
foreach($HTTP_GET_VARS as $key => $val) {
$$key = $val;
global $$key;
}
if ($w == “”){$w = “100″;}
resizejpg(”./”.$image,$w);
to
header(”Content-type: image/jpeg”);
if ($w == “”){$w = “100″;}
resizejpg(”./”.$_GET['image'],$_GET['w']);
Cheers!
I am not sure that I can completely understand your comments. Would you be so kind as to expand on your reasoning a little more before I comment.