Posts Tagged "image"

8 Javascript Mobile Web Image Gallery Library

August 7th, 2011 by aditia rahman / No Comments  

     

This post I compiled some examples I found for creating image gallery in mobile web, cause compared to web desktop, creating image gallery in mobile devices must be different, we have to thinking about limited screen resolution, supported event, etc. And these library & tutorial might help you to get started creating your own mobile web gallery, and some of them a have tried it on my local computer, using iPhone simulator.

Photo Swipe

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

In:  Javascript
Tags:   /  / 
Read More ...

Sliding Stacked Images With JQuery

May 14th, 2011 by aditia rahman / 5 Comments  

     

A sliding door effect can be used what the site offer. About a week ago I visited a site called auroraos, on the first page I see a nice sliding image gallery on the front page, it used JQuery to creating the effect, it like a vertical accordion, sliding door effect or whatever you called it.

jquery sliding stacked images

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.

In:  JQuery
Tags:   / 
Read More ...

10 Free Image Editor For Windows

April 11th, 2011 by aditia rahman / No Comments  

     

Maybe you want to start a design graphic career or business with low cost, all these software here are maybe can be one of your choice as a photoshop alternative. You can click on the each images to visit the official site and must be easy to find the download link.

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.

GIMP

In:  Freebies / Tools
Tags:  
Read More ...

ExtJS Thumb Viewer Using Dataview

February 11th, 2011 by aditia rahman / No Comments  

     

extjs thumb viewer dataview

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.

In:  Extjs
Tags:   /  / 
Read More ...

Basic PHP Image Watermark With GD Library

February 1st, 2011 by aditia rahman / 3 Comments  

     

For today just wanna go back to a little PHP code again, I want share to creating a very basic image watermarking in PHP, watermark  feature are already widely used in some popular digital art, and photo websites like istockphotos, deviantart and any other sites, that maybe I don’t even know. Now here it goes, first make sure you have GD installed with PHP, you can check on your default phpinfo page using <?php phpinfo(); ?>, or you can use this php script

if (!function_exists("gd_info")) {
	echo "GD not installed";
} else {
	echo "GD installed";
}
In:  PHP
Tags:   /  / 
Read More ...

Rotating Image Using JQuery

January 6th, 2011 by aditia rahman / 5 Comments  

     

This is my experimental code using JQuery, in this post I want to show you the way how to rotating image using JQuery, so this is what I will create, single image with one button controller that located in the center of the image, and to rotate it user must drag the center button (which mean right click and hold) and the image angle will change based on mouse position.

In:  JQuery
Tags:   / 
Read More ...

Create Collage Image Gallery With Jquery

December 28th, 2010 by aditia rahman / 10 Comments  

     

In this post I want to share how to create very simple Collage Image Gallery using Jquery, actually the idea creating this is from my previous post, all of this sample image I’m using from this flickr group, this sample is using 15 images, the images will be static, here is the code for the main html element.

<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>
In:  JQuery
Tags:   /  / 
Read More ...

Cropping Image To Square Dimension With CodeIgniter

July 14th, 2010 by aditia rahman / 8 Comments  

     

I’ve posted similar article before but this time I want to do it with codeigniter, codeigniter have a powerful image manipulation class, in this post I will use it to make thumbnail square from image, let get directly to the code. I make the function inside the controller, this code is cropping image that already located on the server so the image path (not URL) have to be defined.

In:  Codeigniter
Tags:   /  / 
Read More ...

Basic Image Gallery With CodeIgniter

June 27th, 2010 by aditia rahman / 28 Comments  

     

CodeIgniter is quite mature framework to creating web application, the built in libraries and helper very helpful to creating most feature in web application, this post I want to create very basic image gallery using CodeIgniter, the the built in libraries that I used are File Uploading, Image Manipulation and Pagination, whereas the used helper is URL Helper, and here’s we go

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' => ''
);
In:  Codeigniter / PHP
Tags:   / 
Read More ...