jQuery Image Wall

View demo   Download source

Today we want to show you how to create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.

Read more »

jQuery Grid Navigation Effect

View demo    Download source
Today we want to share some neat grid navigation effects using jQuery. In our examples we will show you ten ways how to navigate through a set of thumbnails. We’ll take a look at some of the possibilities and how to apply the effect.

Read more »

jQuery Sliding Background Image Menu

View demo   Download source



Today we want to share another jQuery menu with you. This menu will have several panels, each one corresponding to a different background image that will show on all panels when we hover over a panel label. Also, a submenu will slide out from the bottom. This menu comes with some configuration possibilities, such as the size of the image, the hover effect and custom default states.

Read more »

New Latest Arrival Animated Text and Icon Menu with jQuery

View demo   Download source
Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.

Read more »

Thumbnails Preview Slider with jQuery

View demo   Download source

In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make the preview slider work separately from the full image view, we decided to make a tutorial on how to use the little thumbnails preview part only.

Check out the Sweet Thumbnails Preview Gallery where me make use of the thumbnails slider idea.

The images are by talented tibchris and you can find them on his Flickr photostream:

tibchris’ photostream

So, let’s start with the markup.

Read more »

3D Wall Gallery

View demo   Download source

Today we want to share our latest experiment with you: the 3D Wall Gallery. Using the Safari browser the images of this gallery will be put into 3D perspective, when scrolling or sliding. When viewed with another browser, the gallery will be shown normally, retaining all the functionality.

For seeing the 3D effect, please try the demo in Safari.

Summarized, you can do the following things in this gallery:

• Hover an image to see a description
• Slide through the images using the jQuery UI Slider at the top
• Use the mouse wheel to scroll through the images
• Use the thumbnail previewer at the bottom to choose an image
• Use the hash anchor for the image in the URL to get to it directly
• Click on an image to slide it to the left (notice the hash anchor in the URL)
• Turn it into a 3D wall when scrolling/sliding (Safari users)
• Flipping the perspective when changing the slide/scroll direction (Safari users)

We are using the jQuery hash change plugin by Ben Alman:

jQuery Hashchange Plugin

And we are also using the jQuery Mousewheel Plugin by Brandon Aaron:

jQuery Mousewheel Plugin

The beautiful photography is by Alan Antiporda from Illusive Photography and you can find his Flickr Photostream here: Illusive Photography Photostream

When viewed in the Safari browser, you will see the perspective happening while scrolling or sliding. When changing the direction of scrolling, you will notice that the perspective will tilt to the other side.

You can navigate through the images by either using the jQuery UI slider at the top or your mousewheel.

You can also use the thumbnails previewer to click on an image and get to it directly.

When hovering over an image you can see a little description at the top.

We hope that you enjoy our little experiment and find it useful!

View demo   Download source

Read more »

Fullscreen Gallery with Thumbnail Flip

View demo   Download source

In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to. We will add navigation controls for the mousewheel and for keys. The thumbnail will have a zoom and and a fullscreen option, making the image in the background appear in fullscreen mode or as a complete image, resized to fit in the page.

We will be using Flip!, a jQuery plugin by Lucca Manno that flips elements.

And we will also be using the jQuery Mousewheel Plugin by Brandon Aaron.

The beautiful images are by talented Polina Efremova. Visit her website and check out her profile on Behance.

Let’s get started with the markup!

Read more »

Animated Content Menu with jQuery

View demo   Download source

Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked.

The main idea is to have a restaurant menu with the different menu categories displayed. Each content are will have some foods/drinks listed. Once a content box is shown, the menu items are going to disappear. If we click on the close button to close the box, the menu items will be shown again.

So, let’s get started.

Read more »

Expanding Image Menu with jQuery

View demo   Download source

In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. We will also slide in the colored version of the image, creating a neat effect.

The photography is by talented Robert Bejil, check out his awesome photos on his Flickr photostream.

So, let’s get started!

Read more »

Moving Boxes Content with jQuery

View demo   Download source



Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects that we will add as options to the menu item.

The content area will custom scroll for which we will be using the really awesome jScrollPane Plugin by Kevin Luck. We will also use the jQuery 2d transformation plugin by Grady in order to rotate the little boxes while we animate them, and the the jQuery Easing Plugin for some spice.

The beautiful photos are by Jin. Visit his Flickr photostream at http://www.flickr.com/photos/jinthai/

So, let’s start!

Read more »

Circular Discography Template with jQuery

View demo   Download source

Today we want to share a simple website template with you. The template will show some discography or music albums in a rounded fashion, rotating the albums when clicking on next or previous. When clicking on an album, we will open the album details view which contains a music player (jPlayer) and a playlist of some songs. There is also a description area that can be scrolled.

We will be using the following jQuery plugins and scripts that will help us with the effects and the functionality:

• jQuery Easing Plugin
• jScrollPane
• jQuery 2D Transformation Plugin
• jPlayer

We’ve added some nice music samples from the following artists:

Audiotechnica – Testing

by audiotechnica

Coffeeeurope -Arena Blanca

by Hektor Thillet

Ramblinglibrarian – Our Resolve

by Ivan Chew

Syenta – Emerging Cry

by Syenta

Thanks to the artists for releasing their music under the Creative Commons Attribution Noncommercial (3.0) Licence!

The initial screen of the template will show some loading element, and we will preload all the images. It will show the album view with the navigation arrows lined up in a diagonal:

When clicking on one of the navigations arrows, we will rotate the album and fade in the next/previous one:

When clicking on one of the albums, we will open the album detail view with a music player, a playlist and some detailed info on the album. The background image will now change to the one we had in the circle of the album before. The music will start automatically with the first song and continue through the playlist:

We hope you like this little template and find it useful!

View demo    Download source

Read more »

Rotating Image Slider with jQuery

View demo    Download source

In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality.
We’ll use the jQuery 2D Transformation Plugin for rotating the images and the jQuery Mousewheel Plugin by Brandon Aaron for the mousewheel control.
The beautiful photos are by Andrew and Lili and you can see their Behance profile here:

http://www.behance.net/AndrewLili

The images are licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.
Allrighty! Let’s start with the HTML!

Read more »

Sliding Letters with jQuery

Today we have a neat little effect for you. We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. We can either have the same word or a different one and we can slide in the new letters all the same time or one after the other.

We will be using the Lettering.js jQuery Plugin which you can find on Github.


View demo   Download source

Read more »

jQuery Wall Image Gallery

View demo     Download source

Today we want to show you how to create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.
To scatter the images we will be using the CSS3 child selector property and the jQuery Masonry plugin by David DeSandro.
The beautiful photos are by Mark Sebastian and you can see his Flickr photostream here. The images are licensed under the Creative Commons Attribution-ShareAlike 2.0 Generic License.
Let’s start with the HTML structure.

Read more »

5 Tips To Optimize Your LinkedIn Profile

Last week I wrote about 3 Easy Ways to Improve Your LinkedIn Profile. Today I want to cover how to optimize your LinkedIn profile so that people can find you.

Use Keywords In Your Headline
Your headline is the first thing people see when they go to your LinkedIn profile. Unless you change it, your headline will appear as your current or last position held.
Since this headline will appear in various places on LinkedIn, you want it to be more descriptive. The LinkedIn algorithm seems to put a lot of emphasis on the words used in the headline when ranking people, so make sure your headline includes your USP, benefits your company offers or your geographic location if you serve a specific area.

Include Keywords In Your Summary
After the headline, your summary is the first place that people will learn about you. Your summary is your elevator pitch. Make sure it looks clean and professional, while including the top keywords that you want to target.
Customize The Web Sites Option
So many people have this set to the default option (personal web site., company web site). LinkedIn allows you to make these more descriptive by using keywords as you can see below.



To do this, when adding your website select “other” from the drop-down menu and then manually key in your website title. Next paste your URL into the appropriate field and click “Save Changes.” You can do this with up to three (3) websites.

Optimize Your Text With Keywords
LinkedIn allows you to fill in descriptions in your profile headline, personal interests, summary, job title, and career history. Make sure, when filling out these sections, to use keyword-rich descriptions to draw relevant search engine traffic.
If you have an SEO background, this similar to the old keywords tag on web pages.
Use The Maximum Number of Characters
Each text field in LinkedIn allows a different number of characters. It is important to use all available characters because search engines like high word counts and lots of relevant keywords. Some character limits to keep in mind are:

• Headline – 120 Characters
• Status Field – 140 Characters
• Summary – 2,000 Characters
• Specialties – 500 Characters
• Company Name – 100 Characters
• Position (Job) Title – 100 Characters
• Position Description – 2,000 Characters
• Interests – 1,000 Characters

Read more »

Facebook And YouTube Growing In Importance

I was looking over HubSpot’s “The 2011 State of Inbound Marketing” report and it really hit home what sites have won the social media battle.

If you go back about three years, the big sites within the social media space were Digg and StumbleUpon. Companies spent a lot of time and effort to get on the first page of Digg because of the traffic that it brought. They even had a name for it the “Digg effect”.

The problem with sites like Digg and StumbleUpon was that while they could send tens of thousands of visitors to a web site, the Digg user rarely returned for a second or third visit.

That type of transient traffic made in difficult to build engagement online and marketers started looking for other social media channels to reach users through. Enter Facebook, Twitter and YouTube.



Look at the dramatic rise in the importance of Facebook, Twitter and YouTube to marketers since 2009. Huge growth in their importance to marketers as all three only trail a company blog in importance.

Read more »

The Future’s Not Ours to See, It’s Ours to Figure Out

The best marketers out there always know what's around the corner. It takes more than keeping up on the trends of the particular marketed item or service; it involves integrating a grand comprehension of global activity into the individualized business strategy of a client. Often this is only possible when you have the cognitive skill to contemplate multiple socio-economic factors at once while also knowing what the wants and needs are on the consumer end of the chain. In the world of social media, where the technology is so unpredictably powerful it can take down tyrants, the ability to foresee the future of Facebook and other powerhouses of social media is a highly prized skill.

Not every internet marketer is created equal. Many fail to fully grasp the influence of world events on the long-term success or failure of an online marketing strategy, especially one that plans to use social media as a decisive tool. Online marketers worth their salt are paying close attention to the aforementioned Arab Spring for clues on the nature of social media. SMO is still an incredibly new marketing science, and the opportunity to measure its value in the political uprisings of the Middle East should not go to waste. It might sound a little over-analytical, but if you can see how effective Tweeting can be at turning a nation against its government, you can make reasonable projections about the power of social media that were previously just suppositions.

If you're going to seek online marketing consultation, find someone who makes it a point to relate recent events to your business concerns in order to create a plan catered for the future. Marketing consultant Amish Shah is an example of an internet marketer who not only identifies himself as a futurist, but demonstrates a proven track record of helping even Fortune 500 companies take a step back and get a look at the bigger picture. Shah and others like him are not easily intimidated by the complexity of the countless factors that go into creating a feasible and long-lasting social media marketing strategy.

They won't predict the future per se, or else they'd just bet on the right horses and cash out like any of us would, but they will give you a clear cut set of likely truths about the fate of your market. Not only that, savvy internet marketing consultants will know exactly which particular social media strategy will work for you when you start to integrate social media into your marketing tactics. Whether it's viral video, other content creation, or simply good old fashioned networking, forward thinking consultants will tell you which stratagems will work best long term.

The future is not ours to see, but whatever will be doesn't necessarily have to be if you have the right scope set on the future. The human brain is a machine designed to anticipate. While we can't predict everything, especially in the ever-changing world of online marketing, we can narrow the path down to a size that is comfortable to cross. And if we can't do it, a worthy consultant can.

Read more »

7 FBML examples for your Facebook fan page.

Facebook markup language or FBML for short is used in a variety of places within the social network. Anyone who has written any Facebook applications will already be pretty familiar with its tags, and will probably have used it to write data to walls, or share postings with others programmatically. If however you haven’t yet dipped your toe in the water of the Facebook API, or indeed haven’t actually needed to – there are some snippets of FBML which prove to be mighty useful when creating custom Facebook Fan Pages, and can easily and quickly out of the box be used with the FBML widget, which adds an extra much needed layer of customisation to an existing Facebook fan page. The static FBML widget can be added multiple times, and in multiple places (sidebar and tabs) to facilitate this. Once you’ve added it to your page, simply go to “edit page”, then under Applications click “edit” under Static FBML. This will give you the options you need to paste in your code.

Adding your newsletter

If your blog or website offers subscription via email, an additional place to find subscribers is within the Facebook network. Fans that stumble upon your page, or are invited by others may want to add themselves to your subscriber list directly from you page, without visiting your site. Using the code that your newsletter provider gave you, you can easily create a newsletter tab with a subscribe box. Whilst this isn’t strictly FBML (its just HTML) – its an easy way to increase your reach and exposure on the cheap. FBML needed. Something similar to below. This is what I’m using folks.

    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=WebDesignInIrelandBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">      <p>Enter your email address:</p>      <p><input type="text" style="width:140px" name="email"/></p>      <input type="hidden" value="WebDesignInIrelandBlog" name="uri"/>      <input type="hidden" name="loc" value="en_US"/>      <input type="submit" value="Subscribe" /> </form>







Include Sharing With Friends

One of the main benefits of being on the Facebook platform is the ability for viral sharing to take place amongst participants in the network. To encourage your business page to be shared with others you can implement a Facebook “multi-select” box, all within the static FBML box. This will loop through the current users friend list, allowing them to select who they want to share the fan-page with when they click send. You might want to put this under a “Spread the word” type tab to increase your reach.

Update. Some people have reported problems with this code. From what I can remember, it worked previously – so unless FB have changed things. Anyway – I’m using the below successfully now. Don’t for god’s sake copy and paste, examine the code, and type it exactly. WordPress makes a mess of single quotes which won’t work inside Facebook. I will get around at some stage to ammending this, but for now take care and try and understand what you are using. If all else fails, consult the Facebook documentation, or leave a comment here, which I’m more likely to respond to. I’ll not be replying to personal emails asking for help.

<fb:request-form method="POST" type="Webdistortion" invite="true" action="http://www.facebook.com/multi_friend_selector.php" content="Become a fan of Webdistortion!<fb:req-choice url='http://www.facebook.com/webdistortion' ' label='GO' /> ">  <div style="padding-bottom: 10px;">  <fb:multi-friend-selector condensed="true" style="width:80%;" /&gt  </div>  <fb:request-form-submit />  </fb:request-form>





FBML needed

    <fb:request-form method="post"      type="Your Fan Page Name Here."      invite="true"      content="Check out Your Fan Page Name Here on Facebook!<fb:req-choice url='YOUR FAN PAGE URL here' ' label='GO' /> "&gt      <fb:multi-friend-selector actiontext="Tell your friends about us rows="3" showborder="true" /> </fb:request-form>





Include Multimedia

Multimedia objects such as flash, video and images can also be easily added to Fan Pages. If for example you wanted some flash video, or embedding of a flash game, the FB:swf, and FB:flv are perfect candidates. More details on the format of the API request available here for FLV and here for SWF. FBML needed (Flash object).

     <fb:swf swfbgcolor="ffffff"  swfsrc='http://www.yoursite.com/flash.swf' width='380' height='250' />





(FLV video)

     <fb:flv src='http://www.yoursite.com/video-gallery/video.flv' />





(Image)

     <fb:photo pid="12345" />      <img src="http://www.yoursite.com/image.jpg" />





Monitor your pages with Google Analytics

A great social media campaign should focus on measurement over reach. One of the easiest ways to take a look at the data provided via a Facebook page is via Google Analytics. Thankfully, inclusion on an existing static FBML page is particularly easy. Here’s the code you need. Obviously, just replace the uacct with your own account ID to start collecting data about your page. FBML needed

    <fb:google-analytics uacct="UA-9999999-99" />





Randomise your messages

You can easily add random messages to your Facebook page. You may for example, want to experiment with multiple calls to action – or offer multiple promotions to your audience. The Facebook Random tag lets you achieve that, without any programming. Here’s how: FBML needed

    <fb:random>      <fb:random-option weight="2">A: This will be shown 2 times as often as B.</fb:random-option>      <fb:random-option weight="1">B: This will be show half as often as A</fb:random-option>      </fb:random>





Add profile image

Your profile image is the thumbnail found at the top left of your page. To include it again anywhere on your Facebook Static FBML page, try using this example. A number of size parameters can be set with the tag, so if this size isn’t your thing, you can easily adjust it. Replace the UID parameter with your own userId.

    <fb:profile-pic uid="12345" size="normal" width="400" />





Add wall sharing capabilities

Sharing of individual bits of data or URL’s on Facebook is pretty integral to success. One easy way to do this on a Static FBML app is via the share-button. This allows you to share both data and links into a users wall / stream. FBML needed

    <fb:share-button class="url" href="http://www.yoursite.com" >





Or to include more specific meta data. FBML needed

    <fb:share_button>      <meta name="medium" content="news"/>      <meta name="title" content="Announcing the xxx Application"/>      <meta name="description" content=""/>      <link rel="target_url" href="http://apps.facebook.com/xxx"/>      </fb:share_button>





Overview

Hopefully some of these FBML examples should help get your Facebook page off the ground, with some additional functionality for minimal effort. Combining some of the tags that Facebook provide out of the box, with a little creativity can really boost your social media marketing efforts without the need for calling on a programmer.

If you have an out of the box requirement for a Facebook landing page, I’ve also started to create Facebook templates. – if there’s nothing there to suit you, feel free to drop a comment and I may put something together to suit.

A follow up post of mine discusses how you can take this concept further, and fully integrate WordPress with Facebook

Read more »