Fresh and Hot: 12 jQuery Image Gallery Tutorials

You can be a great photographer, or you can put some definitely wonderful illustrations on your website, but there is one remark. All this stuff would mean nothing, if it’s not framed suitably. The presentation of the pics is not less important than the content itself, moreover the perception of the illustration strongly depends on the way it’s showed. Maybe, that’s why web design still exists and prospers.

How to make your image gallery look attractive? Well, it’s quite easy to do with the help of modern web technology. I believe the best one is jQuery. So, developing the theme of today post, I have something for you. I searched through the web and found the fresh 12 jQuery image gallery tutorials. All of them are the latest tuts, for you to keep the current trends. Enjoy your learning.

* * *

Horizontal Portfolio Layout with CSS3 Animations & jQuery

The gallery is simply navigated by scrolling. Once you click the element, you’ll see more detailed info about it.

fresh jQuery image gallery tutorials

* * *

Photoset Grid

This tut will teach you to how to create wonderful photos grid.I must mention it’s most probably created to represent hipster photos.

fresh jQuery image gallery tutorials Read More

10 Church Modules to Install on Drupal Site

The times, when the church was associated with something outdated, passed. Now priests use all the benefits of the modern civilization – in the name of Jesus. It also concerns such its considerable part as the internet. It’s quite easy to gather the church community through the web.

Of course, in this case we have a problem of building a good site. The bad one will just compromise the God’s web-reputation: it’s better not to do the website, than to do it carelessly. We don’t need to be a professional programmer to build a website, there a lot of opportunities to use the ready platforms. One of the best is Drupal. I offer you check 10 Drupal Church Modules.

Drupal Church Modules Read More

Something Hot for Web Designers: 30 Free Dribbble PSDs

We live in a wonderful age. Internet gives all opportunities for self-fulfillment. The only thing you need is a strong wish: there are a lot of resources you can show yourself. Talking about web design I must mention a new site Dribble. Founded in 2009, it gained a strong popularity in design circles and even more. Dribbble became a concentration of design expressions: just watch, share, like.

The most interesting thing that Dribble is full of professional works, and I believe this resource is the best one to find the high-quality freebies. Actually, it’s the theme of the current post. 30 free dribble PSDs – all of them are fresh and all of them are for you, the guys who live in design, eats design and breathes design. The digest presents icons, UI elements, calendars, notepads etc., made in minimalism and flat styles. Enjoy.

* * *

Oniam UI Kit

Free Dribbble PSDs

* * *

Calendar Full

Free Dribbble PSDs Read More

Boring ‘About Us’ Page into Excellent ‘Meet Our Team’ Page (+10 Examples)

Representation of the website is very important, and the first impression is actually the fundament of interest to your activity. We talk about web design a lot, but in most cases out discussions concern the main page. We should widen the borders of our attention.

As for me, the first page after the main one I visit is About Us page. After checking the design I want to find out the details about the company. And I should mention that most websites has it poorly thought out. It seems to me that usually About Us page has the same design all over the web: boring text, address.

The first step is to transform the About Us page into Meet Our Team page. A company is not some abstract existentia, but a group of people, who are working for its success. It’s always so: some component makes something valuable. And to understand the whole we should pay attention to the elements it consists of. So, you should represent the members of your team. But do it creatively and sincerely: write the bio, make links to social profiles and their expert projects. Don’t forget the photos, nevertheless the other ways of person visualization is also good. The last important thing – outline the most unique feature of each individuality.

These are not the axioms, be creative and do everything according the interests of your company. However, you need some fundament. So, for you to imagine your perfect Meet Us page better, let me help you with visualization. Check these 10 examples of the best Meet Out Team pages on the web.

* * *

Amazee Labs

All the things I told you are present here. In addition to that the photos are processed with creative effect.

Meet Our Team Page Examples

* * *


This example is unique, because it represents team member by funny cartoon portraits. I think this original feature fully compensate the absence of bios.

Meet Our Team Page Examples Read More

Free Masonry WordPress Themes. Build Your Seamless Wall of Pictures

If we paraphrase a proverb well-known since childhood, it would sound like this: “Every photographer has his day”. Photographers, designers, blog owners, everyone who needs to present visual content online in a catching, clean way that is extremely convenient for viewing, your day has come! Do you like Pinterest’s image arrangement? Of course you do! And you know what? You can get similar website for your portfolio absolutely free. We are not kidding; this is possible due to free Masonry WordPress Themes gathered in the bottom of this text especially for you.

In case you don’t know exactly what Masonry is, let’s specify the concept. Masonry is a dynamic grid layout plug-in for jQuery created by David DeSandro. The developer himself modestly describes his creation as “the flip-side of CSS floats”. In conventional CSS floats, the objects are lined up horizontally, then vertically. Masonry turns this order over and optimizes the available space in a grid placing elements in optimal position based on the available vertical space. You can’t but agree that this solution is simply brilliant for image-based content websites as it builds a beautiful uniform wall of pictures with a few lines of JavaScript.

Layouts in Masonry style don’t lose their appeal even if the posted images vary in their heights. Masonry uses every pixel of web space to provide an immense gallery representation, where the visitor even doesn’t need to go to the next page to view the whole image collection.

If you surf the web on regular bases, you might have noticed that Masonry layouts are rather popular now. So, if you need a stylish, modern portfolio, you are welcome to choose one of the Free Masonry WordPress Themes below and customize it according to your individual requirements. By the way, most of them are responsive!

* * *


Free Masonry WordPress Themes

* * *


Free Masonry WordPress Themes

* * *

Read More

8 Effective Processing.js Tutorials

Processing.js is a sister project for Processing visual language. Everything you expect to do in Processing can be fully done in Processing.js. What it actually does is allow visualizations, interactive animations, graphs, and even video games written in Processing work in web standards without any additional plugins installed. It converts Processing code to JavaScript and runs it on a page.

Check out these Processing.js tutorials and tips that will expand Processing.js possibilities for you.

Creative Coding with Processing.js for Windows 8 JavaScript applications

The series of 11 parts will give you an in-depth instruction to the main principles and experience of creative coding for JavaScript applications running on Windows 8 using Processing.js.

Processing.js tutorials

* * *

Tutorial: Processing, Javascript, and Data Visualization

A tutorial that will lead you through the process of crafting interactive 3D data visualization using Processing.js

Processing.js tutorials

* * *

Read More

Free HTML5 Business Theme. jQuery Photo Slider & Drop Down Menu Inside

Free HTML5 Business Theme is a fresh goodie presented by skillful guys from TemplateMonster. Download is completely free, and you’re welcome to try this design for a variety of business projects. Though, you can easily customize it according to the needs of any other site you need. Both novice and professional designers can easily work with this well-coded theme.

Theme features:

- jQuery Photo Slider with Caption

- Content Slider

- Drop Down Menu

- Back-to-Top Button

- Social Icons with Hover Effect

Content wise design of this theme is good for presenting business ideas in easy-to-perceive manner. Clean corporate style creates serious tone and speaks for the solidity of the company. jQuery slider allows showcase the featured images with captions where you can place slogans or the key points of the company. The visitors will easily surf around the site due to the thought-out navigation facilitated with drop down menu and back-to-top button. With the contact links in the footer you can welcome your clients to visit your social profiles and subscribe to RSS feed. Free template live demo will show your future site in action.

Free HTML5 Business Theme:

Feel free to get this free website template with PSD source files. To download this theme with PSD files, visit the Free HTML5 Business Theme download page at TemplateMonster and type an email address that you want the free template package to be delivered to (don’t forget to uncheck the newsletter subscription checkbox in case you’re already subscribed, otherwise you may not be able to download the zip file). Feel free to use this template for your business, but you cannot resell it as a template.

Download Free HTML5 Business Theme with PSD files (48,1MB)

IMPORTANT NOTICE:TemplateMonster does not provide support services on free templates – including this one. We only provide support for the products that are being purchased from TemplateMonster. Our free templates are produced according to the latest web standards and we’ve been trying to make the process of working with them as easy as possible, so for people with minimum web development experience it should be easy to work with them. However, if you don’t have any experience, we recommend you to refer to the tutorials or community forums on how to work with platforms that each respective template is made with, or to hire someone to do the job for you.

From PSD to WordPress… How to Convert? (Essential Up-to-Date Tutorials)

Creation of a website from scratch requires much patience, diligence, skills and practical knowledge from its author. As a rule, websites are being born in PSD format, which is the native type of Adobe Photoshop files. Of course, the newborn is primary, flat and motionless. Here comes the next stage of development, when the designers face the issue of engine choice to power their website and bring it to life. Surely, there is a bunch of various platforms available on the net for different purposes. However, our today’s tutorials are focused on how to convert PSD to WordPress. You may ask what our considerations were when we selected the software.

Actually, there were several main points:

  • 1. First of all it’s free. You don’t need to spend a fortune to get a decent website as WordPress is an open source platform.
  • 2. It’s easy to maintain your website even remotely. Due to software’s flexibility, you can easily change background colors, fonts, upload images, post articles, etc. To insert the amendments you don’t need to be a programmer, an intermediate level of expertise will do.
  • 3. There are plenty of free and paid plug-ins, applications and widgets allowing to stretch the functionality and visual appeal of your website to the desired extend.
  • 4. The CMS is extremely SEO friendly. It’s even needless to say how important this feature is for any website or blog.
  • 5. After the process of conversion, your website will look awesome in all popular browsers, as WP provides cross browser compatibility together with W3C validation that ensures swift, trouble-free loading of your website.

Below you will find some useful, stepwise PSD to WordPress tutorials that will help you convert your cool design into a fail-safe working website.

* * *

PSD to WordPress Conversion

PSD to WordPress Tutorials

* * *

Convert PSD to WordPress in 5 Steps: A Definitive Guide

PSD to WordPress Tutorials

* * *

Read More

Animation jQuery Plugins: Just To Make Your Site Alive

There a lot of ways to make content alive. Some rely on talented copywriters, the other depend on the marketing activity. But there is much easier way, which is quite suitable for independent web designers. I mean animation. It can definitely breathe life in the insentient web pages and make visitors to pay attention and stay on your website. Of course, you always should remember the main rule of every activity – don’t overdo it.

Using jQuery multi-browser would totally simplify your path to animated website. You just need to download the ready plugins. And I’m here to make you animating activity even more effortless, because below I gathered the best animation jQuery plugins.

* * *

Lazy Line Painter

Animation jQuery Plugins

* * *


Animation jQuery Plugins Read More

jQuery Plugins with Backbone – Articles List Shedding the Light Onto Sweet Couple

We don’t think that web developers among our readers don’t know what Backbone.js is, so, to be brief, this is the term used to name a JavaScript library running in the browser. It is utilized to structure client-side applications, namely the ones that operate in web browsers.

As to jQuery framework, it definitely simplifies web developers’ lives and is good for a vast number of things that we are not going to enumerate here in order not to bore you. Let us better focus on what jQuery is not capable of, that is, application structuring. The fact can be explained the following way: jQuery doesn’t possess Backbone capabilities because it is the dependency of the latter. Actually, Backbone provides reusable building blocks essential for most of the applications sloppy following Models, Views and Controllers pattern. It should be mentioned that Backbone provides relatively small amount of code, nevertheless, and it’s really important, it gives you a set of conventions about applications structure.

Of course, Backbone shouldn’t be necessarily used with jQuery, lots of developers combine them in order to get access to never-ending flow of jQuery plugins, produced by web community. Below, you will find a list of helpful articles on how to use jQuery plugins with Backbone projects and other useful information on jQuery Backbone plugins. We wish you nice cognitive reading!

* * *

Backbone.js Tutorial: jQuery Plugins and Moving Tasks

jQuery Plugin with Backbone

* * *

jQuery Autocomplete Plugin for Backbone JS

jQuery Plugin with Backbone

* * *

Read More