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.
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.
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
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 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>
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
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.
