Awesome image cropper/thumbnail maker script – Modified Marquee Tool

Jerry Low — Tue, 23 Feb 2010 17:59:31 +0000

As I'm recoding my portfolio right now, I thought to myself – how great would it be to have a thumbnail maker tool. Some PHP or Javascript solution to crop images dynamically without the use of Photoshop. I would hate to fire up Photoshop every time I want to upload something. I'm sure you've all been there before. Anyways I landed upon a script that suited my need exactly. The Rectangle Marquee Tool. The tool looks great but was a bit confusing for me to get working and based on the comment for a few others too. Now I've also done some slight PHP modification to get the script working to my needs and generating the correct thumbnails.

See what I'm mumbling on about right here:
Demonstration of Marquee Tool

Once again I'd like to clarify that I did not make the Rectangular Marquee Tool, it was written by Sergey Koksharov using certain functions of the Prototype/Scriptaculous framework. I'm merely just doing some tweaks to make it work better in my circumstance. So all credits goes to Sergey and the Scriptaculous team.

My modification will allow you to do certain things such as:

Define a input image dynamically
Define the output image dynamically
Generate a final output image

I believe the PHP included in the original script was a bit dated so it wasn't working on my machine and servers that's why I made my own version.

So to start off you need to download the required files from: here. Then you need to extract the files into a scripts folder or whichever you prefer just remember to rename the source path after. The real files you need are:

marker.css
prototype_reduced.js
rectmarquee.js

Once you've got the files extract them to the proper folders and create fresh PHP file to work with. This is the file your script will run from. I'll break down my code into chunks for you to understand, but I'll go in order so if you copy each chunk and paste them in the same order it should work. That is if you're reading this instruction right ;)

Before the HTML

So this piece of code starts off your whole document even before the HTML code. There's only two codes you need to modify which is the $img_src (original file) and $img_dst (final thumbnail file).

//Source Image to Crop From
$img_src = 'img/';

//Thumbnail Location
$img_dst = 'img/';

//If you want to feed this dynamically you can use
//$_GET tags or draw them in through a database

//Some coding here not just for looks.
if ($img_src!=") {
//Check if Image
//Image Dimension
if (!getimagesize($img_src)) {
//Not A Valid Image
$img_error = 1;
} else {
//Getting Image Dimension
$img_dim = getimagesize($img_src);
}

//Verfiy This Is An Image
$img_verify = @imagecreatefromjpeg($img_src);

if (!$img_verify) {
$img_error = 1;
} else {
//Getting Dimensions
$img_w = imagesx($img_verify);
$img_h = imagesy($img_verify);
}

if ($img_error == 1) {
echo 'Not a valid image';
exit;
}
}

The HTML and HEAD Tags

This is the code to begin your HTML tag and your chunk of HEAD tag. Note that if you didn't place your files in the same location you have to change the source path.

"stylesheet" type="text/css" href="css/marker.css" />

Your BODY and Closing HTML Tag

So all that's left is the BODY tag. There's really no modification you need to do here except for the (don't paste this in your code in order):

coords: {x1: 0, y1: 0, width: 100, height: 50}

This line defines where the crop box starts and how big it should be. You can play around with it if you want. Anyways here's the coding (do paste this in).

"width: ; height: ; position: relative;">
"" alt="" id="sampleid" />

"preview" style="position: absolute; right: 10px; bottom: 10px; border: 2px solid #FFF;">

Now we're just about complete here. All this tool does right now is let you select an area to crop. To actually make the thumbnail you need the assistant of PHP (you can do it in JS but I prefer PHP). You need to have the GD library enabled in order for this to work.

At this point you need to create your last file which is named crop.php. All you need in crop.php is this:

//Variables
$img_w = $_GET['w'];
$img_h = $_GET['h'];
$img_x = $_GET['x'];
$img_y = $_GET['y'];
$img_src = $_GET['img'];
$img_dst = $_GET['img_dst'];

//There's a Set Thumb
if ($img_w>0 && $img_h>0) {

//Create New Image
$new_img = imagecreatetruecolor($img_w, $img_h);

//Loading The Original Image
$old_img = imagecreatefromjpeg($img_src);

//Copying Image
imagecopy($new_img, $old_img, 0, 0, $img_x, $img_y, $img_w, $img_h);

header("Content-Type: image/jpeg");

@imagejpeg($new_img, $img_dst);
imagejpeg($new_img);

//Destroy the Old Images
imagedestroy($old_img);
imagedestroy($new_img);
}

That's it, and everything should work like planed. I've tested this script out a few times but if anything doesn't work just let me know.

Cross Browser Friendly Div Tabs Script

Jerry Low — Sat, 14 Nov 2009 01:32:23 +0000

For some reason modern designers and developers love to use tabs. Maybe they keep things organize and clean all in one page. Here's a incredibly simple cross browser compatible Javasript tabs script. The final result will look like the one below.

Javascript

Include this script either as a separate file or in between the head tags.

CSS

This is your CSS code that needs to also go between the HEAD tags or you can have a separate file once again.

HTML

This is your HTML code for the tabs, obviously you can customize this all you want to fit your content.

Tab One

Tab Two

Tab Three

Content Area One

Content Area Two

Content Area Three

The final tweak, lastly to ensure a default tab is selected from the beginning change your opening BODY tag to the following.

Adding Tabs and Content

Ensure that you add the same amount of tabs as content or else there won't be enough tabs per content or vice-versa.

Adding Tabs

To add tabs just keep copying and pasting the following lines. Ensure the number of the id counts in order from 1, 2, 3… etc. You must have tab_ in front of the number.