Posts Tagged "image"

10 Free JQuery FullScreen Slideshow Plugins

December 30th, 2012 by aditia rahman / 1 Comment  

     

JQuery are the most used javascript framework used for web design, on of them are for creating image slideshow, with the growing features of modern web browser in HTML5 and CSS3 so it is possible to create a fullscreen image slideshow without using flash, these post have several free jquery fullscreen slideshow plugins that you can use for many projects.

1. Photobox

JQuery Image Animation Trick With Mouse Position

December 27th, 2012 by aditia rahman / No Comments  

     

In this short tutorial post, I create a simple code in jquery to creating an animation look a like effect, that triggered by mouse cursor position. This trick can be used for animating photo profile, with changing the image source on html element or in this case I change the class value.

Basically this post inspired by Any.DO about page, example in this post is a simpler one, all you need is to detect image offset (width and height), image position relative to windows, document mousemove event to detect mouse position, and the conditional statement to decide which image you want to show.

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.

Sliding Stacked Images With JQuery

May 14th, 2011 by aditia rahman / 8 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.

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

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.

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";
}

Rotating Image Using JQuery

January 6th, 2011 by aditia rahman / 8 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.

Create Collage Image Gallery With Jquery

December 28th, 2010 by aditia rahman / 16 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>

Cropping Image To Square Dimension With CodeIgniter

July 14th, 2010 by aditia rahman / 11 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.