• 1 jpeg image chopped into 3 layers. (The background layer is the original image)
• some simple jQuery code to determine where your mouse is and then move the images left or right.

We are going to create a jquery + html + css image loader. This means, the browser will load the first image, then the next and so on. Its actually quite simple and can make the viewing experience of an html gallery a lot less frustrating.

How does it work

Instead fo creating <img> tags, we will create <div> tags holding the image info like src and alt. Then we will use jQuery to turn the div into an img 1 by 1. Lets get started.

HTML Markup

<div class="loading"></div>
<ul>
    <li><div id="1" src="my-image1.jpg" class="loadable-image" alt="text"></div></li>
    <li><div id="2" src="my-image2.jpg" class="loadable-image" alt="text"></div></li>
    <li><div id="3" src="my-image3.jpg" class="loadable-image" alt="text"></div></li>
</ul>

CSS Markup

.loading
{
    width:16px;
    height:16px;
    padding:6px;
    background:#000 url(images/ajax-loader.gif) 50% 50% no-repeat;
    position:absolute;
    z-index:99;
    top:50%;
    left:50%;
    margin-left:-10px;
    margin-top:-10px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}
ul
{
    padding:0px;
    margin:0px;
    list-style:none;
}
ul li
{
   float:left;
   padding:0px 20px 20px 0px;
}

Javascript / jQuery

$(document).ready(function(){
    // hide all image divs
    $('.loadable-image').hide();

    // load first image
    loadNextImage();
});

var imageCounter = 1;

function loadNextImage()
{
   var div = $('.loadable-polaroid#'+imageCounter);
   if(div.length){$('.loading').show();}
   var img = '<img src="'+div.attr('src')+'" alt="'+div.attr('alt')+'">';
   var parent = div.parent();
   parent.html(img);
   parent.find('img').load(function(){
       // you might be able to use $(this) instead
       parent.find('img').show();
       $('.loading').hide();
       imageCounter++;
       loadNextImage();
   });
}

How to make it better

• You could create a  loop ( javascript or php) on the images to dynamically assign them id’s

I hope you find this code useful. Its really simple and works extremely well. If there are any problems with the code I have posted please let me know and I will fix it ASAP.

After a google search I luckily found that you have to cancel the special charcter with “\\”  so you can use it as a normal string.

var myText = "I am a the good text ( I am the text you want to get rid of )";
var stopNumber = myText.search('\\(');
var goodText = myText.substr(0,stopNumber));

The input type “option” is a drop down list. At some time you may need to find the value of the current or new selected value, you may also need to change the selected value. This tutorial is split up into small sections so just find the code your looking for and thank me later.

This is the basic structure of a Select Option Html tag.

<select>
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
</select>

Getting selected Value

[sourcecode language="javascript"]
$(’select’).attr(“value”);
[/sourcecode]

Getting selected Value on change

[sourcecode language="javascript"]
$(’select’).change(function(){
alert($(this).attr(“value”));
});
[/sourcecode]

Getting selected Text on change

[sourcecode language="javascript"]
$(’select’).change(function(){
alert($(’select :selected’).text());
});
[/sourcecode]

Changing Selected Option

This Code will find the option with a value of “audi” and select is. The code loops through the Select’s children (option tags) untill it finds a child with a curtain attribute. Once a match is found, it then gives the option the selected attribute.

[sourcecode language="javascript"]
$(’select option’).each(function(){
if($(this).attr(“value”) ==”audi”)
{
$(this).attr(’selected’,’selected’);
}
});
[/sourcecode]

After the completion of eTheme’s Crisp Gallery, I have already started on a new WordPress theme called Polaroid Gallery. This Theme will improve on the Previous by adding pre made styles with the ability to still customise colours and uses the new WordPress 2.9 built in Image edit and crop tool.

Heres some Screenshots

Beautiful Front page, all can be customised

The Theme Customises WordPress to make your life easier!

Gallery pages randomly layout images using jQuery and CSS3

I want it now!

Okay okay, I hear you. Polaroid Gallery will on the market in the next 2 – 4 weeks. For now, please visit http://ethemes.com.au/crisp-gallery/ to view the Crisp Gallery WordPress theme for Photographers and Artist.

Thanks for viewing, I hope your interested.

Today is the launch of eTheme’s first WordPress theme. The theme is title Crisp Gallery and it offers a simple, powerful and interactive display of images. The theme is perfect for any artist or photographer as it has been created to not only look and work great but also make the admin section of WordPress a friendlier place.

View the Crisp Gallery WordPress theme here.

The theme removes all unnecessary menu items and changes some editing components to make gallery management a breeze. The latest version of the theme features more components, smarter and more efficient code and more customisable items. These new features are not visible in the video demo but are in the theme for sale.

The theme is quite cheap. You download it with the safety of paypal for only $50!

View the Crisp Gallery WordPress theme here.

I’ve put together a short video showcasing the new eThemes Crisp Gallery theme. Here you can see the stunning simple design and the ease of using the theme.

Purchasing

This theme is’nt ready for purchasing just yet so if your interested in buying the theme, please contact me at e@elliotcondon.com to arrange a pre release sale

Features

The theme has many great features:

• Easy to use / manage home page image rotator
• Easy to use / manage Galleries
• New wordpress page interface
• Ability to change the colour scheme in detail
• Small file size and  fast loading

Pricing Packages – for WordPress users

• Standard: Theme and Documentation, ability to use 1 Gallery – $50
• Pro: Theme and Documentation, ability to use Multiple Galleries – $75

Pricing Packages – for non-WordPress users

• Complete Hosted Solution. Sit back and relax whilst your website is created for you. Your Domain will be purchased, your Server space will be purchased and your WordPress software and Theme will be installed for you. – Standard or Pro Price + $100 per year

Live Demo

Visit http://demo.ethemes.com.au/crisp-gallery/ to see the theme in action.

eThemes is a new business offering stunning WordPress themes that not only look good but are easy to setup and maintain. eThemes develop simple and effective step by step options to allow any user (with or without WordPress knowledge) to have great website customisation.

Who’s behind eThemes

I (Elliot Condon) am the designer and developer of and for eThemes. I decided to start this new venture whilst working on a clients portfolio website. I was hacking a pre-made wordpress theme and found the whole WordPress theme to be a mess and I didn’t understand how any artist would know how to use it. That’s when I decided to make something for the Artist Community: eThemes. I aim to make a diverse and unique range of portfolio themes with great back-end customising functionality making it simple and easy for any artist to use.

Can we check out a theme yet?

eThemes has lauched it’s first theme: Crisp Gallery.This theme offers a stunning cinematic environment to explore work through. It uses state of the art jQuery technology to load in your images 1 by 1 and a whole lot more.

Read more about crisp gallery here.

So what makes eThemes the best solution for Artists?

• eThemes WordPress themes are cheap
• They are really easy to use for both the artist and the user
• Get found on google quickly with smart SEO
• They look great
• They work on all browsers / OS
• There is detailed documentation to take you through setup and maintenance step by step
• eThemes is made for artists by artists

Sounds great! When can i get one?

eThemes has launched it’s first theme: Crisp Gallery. Crisp Gallery is a specifically designed wordpress theme for artists and photographers. It features a stylish cinematic content area with jQuery powered image navigation.

Read more about crisp gallery here.

Toggle is unlike most invoice / project management softwares: It is simple, straight forward and for one purpose only. Toggle allows you to manage Projects and Clients and lets you easily record times you have worked on them. It can show the data in graphs and easy to read record tables on its clean and well designed dashboard . You can start recording from your desktop app, pause it on the website and then continue your time counting later from your iphone.

So who is for?

Toggle is made  for the standard freelancer who has realized that writing down hours on paper and tallying them up in a .xml file is no longer the way forward in life. Toggle can be used on both Mac and PC (thank you!) and its completely free (for a standard user account). The standard user account is perfect for a single freelancer but if you want a team and want to manage other peoples hours you may have to fork out some money each month. Toggle is designed for people who need to keep track of time but already have a system for invoicing.

Wrap that all up again?

• Its FREE
• Track time from your desktop / browser / iphone
• It looks great! (which is a huge software factor for me)
• it works every time
• makes life easier to see when you have worked and total hours for a job
• Its FREE
• You can add in hours manually if you forget to press the start stop.

Can we see some screen shots?

Yes you can, below I have got a bunch of random screen grabs of the desktop app and the browser website.

I’m sold!

Great, head over to http://www.toggl.com and get yourself an account today.

The key to a great blog is to use image thumbnails. There are a few WordPress plugins available but non of them get the job done right… untill now!

Introducing WP Post Thumbnail

This WordPress plugin doesnt just save and display a thumbnail, its jam packed with features!

• Create 3 thumbnail sizes to use throughout your website (different sizes for blog and footer etc)
• use a jquery jcrop tool to crop your 3 thumbnails just right from 1 original picture (no stuffing around in Photoshop)
• WP Post Thumbnail integrates with the Post-Plugin Library and all its widgets (display thumbnails in latest / popular posts widget!)
• Call thumbnails from your WordPress theme with ease.

Installing WP Post Thumbnail

	IMPORTANT! Do not search and install this plugin via the WordPress plugin “Add New” page. The current version listed on the WordPress database is 1.8. This version is very buggy but they have released a new beta that works perfectly!
	Step 1: Download Download the WP Post Thumbnail plugin here: Download WP Post Thumbnail Plugin. You can also visit the Plugin website here to read official documentation
	Step 2: Install Extract the WP-Post-Thumbnail Folder from the .zip and copy the WP-Post-Thumbnail Folder to your plugin folder (wp_root/wp-content/plugins).
	Step 3: Activate Login to your WordPress dashboard, then navigate to Plugins » Installed. Scroll down to WP Post Thumbnail and click activate.

Defining the 3 Thumbnail sizes

To edit or update the Thumbnail sizes, click on Settings » WP-Post-Thumbnail. On this screen you can change the 3 thumbnail sizes (If you already have thumbnails, it will automatically re-crop them!). I advise you to name the 3 sizes “thumb-large”, “thumb-medium” and “thumb-small” for ease of use in your theme.

How do you create the thumbnails?

Either create a new post or edit an old one. The Steps are quite easy:

1. Select your thumbnail size (its good to make thumbnails for all sizes)
2. Select an image from the library and use jcrop to crop your image
   
3. Save your new thumbnail.

So how do i get it to show up in theme?

Its very easy. Just copy and paste this code into your theme where you want the thumbnail to appear. This code shows the “thumb-large” thumbnail and links to the post.

[sourcecode language="php"]
get_post_thumbnail($post->ID, ‘thumb-large’);
if ( !empty( $thumb ) ) { ?>
” title=”Read the post: ” alt=”” />


[/sourcecode]

Conclusion

WP Post Thumbnail is a great Plugin to display thumbnails for your posts, but what about your pages? I have hacked the plugin to make it usable with pages (this is great for a portfolio). If anyone wants the new code, just leave a comment and I’ll post a new article on hacking the plugin.

Also I will post an article on how to integrate this plugin with the Post-Plugin Library and its many great widgets. Thanks for reading.