Photo Swipe

PhotoSwipe is a free HTML/CSS/JavaScript based image gallery targeting mobile devices, demo.

Awesome Mobile Image Gallery Web App

This is a tutorial blog post written by tympanus.net, really good example to showing step by step creating mobile web image gallery using jQTouch, demo.

Tiny Circleslider

Tiny Circleslider is a circular slider or carousel build based on jquery library, this one have a unique interface as a gallery to be used, the radius size can be customized so it will fit in any mobile devices.

Touch Gallery

A fullscreen photo gallery for touch-devices.

jQTouch Extensions

jQExtensions is a collection of extensions for the jQTouch mobile web app framework based on jQuery. This one already discontinued but have a good example used to creating simple photo gallery, demo.

Jaipho

Jaipho is a mobile web gallery inspired by original iPhone photo application, demo.

Galleria

I’m not really testing this one but from the documentation you can see swipe features, which mean you can use it on mobile devices.

TN3 Gallery

Like galleria I’m not really testing this one but from the sites says it supported mobile devices.

All the images must have the same size, in both width and height, the hovered images will shows entirely, and the others will mostly hidden.

View Demo | Download Source

HTML

In this example I’m using 5 images, like before we have to set the overflow css property to hidden so all the images can be expanded in the background, you can see on the CSS code section.

<div id="container">
    <div id="img_container">
        <img id="img1" src="img/01.jpg"/>
        <img id="img2" src="img/02.jpg"/>
        <img id="img3" src="img/03.jpg"/>
        <img id="img4" src="img/04.jpg"/>
        <img id="img5" src="img/05.jpg"/>
    </div>
</div>

JQuery

This example set all the images position using JQuery, on the $(document).ready(); function, to make it easier where to move the images when an images hover, I set all the position in array. And there is two recursive function i used here, they are used when JQuery must loop on the prev and next images until no images found anymore.

$(document).ready(function() {
    var cwidth = parseInt($("#container").css("width").replace("px", ""));
    var img_count = $("#img_container").children().length;
    var img_width = $("#img1").width();
    var divider = cwidth / img_count;
    var small_space = (cwidth - img_width) / (img_count - 1);

    // set position
    var cssleft = Array();
    $("#img_container img").each(function(index) {
        cssleft[index] = new Array();
        // set default position
        cssleft[index][0] = (index * divider) - (index * img_width);
        $(this).css("left", cssleft[index][0] + "px");

        // set left position
        cssleft[index][1] = (index * small_space) - (index * img_width);

        // set right position
        var index2 = index;
        if (index2 == 0) {
            index2++;
        }
        cssleft[index][2] = cssleft[index2 - 1][1];
    });

    // image hover
    $("#img_container img").mouseenter(function() {
        var img_id = parseInt($(this).attr("id").replace("img", "")) - 1;

        if ($(this).attr("id") != "img1") {
            $(this).animate({
                left: cssleft[img_id][1]
            }, 300);
        }
        loopNext(this);
        loopPrev(this);
    });

    // image container hover out back to default position
    $("#img_container").mouseleave(function() {
        $("#img_container img").each(function(index) {
            $(this).animate({
                left: cssleft[index][0]
            }, 300);
        });
    });

    function loopPrev(el) {
        if ($(el).prev().is("img")) {
            var imgprev_id = parseInt($(el).attr("id").replace("img", ""));

            if ($(el).prev().attr("id") != "img1") {
                $(el).prev().animate({
                    left: cssleft[imgprev_id - 2][1]
                }, 300);
            }
            loopPrev($(el).prev());
        }
    }

    function loopNext(el) {
        if ($(el).next().is("img")) {
            var imgnext_id = parseInt($(el).attr("id").replace("img", ""));

            $(el).next().animate({
                left: cssleft[imgnext_id][2]
            }, 300);
            loopNext($(el).next());
        }
    }
});

CSS

I’m using the box shadow effect to the space between each image, so not to get confused.

#container {
    margin: 0 auto;
    margin-top: 50px;
    width: 800px;
    height: 350px;
    overflow: hidden;
    border: 10px solid #000;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
}
#img_container {
    width: 4000px;
}
#img_container img {
    position: relative;
    -moz-box-shadow: -5px 0 10px #000;
    -webkit-box-shadow: -5px 0 10px #000;
    box-shadow: -5px 0 10px #000;
    width: 600px;
}
#img1 { z-index: 0; }
#img2 { z-index: 1; }
#img3 { z-index: 2; }
#img4 { z-index: 3; }
#img5 { z-index: 4; }

View Demo | Download Source

GIMP

Gimp is my one of favorite image editing application, it have very large community, google “gimp tutorial” you will find a bunch of tutorial from beginner to advanced skill, but some users and me too complained about the user interface.

Paint.NET

Paint.NET is my second favorite application for editing image, cause it very fast loading, I’m use this application along side with GIMP, because so far I tried Paint.NET has a better quality in resizing image than GIMP, especially when resizing image with text.

Pinta Project

Pinta Project is basically Paint.NET clone created for Linux platform, created based on GTK, and now it is available for windows.

Photoscape

Artweaver Free

Pixia

PhotoFiltre

PaintStar

Hornil Stylepix

PhotoPlus Starter Edition

In this post I want to create an example thumb viewer in ExtJS, if you have tried old software like gqview, you may familiar with this thumb viewer, well not really complicated actually, just love to use it when reading my favorite comic.

View Demo | Download Source

The ExtJS

The main component of this viewer is two dataview, one for thumbnails and another one for the original image. When a thumbnail clicked the relevant image show in the dataview that contain the original image, using some old html trick, jump to some html element based on id, like #divid.

Ext.onReady(function() {
    /* =======================================
     * start component for thumbnails panel */
    var storeThumbs = new Ext.data.JsonStore({
        proxy: new Ext.data.HttpProxy({
            url: 'get-images.php', method: 'POST'
        }),
        root: 'images',
        fields: [
            'id', 'name', 'url',
            { name: 'size', type: 'float' },
            'thumb_url'
        ]
    });

    storeThumbs.load();

    var tplThumbs = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="thumb-box">',
                '<a href="#{id}">',
                    '<img src="{thumb_url}" title="{name}">',
                '</a>',
            '</div>',
        '</tpl>'
    );

    var dvThumbs = new Ext.DataView({
        autoScroll: true, store: storeThumbs, tpl: tplThumbs,
        autoHeight: false, height: 410, multiSelect: true,
        overClass: 'x-view-over', itemSelector: 'div.thumb-wrap',
        emptyText: 'No images to display',
        border: false
    });

    // Panel for the thumbnails
    var panelThumbs = new Ext.Panel({
        region: 'west',
        split: false,
        width: 160,
        margins:'5 5 5 0',
        items: [dvThumbs]
    });
    /* end component for thumbnails panel
     * =================================== */

    /* =======================================
     * start component for large panel */
    var storeLarge = new Ext.data.JsonStore({
        proxy: new Ext.data.HttpProxy({
            url: 'get-images.php', method: 'POST'
        }),
        root: 'images',
        fields: [
            'id', 'name', 'url',
            { name: 'size', type: 'float' },
            'thumb_url'
        ]
    });
    storeLarge.load();

    var tplLarge = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="large-box" id="{id}">',
                '<img src="{url}" title="{name}">',
            '</div>',
        '</tpl>'
    );

    var dvLarge = new Ext.DataView({
        autoScroll: true, store: storeLarge, tpl: tplLarge,
        autoHeight: false, height: 410, multiSelect: true,
        overClass: 'x-view-over', itemSelector: 'div.thumb-wrap',
        emptyText: 'No images to display',
        border: false
    });

    // Panel for large images
    var panelLarge = new Ext.Panel({
        region: 'center',
        margins:'5 0 5 0',
        items:[dvLarge]
    });
    /* end component for large panel
     * =================================== */

    var win = new Ext.Window({
        title: 'ExtJS Images Viewer',
        closable: false,
        width: 620,
        height: 450,
        border: false,
        plain: true,
        layout: 'border',
        items: [panelThumbs, panelLarge]
    });

    win.show(this);
});

The PHP

This php code is very similar to the script from the ExtJS image gallery post, just add an id inside the array.

<?php
$dir = "img/large/";
$dir_thumbs = "img/thumbs/";

$images = array();
$d = dir($dir);
$loop = 0;
while($name = $d->read()){
    if(!preg_match('/\.(jpg|gif|png)$/', $name)) continue;
    $size = filesize($dir.$name);
    $thumb = $name;
    $loop++;
    $images[] = array('id'=> 'img_'.$loop, 'name' => $name,
                    'size' => $size, 'url' => $dir.$name,
                    'thumb_url' => $dir_thumbs.$thumb);
}
$d->close();
$o = array('images'=>$images);
echo json_encode($o);

Dataview CSS

.thumb-box  {
    width: 100px;
    padding: 5px;
    text-align: center;
    margin: 13px auto;
    background: #ccd8e7;
    border: 1px solid #99BBE8;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
}

.thumb-box:hover {
    background: #999999;
    border-color: #999999;
}

.large-box {
    width: 375px;
    margin: 15px auto;
}

View Demo | Download Source

Credit Images: Flickr [ images 1 ], [ images 2 ], [ images 3 ], [ images 4 ], [ images 5 ]

if (!function_exists("gd_info")) {
	echo "GD not installed";
} else {
	echo "GD installed";
}

Text Watermark

Now let’s get straight to the code, the first way to adding watermarking is by add text which called true type font on the server, you can freely choose the font you want to use and it will be better to include the font file in the server.

<?php

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

// get image file
$img_name = "batman.jpg";
$img_src = imagecreatefromjpeg($img_name);
$width_src = imagesx($img_src);
$height_src = imagesy($img_src);

// new image size = old image size
$width_dst = $width_src;
$height_dst = $height_src;
$quality = 80;

// create new image
$img = imagecreatetruecolor($width_src, $height_dst);
imagecopyresampled($img, $img_src, 0, 0, 0, 0, $width_dst, $height_dst, $width_src, $height_src);

// rectangle size for text box
$x1_rect = 0;
$y1_rect = $height_dst - 18;
$x2_rect = $width_dst;
$y2_rect = $height_dst;

$color = imagecolorallocate($img, 0, 0, 0);
$letter_color = imagecolorallocate($img, 255, 255, 255);
$text = "scissormetimbers (http://scissormetimbers.deviantart.com)";
imagefilledrectangle($img, $x1_rect, $y1_rect, $x2_rect, $y2_rect, $color);
imagettftext($img, 12, 0, $x1_rect+5, $y1_rect+14, $letter_color, "DroidSans.ttf", $text);

// show in browser
imagejpeg($img, '', $quality);

imagedestroy($img_src);
imagedestroy($img);

?>

Image Watermark

If in someway you want to adding an image you can add this code, before the image showing in the browser, I think it is better to choose the image with the transparent background, for watermarking.

$logo = imagecreatefromgif("da.gif");
imagecopymerge($img, $logo, 200, 50, 0, 0, 300, 300, 80);

Here are the example result, using both text and image watermark

Saving The File

To save the modified image modify this line of code

imagejpeg($img, '', $quality);

to

imagejpeg($img, 'new_image_name.jpg', $quality);

View Demo | Download Source

Credit Image: Batman
Font: Droid Sans

View Demo | Download Source

Let’s get through the code, here are the html code

<div id="container">
    <p>
        <a href="">Back to Post</a>
        &nbsp;&nbsp;
        <a href="">Download Source</a>
    </p>
    <p>Drag On The Center Image to Rotate</p>
    <div id="bt_drag">
        <img id="icon" src="img/rotate_64.png"/>
    </div>
    <div id="bt_center">
        <img id="icon" src="img/rotate_64.png"/>
    </div>
    <div id="box"><img src="img/img.jpg"/></div>
</div>

You can see on the code above, I’m using JQuery UI to do a little tricky in rotate controller, there will be two rotate controller inside the image, when user dragging the controller one will stay in the center of image and one will be draggable to track mouse position, and to track when mouseup event being triggered, and now is the javascript code in JQuery

$(document).ready(function() {
    $("#bt_drag").draggable({ containment: "#container" });

    var bPos = $("#box").offset();
    var bWidth = $("#box").width();
    var bHeight = $("#box").height();

    var center_top = (bHeight + bPos.top) - (bHeight / 2) - 16;
    var center_left = (bWidth + bPos.left) - (bWidth / 2) - 16;

    $("#bt_drag").show();
    $("#bt_center").show();

    $("#bt_drag").css("top", center_top);
    $("#bt_drag").css("left", center_left);

    $("#bt_center").css("top", center_top);
    $("#bt_center").css("left", center_left);

    $(document).mousemove(function(e){
        window.mouseXPos = e.pageX;
        window.mouseYPos = e.pageY;
    });

    $("#bt_drag").mousedown(function(e) {
        var bPos = $("#box").offset();
        var bWidth = $("#box").width();
        var bHeight = $("#box").height();

        var center_top = (bHeight + bPos.top) - (bHeight / 2);
        var center_left = (bWidth + bPos.left) - (bWidth / 2);

        intervalId = setInterval(function() {
            y = center_top - window.mouseYPos + 32;
            x = window.mouseXPos - center_left - 32;

            r = 360 - (180/Math.PI) * Math.atan2(y,x);

            $("#box").css("transform","rotate("+r+"deg)");
            $("#box").css("-moz-transform","rotate("+r+"deg)");
            $("#box").css("-webkit-transform","rotate("+r+"deg)");
            $("#box").css("-o-transform","rotate("+r+"deg)");

            $("#bt_drag").css("transform","rotate("+r+"deg)");
            $("#bt_drag").css("-moz-transform","rotate("+r+"deg)");
            $("#bt_drag").css("-webkit-transform","rotate("+r+"deg)");
            $("#bt_drag").css("-o-transform","rotate("+r+"deg)");

            $("#bt_center").css("transform","rotate("+r+"deg)");
            $("#bt_center").css("-moz-transform","rotate("+r+"deg)");
            $("#bt_center").css("-webkit-transform","rotate("+r+"deg)");
            $("#bt_center").css("-o-transform","rotate("+r+"deg)");
        }, 100);
    }).mouseup(function() {
        clearInterval(intervalId);
        var currentPos = $("#bt_center").offset();
        $("#bt_drag").animate({
            top: currentPos.top,
            left: currentPos.left
            }, "slow", function() {
        });
    });
});

If you are separating the javascript code make sure you include it in the bottom, before the </body> closing tag, I experience a little bug in Safari and Chrome. Last is the CSS code

* {
    font-family: Arial, "Free Sans";
}
body {
    background: #fff url('../img/pattern8-pattern-014.png') repeat right top;
}

#container {
    margin:0 auto;
    text-align: center;
}
#box {
    margin: 0 auto;
    width: 381px;
    height: 333px;
    padding: 7px;
    background: #fff;
    -moz-box-shadow: 2px 2px 5px #333;
    -webkit-box-shadow: 2px 2px 5px #333;
    box-shadow: 2px 2px 5px #333;
    position: relative;
}
#bt_drag, #bt_center {
    display: none;
    position: absolute;
    z-index: 25;
    height: 64px;
    width: 64px;
    padding: 5px;
    background: #d3d3d3;
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    border-radius: 2.5em;
    opacity:0.7;
    filter: alpha(opacity=70);
    cursor: move;
}
#bt_drag {
    opacity:0.3;
    filter: alpha(opacity=30);
}
#bt_center {
    z-index: 20;
}
#rotate_icon a img, #bt_center a img {
    border: 1px solid #fff;
}
p {
    text-shadow: 2px 2px 2px #333;
    font-size: 30px;
    fon-weight: bold;
    color: #fff;
}
p a {
    opacity: 0.8;
    filter: alpha(opacity=30);
    padding: 10px 15px;
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    border-radius: 2.5em;
    background: #fff;
    font-size: 24px;
    text-shadow: 1px 1px 1px #333;
    color: #000;
    text-decoration: none;
}
p a:hover {
    background: #d3d3d3;
}

That’s all really easy isn’t? like always here are the the example screen capture, download link and online demo, and because this is using CSS3 this example won’t work in current available IE (very old IE, IE6, IE7 or IE8). One more thing if you want another way to rotate image here is the more advanced tutorial smooth rotatable image.

View Demo | Download Source

<body>
<div id="top">
    <button id="btscamble" class="button" onclick="scramble();">
        Scramble Collage
    </button>

    <button id="btreset" class="button">
        Reset Collage
    </button>
</div>
<div id="container">
    <div id="box1" class="box"><img src="img/thumbs/01.jpg"/></div>
    <div id="box2" class="box"><img src="img/thumbs/02.jpg"/></div>
    <div id="box3" class="box"><img src="img/thumbs/03.jpg"/></div>
    <div id="box4" class="box"><img src="img/thumbs/04.jpg"/></div>
    <div id="box5" class="box"><img src="img/thumbs/05.jpg"/></div>
    <div id="box6" class="box"><img src="img/thumbs/06.jpg"/></div>
    <div id="box7" class="box"><img src="img/thumbs/07.jpg"/></div>
    <div id="box8" class="box"><img src="img/thumbs/08.jpg"/></div>
    <div id="box9" class="box"><img src="img/thumbs/09.jpg"/></div>
    <div id="box10" class="box"><img src="img/thumbs/10.jpg"/></div>
    <div id="box11" class="box"><img src="img/thumbs/11.jpg"/></div>
    <div id="box12" class="box"><img src="img/thumbs/12.jpg"/></div>
    <div id="box13" class="box"><img src="img/thumbs/13.jpg"/></div>
    <div id="box14" class="box"><img src="img/thumbs/14.jpg"/></div>
    <div id="box15" class="box"><img src="img/thumbs/15.jpg"/></div>
</div>

<div id="mymenu">
    <a href="" id="btfront">Bring To Front</a>
    <a href="" id="btback">Bring Backward</a>
</div>
</body>

There are two button in this sample one for scrambling all the images, which mean make images move to random position and on reset button for resetting all the images to default position, and there is a menu that will be display when right click on the image triggered, the menu contains option for bring to front or backward. And here the code for javascript contoller, I called controller.js

$(document).ready(function() {
	// give all the box to be draggable
    var children = $("#container").children();
    var child = $("#container div:first-child");

    for (i=0; i<children.length; i++) {
        $("#"+child.attr("id")).draggable({
            containment: "#container", scroll: false
        });
        child = child.next();
    }

	// set for custom right click menu
	var clickedId;

    $(".box").bind("contextmenu",function(e){
        $("#mymenu").animate({
            top: e.pageY,
            left: e.pageX
            }, 'fast', function() {
        }).show();

        clickedId = $(this).attr("id");
        $(".box").css("background", "#fff");
        $("#"+clickedId).css("background", "#666");

        return false;
    });

    // action on bring to front or backward
    var maxZindex = 1;
    var minZindex = 1;

    $("#btfront").click(function() {
        maxZindex++;
        $("#"+clickedId).css("z-index", ""+maxZindex);
        return false;
    });

    $("#btback").click(function() {
        minZindex--;
        $("#"+clickedId).css("z-index", ""+minZindex);
        return false;
    });

	// reset style of box and menu
    $("body, #container, .box, #btback, #btfront, #btscamble").click(function() {
        $("#mymenu").hide();
        $(".box").css("background", "#fff");
    });

    // reset button action, reset style and current max, min z-index
    $("#btreset").click(function() {
		$(".box").removeAttr("style");
		$(".box").css("position", "relative");
		maxZindex = 1;
		minZindex = 1;
		return false;
	});
});

/* this function from:
 * http://www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/
 */
function randomFromTo(from, to){
    return Math.floor(Math.random() * (to - from + 1) + from);
}

function scramble() {
    var children = $('#container').children();
    var child = $('#container div:first-child');
    for (i=0; i<children.length; i++) {
        $("#"+child.attr('id')).css("position", "absolute");
        moveRandom(child.attr('id'));
        child = child.next();
    }
}

function moveRandom(id) {
    /* get container position and size
     * -- access method : cPos.top and cPos.left */
    var cPos = $('#container').offset();
    var cHeight = $('#container').height();
    var cWidth = $('#container').width();

    // get box padding (assume all padding have same value)
    var pad = parseInt($('#container').css('padding-top').replace('px', ''));

    // get movable box size
    var bHeight = $('#'+id).height();
    var bWidth = $('#'+id).width();

    // set maximum position
    maxY = cPos.top + cHeight - bHeight - pad;
    maxX = cPos.left + cWidth - bWidth - pad;

    // set minimum position
    minY = cPos.top + pad;
    minX = cPos.left + pad;

    // set new position
    newY = randomFromTo(minY, maxY);
    newX = randomFromTo(minX, maxX);

    $('#'+id).animate({
        top: newY,
        left: newX
        }, 'slow', function() {
    });
}

On the code above line 2 – 11 I make it all the images to be draggable, I’m using jqueryui to make this happen, so don’t forget to include in your main html file. Line 14 – 28 is to make custom right click on the images, so the menu can be displayed. Line 31 – 44 is for manipulating css z-index, this is the action for the right click options menu, and the rest is for resetting images to default position, and scrambling images to random position. And here is the css code

* {
    font-family: Arial, "Free Sans";
}

body {
    background:#ffffff url('../img/webtreats-paper-pattern-6-grey.jpg') repeat right top;
}

#mymenu {
    background: #fff;
    padding: 5px;
    position: absolute;
    display: none;
    -moz-box-shadow: 2px 2px 5px #333;
    -webkit-box-shadow: 2px 2px 5px #333;
    box-shadow: 2px 2px 5px #333;
    z-index: 999999;
    display: none;
}

#mymenu a {
    display:block;
    padding: 5px;
    text-decoration: none;
    color: #333;
    font-size: 14px;;
}

#mymenu a:hover {
    background: #d3d3d3;
}

#top {
    margin: 0 auto;
    text-align: center;
    border: 4px dashed #d9d9d9;
    padding: 10px;
    width: 785px;
    margin-bottom: 10px;
}
#container {
    margin: 0 auto;
    width: 785px;
    height: 470px;
    padding: 10px;
    border: 4px dashed #666;
}

.box {
    cursor: move;
    padding: 5px;
    background: #fff;
    width: 125px;
    height: 125px;
    background: #f3f3f3;
    float: left;
    margin: 10px;
    border:1px solid #d3d3d3;
    -moz-box-shadow: 2px 2px 5px #333;
    -webkit-box-shadow: 2px 2px 5px #333;
    box-shadow: 2px 2px 5px #333;
    z-index: 1;
}

/* this CSS3 button get from this
 * http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/
 */

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}

The css3 button I got from webdesignerwall, it won’t work on IE 6 or 7 (and I haven’t tested on IE 8), Lastly this is the screen capture, the download link, and you can view it online too, but IE6 won’t work and if you have some bug in opera for the draggable function, try to update to the latest opera version (currently when I write this post is version 11), and I hope in my future post I can adding some more feature. Thanks for reading.

View Demo | Download Source

If you have dynamic variable to locate image on the server you can create function to check image type wheter is .png, .gif or .jpg then use the PHP GD function (imagecreatefromjpeg or imagecreatefrompng or imagecreatefromgif) to get the image width and height, in this code below it assume the image only in .jpg format.

And if you want to crop image from the uploaded file by the user it will make it easier, cause when you use codeigniter file uploading class there’s a built in property to get uploaded image width and image height automatically after the image was uploaded.

public function crop()
{
    $img_path = 'uploads\capsamples.jpg';
    $img_thumb = 'uploads\capsamples_thumb.jpg';

    $config['image_library'] = 'gd2';
    $config['source_image'] = $img_path;
    $config['create_thumb'] = TRUE;
    $config['maintain_ratio'] = FALSE;

    $img = imagecreatefromjpeg($img_path);
    $_width = imagesx($img);
    $_height = imagesy($img);

    $img_type = '';
    $thumb_size = 100;

    if ($_width > $_height)
    {
        // wide image
        $config['width'] = intval(($_width / $_height) * $thumb_size);
        if ($config['width'] % 2 != 0)
        {
            $config['width']++;
        }
        $config['height'] = $thumb_size;
        $img_type = 'wide';
    }
    else if ($_width < $_height)
    {
        // landscape image
        $config['width'] = $thumb_size;
        $config['height'] = intval(($_height / $_width) * $thumb_size);
        if ($config['height'] % 2 != 0)
        {
            $config['height']++;
        }
        $img_type = 'landscape';
    }
    else
    {
        // square image
        $config['width'] = $thumb_size;
        $config['height'] = $thumb_size;
        $img_type = 'square';
    }

    $this->load->library('image_lib');
    $this->image_lib->initialize($config);
    $this->image_lib->resize();

    // reconfigure the image lib for cropping
    $conf_new = array(
        'image_library' => 'gd2',
        'source_image' => $img_thumb,
        'create_thumb' => FALSE,
        'maintain_ratio' => FALSE,
        'width' => $thumb_size,
        'height' => $thumb_size
    );

    if ($img_type == 'wide')
    {
        $conf_new['x_axis'] = ($config['width'] - $thumb_size) / 2 ;
        $conf_new['y_axis'] = 0;
    }
    else if($img_type == 'landscape')
    {
        $conf_new['x_axis'] = 0;
        $conf_new['y_axis'] = ($config['height'] - $thumb_size) / 2;
    }
    else
    {
        $conf_new['x_axis'] = 0;
        $conf_new['y_axis'] = 0;
    }

    $this->image_lib->initialize($conf_new);

    $this->image_lib->crop();
}

First open the config.php in folder system/application/config/ and set the CodeIgniter base_url

$config['base_url'] = "http://localhost/ci_gallery/";

Next load the URL Helper in autoload.php in the same folder as above file

$autoload['helper'] = array('url');

Now create the image controller in file image.php inside folder system/application/controller and add this attribute inside the image class

private $data = array(
    'dir' => array(
        'original' => 'assets/uploads/original/',
        'thumb' => 'assets/uploads/thumbs/'
    ),
    'total' => 0,
    'images' => array(),
    'error' => ''
);

The varible above created to store the default directory path, total images inside the folder, and error message while uploading the image, the value of those variables will set in the next function. Add the function index inside the Image class

public function index($start = 0)
{
    if ($this->input->post('btn_upload')) {
        $this->upload();
    }

    $this->load->library('pagination');

    $c_paginate['base_url'] = site_url('image/index');
    $c_paginate['per_page'] = '9';
    $finish = $start + $c_paginate['per_page'];

    if (is_dir($this->data['dir']['thumb']))
    {
        $i = 0;
        if ($dh = opendir($this->data['dir']['thumb'])) {
            while (($file = readdir($dh)) !== false) {
                // get file extension
                $ext = strrev(strstr(strrev($file), ".", TRUE));
                if ($ext == 'jpg' || $ext == 'jpeg' || $ext == 'png') {
                    if ($start <= $this->data['total'] && $this->data['total'] < $finish) {
                        $this->data['images'][$i]['thumb'] = $file;
                        $this->data['images'][$i]['original'] = str_replace('thumb_', '', $file);
                        $i++;
                    }
                    $this->data['total']++;
                }
            }
            closedir($dh);
        }
    }

    $c_paginate['total_rows'] = $this->data['total'];

    $this->pagination->initialize($c_paginate);

    $this->load->view('images/index', $this->data);
}

Inside the index function it called the upload function when upload button clicked by the user, and the pagination class is configured, the script is looping through the folder find whether the file is image or not, and now the upload function

private function upload()
{
    $c_upload['upload_path']    = $this->data['dir']['original'];
    $c_upload['allowed_types']  = 'gif|jpg|png|jpeg|x-png';
    $c_upload['max_size']       = '500';
    $c_upload['max_width']      = '1600';
    $c_upload['max_height']     = '1200';
    $c_upload['remove_spaces']  = TRUE;

    $this->load->library('upload', $c_upload);

    if ($this->upload->do_upload()) {

        $img = $this->upload->data();

        // create thumbnail
        $new_image = $this->data['dir']['thumb'].'thumb_'.$img['file_name'];

        $c_img_lib = array(
            'image_library'     => 'gd2',
            'source_image'      => $img['full_path'],
            'maintain_ratio'    => TRUE,
            'width'             => 100,
            'height'            => 100,
            'new_image'         => $new_image
        );

        $this->load->library('image_lib', $c_img_lib);
        $this->image_lib->resize();
    } else {
        $this->data['error'] = $this->upload->display_errors();
    }
}

You can see on the code above, thumbnail is created every time image is uploaded to maximum size 100 x 100 pixels, and putted in the different folder , the last function is delete image

public function delete($ori_img)
{
    unlink($this->data['dir']['original'].$ori_img);
    unlink($this->data['dir']['thumb'].'thumb_'.$ori_img);
    redirect('/');
}

The function getting the parameter as image name and deleted the orginal and thumbnail image,  and now the view file index.php inside folder system/application/views/images/

<!-- the javascript code to load clicked image and changing the class-->
<script type="text/javascript">
    function changepic(img_src, obj) {
        document["img_tag"].src = img_src;
        var thumbs = document.getElementsByName("thumb");
        for (var i = 0; i < thumbs.length; i++) {
            var tmp_id = "thumb_" + i;
            document.getElementById(tmp_id).setAttribute("class", "thumb");
        }
        document.getElementById(obj).setAttribute("class", "thumbclick");
        var ori_img = img_src.replace("thumb_", "");
        document.getElementById("detimglink").setAttribute("href", ori_img);
    }
</script>

<!-- the view file -->
<div id="container">
    <div id="imgshow">
        <?php if (isset($images[0])) { ?>
        <a href="<?php echo base_url().$dir['original'].$images[0]['original']; ?>" target="_blank" id="detimglink">
            <img class="imgdet" name="img_tag" src="<?php echo base_url().$dir['original'].$images[0]['original']; ?>" width="500"/>
        </a>
        <?php } ?>
    </div>

    <div id="imglist">
        <form enctype="multipart/form-data" id="fupload" method="post" action="<?php echo site_url('image/'); ?>">
            <input name="userfile" type="file" size="20"/>
            <input type="submit" name="btn_upload" value="Upload &uarr;" class="btnupload"/>
            <?php if (isset ($error)) { ?>
            <div class="error"><?php echo $error; ?></div>
            <?php } ?>
        </form>

        <div class="clear"></div>

        <div class="imgfor">
        <!-- Looping Array Image -->
        <?php foreach($images as $key => $img) { ?>
        <div class="imgbox">
            <div>
                <a href="javascript:" onclick="changepic('<?php echo base_url().$dir['original'].$img['original']; ?>', 'thumb_<?php echo $key; ?>');">
                <img class="thumb" name="thumb" id="thumb_<?php echo $key; ?>" src="<?php echo base_url().$dir['thumb'].$img['thumb']; ?>"/>
                </a>
            </div>
            <div class="dadel">
            <a class="adel" href="<?php echo site_url('image/delete/'.$img['original']); ?>">
                delete
            </a>
            </div>
        </div>
        <?php } ?>
        <div class="clear"></div>
        </div>
        <div class="clear"></div>

        <div class="bottom">
            <?php echo $total; ?> Image(s)
        </div>

        <div class="bottom">
            <?php echo $this->pagination->create_links(); ?>
        </div>
    </div>

    <div class="clear"></div>

</div> <!-- end div container -->

The result is like the image below, i’m not posting the css code in here but you can see on the demo (sorry, the upload and delete feature disabled) or the downloadable source code, and the code included some sample image so the size is bigger than fresh copy CodeIgniter.

DOWNLOAD SOURCE | DEMO

in case the download link above not working try this:

http://www.box.net/shared/h1405cfukr or http://min.us/mveQ86i