Lately I’ve been using jQuery to make links on sites I develop stand out a bit more.

I’m animating the background-color and color here (and in some cases the padding as well), and I’d like to show you guys how it’s done.

The Code

HTML:

<a href="#" class="animate">Test link</a>

jQuery:

$(".animate").hover(function(){

    $(this).stop().animate({backgroundColor: '#1794e5'});

}, function() {

    $(this).stop().animate({backgroundColor: '#d43d82'});

});

Demo



Test link

Explanation

The jQuery code is pretty straightforward, the first function in there animates on hover, and the second one on hover out. The stop(). is in there to make sure the effects don’t queue (else the link will change color after hovering a couple of times).

Adding more effects

You can add more effects by adding more parameters inside the brackets like this:

$(this).stop().animate({backgroundColor: '#1794e5', color: '#fff', padding: '5px'});

Make sure to check if you are using the right syntax (some values are noted differently then normal CSS).

Last word

Hope you guys liked it, if you’ve got any questions, let me know in the comments!

Here we go, another free image, this time it’s a close up of some frozen snowflakes.



It is released under a creative commons 3.0 license. This means you can use and edit this image in any way you like in your personal and corporate work. Just don’t spread this image in any other way then by referring to this page, and always attribute to me or my website.



By the way, I will release more images from my archives in the future! Hope you guys like it.

This is the image:

Download

You can get it over here at my Facebook downloads section.

Magic Gallery Pro 3.0 is released!

Hi guys, I’m pleased to tell you that I’ve just released the pro version of Magic Gallery 3.0! You can get it for €9 at www.magicgalleryplugin.com The free version will be released at the end of januari 2012.

Since I first released Magic Gallery, a lot has been changed within WordPress.

I’ve decided to completely rewrite the plugin with these new functionality, to provide a better and more wordpress-native experience for the people using my plugin.



Work is progressing fast, and below is a short list of the new functions and a video of the new functionality.

A sneak peak at some of the new functions:

– Utilizes custom post types

– Uses wordpress attachment system so images are usable system-wide

– Ajax powered backend pages (pro version)

– Uses native wordpress backend styles

– Ability to show a map with marker (or a map with image geodata markers (pro version))

– Set the position of the map (before or after the_content)

– Sortable images

– Sort images via drag & drop (pro version).

– Set gallery cover image.

– Set gallery cover via ajax (pro version).

– Creating/editing/deleting albums.

– Uploading/editing/deleting images in these albums.

– Set thumbnail and map dimensions.

– Automatically generated thumbnails.

– Pikachoose integration.

– Fancybox integration.

– Pikachoose and Fancybox combined integration.

– Set position of gallery (before or after the_content)

– Change thumbnail and gallery image size via the settings page.

– Function to regenerate all thumbnails and images (necissary after changing the sizes).

– Insert gallery’s into your other post and pages (via a metabox or shortcode) (pro version).

– Hide the options page from all users except the selected one (pro version).

– Change the title of the Magic Gallery (the one that is shown in the backend navigation) (pro version).

– Well documented PHP code (pro version).

– Comes with a well-documented CSS file that you can use in your own theme to style the plugin’s output (pro version)

Want to get notified at launch?:

Then go to the plugins new website and enter your email adress!

When you’ve shared it there with 5 of your friends, you will get a 25% discount on the paid version And yes, there still will be a free version.

More info

On magicgalleryplugin.com you can see demo’s and screenshots of all of the new features.

In my spare time I like to put some time into photography, and I thought that the launch of my new website was a good moment to share some of those images with you guys.



Today, I’m releasing two images of some fresh green leaves for free.
They are released under a creative commons 3.0 license. This means you can use and edit these images in any way you like in your personal and corporate work. Just don’t spread these images in any other way then by referring to this page, and always attribute to me or my website.



By the way, I will release more images from my archives in the future! Hope you guys like it.

These are the two images:

Download

You can get them over here at my Facebook downloads section.

We’ve all been there. Your first meeting with a client. Did I prepare well? How do I communicate my professionalism and knowledge? And most important, how do I make the client like me? All these things are constantly running through your mind, and are not contributing to your confidence.



This post will give you a good basic principle for your first meeting, by illustrating the main points of attention with my personal experiences.

Hold on to these rules, and you won’t have to be so worried about meetings anymore.

Prepare

Analyse the industry of your client, and write down stuff from the competition that is common, so you can make suggestions that will make your client stand out from the crowd. This is of value for his or her business.



You can do research on many levels. Start by searching info about your contacts personal life, especially at Facebook and LinkedIn. If you’re lucky, you can get an impression of what a person is like, and you’ll be able to anticipate a bit.



Next, check out the corporate website and social networks where your clients company is on. Especially focus on parts that define the way that the company does business. Think of some functions that will make your clients company look stronger at those points, and suggest them to the client during the meeting. Thinking ahead like this can give you a real advantage in conversations.

Relate

In business, it’s extremely important to relate to your client. Also, it is one of the hardest things to achieve and it will take you a lot of time preparing for this. In my experience, it is vital to be able to explain technical issues in a no-nonsense way. Let me illustrate this by using an example from my experience: A client once asked me if I could explain how the process of going from a design, to front-end code works.



Fortunately, I had thought about this before, because I figured if I would be the one buying a front-end related service somewhere, I’d want to know what I would be buying. This is what I came up with: The design is the base. We cut it up into pieces, and then start making the code. In the XHTML, where you define the structure of the site, we start making blocks of code. This still has nothing to do with the design, merely the structure and content. When we have done this, we attach another file (the CSS), where we tell what to do with each block. For instance, we can say that the block with the navigation should be 900px by 30px, with background image x and text colour y (etc.).



For clients, it is important that you can relate to them, and explaining what you do is a vital part of business. Why would they do business with if you can’t even explain your service in their words?
I can imagine that this is not so easy to think of on the fly, and this is why it is so important to spend time trying to relate to your clients before you meet with them. Research their world, look at what their competition is doing and most important, try to relate in a personal way.



Think: What would I want to know if I were my own client?

Be open

When one of my clients asked me, how I could offer the same product (in his mind), for a lower price then the other companies he had talked to, at first I didn’t know how to respond. This is a tricky part, because you don’t want to make your clients think you are cheap in any way. I decided to put my cards on the table, and explain to him that I could do this because I am using the WordPress framework, and some other nifty tricks that will cut the actual programming time by as much as 50%.



Make sure you communicate that you aren’t cheap to work with, but just very productive. Communicate it clearly when a wish of the client isn’t technically possible, or not in your skillset.



Also, be honest and punctual about delays and problems you encounter. A client will appreciate the honesty, and he will be able to adjust his own planning accordingly. This will save him a lot of stress, and even more when he has to report to someone else.

Make notes

Always make notes during a meeting, especially with clients. It will give them the impression you are an active listener, which is of great importance.



Personally, I don’t like taking digital notes during a conversation with a client. It tends to distract people quicker and moves the focus from the conversation to the screen.. Of course it’s okay to show your client relevant stuff online, like examples of what the competition is doing and stuff you did before, but for me, that’s it.



I take notes on a moleskine notebook, and after the conversation, I type the key parts into Evernote. I also take pictures of sketches and add them to Evernote, for easy referencing during the programming process.

Be yourself

This is one of the most important advices I can give. Be yourself. Don’t be, or act like, someone you are not. For instance, why wear a suit when you normally don’t, and don’t feel comfortable in one? Your client will notice your discomfort, and think that something is not right.



It is important for any salesperson, even if you are running your one-man business, to be self-conscious, and know how to present yourself in a way that comes closest to your individual. It will make you more comfortable, and you will radiate that to your client.

Do not interrupt

This goes hand in hand with relating to your client; being able to listen with all of your attention. Part of this is to never interrupt your clients, even when they think they know what they are talking about, but in fact they don’t.



Don’t be afraid to tell them that in your professional opinion, they are wrong, and give them suggestions how to do this in another way, but never ever interrupt them! It will make them feel like they are not being listened to. And why would you buy something off of someone who doesn’t even listen?

Final note

Did I miss anything, do you have a correction, or perhaps a question? Please let me know below in the comments (and if you enjoyed reading this, please hit one of the buttons below)!

A site’s logo is an element that’s always there, but a lot of designers still treat it as just an image.

It’s time to change that. If we treat the logo as just an image, google will treat it that way too. But we want google to treat your company’s logo like an important heading element, right?



Using the stechnique I will describe now, we will make <a> element that holds your logo, and can still display an alternative heading to search engines.

The Code

HTML:

<h1 class="logo"><a href="link-to-your-homepage.html">Company Name</a>
<h1>

CSS:

h1.logo a {

	background-image: ('link-to-your-logo-image.jpg');
	background-repeat: no-repeat;
	width: 200px; //* Change to correct width *//
	height: 200px; //* Change to correct height *//
	text-indent: -9999px;
	display: block;

}

As you can see, the core of the code up here is the usage of a background-image for the link element, and the usage of text-indent.

Text indent makes sure your text indents (duh). What this means in our case is that it is effectively moving the text 9999 pixels off-screen, so that we as end users do not see it.

The search engine bots that crawl your site however, will see the content in there.



So now, in stead of showing search engine bots an image, we are giving them the heading they need: your company name.

Last notes

This approach has another minor design advantage, you can give your logo a nice and fancy hover effect (check the logo on top of this site). It was created using the same technique, and adding a simple :hover element in the css.

Magic Gallery Pro 3.0 is released!

Hi guys, I’m pleased to tell you that I’ve just released the pro version of Magic Gallery 3.0! You can get it for €9 at www.magicgalleryplugin.com The free version will be released at the end of januari 2012.

Description

Today I give you a brand new plugin for WordPress: Magic Gallery!

It is a simple image gallery with abilities to create albums and upload images from the WordPress admin area. For a list of all the features check below.



You can download the plugin here.

You can find the support forums over at the WordPress Support Forum.

Features:

– Creating/editing/deleting albums.

– Uploading/editing/deleting images in these albums.

– Set thumbnail dimensions.

– Uses a shortcode to display one (or multiple) album inside a post or page.

– Option to choose between different gallerys (Lightbox2, Pikachoose so far).

– On the fly thumbnail generation thanks to Smart Image Resizer (PHP), found on shiftingpixel.com.

– Option to hide/display image titles in the gallery.

– Set a maximum amount of characters for the titles.

– Option to show all images into one album.

– Widget with the ability to show the images of an album in the sidebar.

– Synchronize images via FTP.

Update 2.0 released!

I’ve been working on an update, version 2.0 has just hit the WordPress Plugin Directory! It includes the following fixes/functions:



- You can now use multiple albums on one page without any problems (for both gallery types!).

- There is now a widget included that will display a small gallery in the sidebar. The widget has options like title, height and width to make it fully customizable (and again, there’s one for both gallery types!).

- The plugin now uses wp_register script to load all the css and js, so it won’t be in your body anymore.

- All thumbnails now have editable dimensions, and the cropratio changes with it too.

- Album titles and descriptions can now be edited.

- Image titles are now editable, as well as the ability to move a picture to a different album.

- You can now upload images to albums via FTP, and then go to the new Synchronize Images page and add all the new images automagically to the database.

- The name Magic Gallery has now been properly spelled in the code :p

- The options page is reordered into a more clear and user-friendly page.

- More Pikachoose options, like transitions and speed of the effect.

- The Pikachoose gallery now has editable dimensions (for both the big image and the thumbnails).



Many thanks to Mauricio Cunha from mcunha98.com for adding some of these new features and sharing them with us!

Update 1.8 released!

I’ve been working on an update, version 1.8 has just hit the WordPress Plugin Directory! It includes the following fixes/functions:



- The gallery will now be displayed inside the_post (meaning it won’t always be on the top of the page anymore, but on the place where you placed the shortcode).

- The URL to the thumbnails is changed to one that works for more people (I hope ).

- The imageconvolution error is fixed.

- The gallery images are now sorted by ID, so that they will be ordered in the same order you’ve uploaded them.

- The Pikachoose gallery type now has the option to enable or disable the autostart of the slideshow.

- The Lightbox loading image and close image have been fixed, they are working again.