Posts In "JQuery"

Digg Like URL Submitter Using JQuery and PHP

January 18th, 2011 by aditia rahman / 18 Comments  

     

Today I want to create something that fetching the submitted url data, some kind that many social bookmarking have, beside facebook, the other famous one is digg, this image below is something that I share in this post.

Not all feature I create, like fetch the url images, auto submit when user paste an url, etc.  But I make the look and feel like a digg style, digg use very cool blue color combination.

JQuery iTunes Like Slide Show Gallery

January 17th, 2011 by aditia rahman / 1 Comment  

     

Today post is my other post with jquery, so how you do you have in mind about iTunes gallery? well this capture image are in my mind

This example is not really the same like iTunes gallery like in the image above, but at least the basic behavior almost the same, in previously post I have played with JQuery UI Slider and Rotate3Di plugin, in this  post that plugins are used again, and actually I modified the jQuery UI slider scroll pane example.

JQuery Expand Stacked Images Using Slider

January 13th, 2011 by aditia rahman / 2 Comments  

     

This time the post will show how to expand the stacked images with jquery, for the illustration, there is a stack of images that have very small margin between each image, and the slider have a function to make the margin larger, really easy to imagine right? Now to make it look stacked I’m using jquery plugin, the rotate3Di and of course the JQuery UI slider

View Demo | Download Source

Rotating Image Using JQuery

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

Moving Element To Random Position Inside A Container

December 25th, 2010 by aditia rahman / 5 Comments  

     

This is just my simple post, I want to moving a box to random position inside it container, I post this to help me remembering this for my little project. If I sketch it, basically this sample is like this:

Then convert this to html, just simple div inside div and the difference are id and the css style, and there is one button to triggering the movement of the box inside the container

10 Jquery Ajax File Uploader Plugins

June 29th, 2010 by aditia rahman / 8 Comments  

     

Creating ajax upload from a raw javascript or jquery is not that simple, when baking a simple website, I personally will use available plugin, so it can save me much time and effort, we have to thank that there a lot of developer out there that share their great works.

01. Plupload

pupload example screen