These day many design showcase site are using wordpress for example CSS galleries, photography portfolio, etc. In this post I share some of wordpress themes to creating a gallery site, so you can built your own gallery site in a few minutes.
I try to find which is free to use. I created this post cause I found some of them are in minimalist design, really love it, look elegant, and feel like a premium theme.
Today post I want share some of my thought creating simple image gallery using sencha touch. I created this example to learn more about sencha touch MVC (Model View Controller) application structure, basically I created this example after watching the sencha con video about Structuring Your Sencha Touch Application, so the code in this example is almost like from that video.
The image above is the mockup design of this example that will created, there are three main screen first for list all album folder, second for viewing image inside the album folder, and the last for viewing full image.
Mobile web browser capalility today almost like a desktop browser, like support css, javascript, flashplayer. For web designer they must immediately adapt their websites to these new devices, and must know the limitation of the device, like screen resolution, gesture touch features, etc.
With mobile web framework like jquery mobile or sencha touch we can make a mobile web application look a like native mobile app. Maybe these sites can be one of your inspiration when designing user interface, whether for native mobile app or mobile web.
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.
Just to keep me inspire about design in this weekend, this is quite similar post like before, about chocolate website design showcase, that I posted about last week, same as before great image will be important to get customer attentions, and don’t know I want to grab some for cheering my weekend, enjoy.
Creating rounded corner in web design absolutely not a new thing, but with the presence of CSS3 in popular browser like Firefox, Chrome, Safari, and Opera, now is easier for us to creating rounded corner, sometimes I remember before when I need to add an image in each corner of the box, what a frustrating. Untill these day many websites still using it as a main navigation style, even in the corporate website, and some of more simple websites their menu style inspired by apple.
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>
Last week I tried some of the extjs dataview example, it really great, just my thought, why not creating simple image gallery with dataview? All that we need is provided in the example (the panel, fileinputfield, the xtemplate) and this is the page wire frame that I created using Pencil Firefox Plugins.
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' => ''
);
