jQuery Slideshow and Gallery Plugins – Tutorials

There is a collection of some of the cool new jQuery plugins which help you  to create slideshows and photo galleries easily, yet beautifully.

Coin Slider

jqFancyTransitions slice your images in stripes, while Coin Slider slice them in squares. And that’s the main difference. With changing order of appearing those squares I achieve random, swirl, rain and straight effects.

                                    

                                                    Demo  -  Download

 

FlexSlider

Simple, semantic markup, Supported in all major browsers, Horizontal/vertical slide and fade animations, Multiple slider support, Callback API, and more Hardware accelerated touch swipe support, Custom navigation options, Use any html elements in the slides.

                                   Demo -  Download

 

Camera

Camera slideshow is an open source project, based on Diapo slideshow but improved a lot. You can download it and use for free. Camera slideshow (as Diapo) is tested on new browsers. It requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities.

 

                                          

                                          Demo - Download

Nivo Slider

16 unique transition effects  Simple clean & valid markup Loads of settings to tweak Built in directional and control navigation Packed version only weighs 12kb Supports linking images HTML Captions 3 Slick Themes Free to use and abuse under the MIT license.

                                  Demo - Download

Choco

Lightweight, Flexible, Customizable, Released under MIT license, Compatible with Firefox 2 +, IE 6 +, Safari v4, Google Chrome 3 + and Opera 9 +

                                   Demo , Tutorial & Download

Thumbnail Gallery

Thumbnail Gallery is a easy to use JQuery plugin for web developer to build Javascript gallery on their web application. The gallery can be driven by xml. Easy setup and only minimum programming knowledge is needed. Best to showcase your photography portfolio.

                                   Demo - Download

 

CoverScroll jQuery plugin

This is a CSS3 variant of the Apple’s CoverFlow design pattern .

                                              Demo & Tutorial

bxSlider

Horizontal, vertical, and fade transitions, Display and move multiple slides at once (carousel), Prev / next, pager, auto controls, Easing transitions, Random start, Ticker mode, Before, after, first, last, next, prev callback functions, Optional styling included, Tons of options

 

                                          

Demo Examples – Tutorial & Download

 

Wow slider

WOW Slider is a jQuery image slider with stunning visual effects (Blur, Flip, Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns, Stack, Stack vertical and Basic linear) and tons of professionally made templates. It is packed with a point-and-click wizard to create sliders in a matter of seconds without coding and image editing.

Demo – Download

 

hash Slider

easy to implement, full styleable via css, mouse wheel integration, direct links to slider postion via hash tag automatic generated number navigation, content could be everything free for everyone, only 2,2kb in size.

Demo – Tutorial & Download

 

Anything Slider

Each panel has a hashtag (can link directly to specific panels). Optional custom function for formatting navigation text. Auto-playing slideshow (optional feature, can start playing or stopped) Pauses playing YouTube videos when not in view and resumes them when in view (only in non-IE browsers & if files are hosted on the web). Pauses slideshow on hover (optional). Optionally play the slideshow once through, stopping on the last page.

Demo – Download

 

Orbit

Orbit will dynamically determine the height and width of your set of images and scale accordingly, but make sure all your images are the same size or the larger images will peek out on the sides.

Demo & Tutorial

 

jQuery Cycle

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Easing Plugin.

 

Demo & Download

 

SlidesJS

SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

Demo – Download

 

EasyRotator – jQuery Slider / Rotator Builder

This is something different. This is not exactly a jQuery plugin but a jQuery maker. You can create as many jQuery based slideshows as you like. Available as a Dreamweaver extension, standalone application and WordPress plugin, it lets you select photos, choose a layout, make customizations, then have all necessary code automatically added to your page.

Examples & Download

 

 

 

 

 

Read more »

Letter Cards Text Effect using CSS3

How to create a superb letter cards effect without creating any image at all. All will be done using pure CSS3.

Read more »

9 Free SEO WordPress Plugins

All the titles and descriptions are from the creator’s website. The titles are linked to the sources, for details or download, please visit the source.

1- ALL IN ONE SEO PACK

Automatically optimizes your WordPress blog for Search Engines (Search Engine Optimization).

2- Super Tags 

The Super Tags plugin, is a customizable alternative to the default WordPress® Tag Cloud widget. This widget makes it possible for you to fully customize a Tag Cloud ( or multiple Tag Clouds ) to meet your specific needs.

3- Platinum SEO Pack

Platinum SEO Plugin offers Complete onsite SEO solution for your WordPress blog. 

 

4- Google (XML) Sitemaps Generator 

This plugin generates a XML-Sitemap compliant sitemap of your WordPress blog. This format is supported by Ask.com, Google, YAHOO and MSN Search.

5-SEO Ultimate

This all-in-one SEO plugin gives you control over title tags, noindex, meta tags, slugs, canonical, autolinks, 404 errors, rich snippets, and more.

6-Greg’s High Performance SEO

Configures over 100 separate on-page SEO characteristics. Loads under 700 lines of code per page view. No junk: just high performance SEO at its best.

7-SEO Tools by SEO-Automatic

These are five of the tools for member use at SEO Automatic, and they’re now available for use on your own site too.

8-Scribe SEO

Scribe is a SEO software service for WordPress – think of it as a content optimization assistant that analyzes web pages, blog posts and online press releases with a click of a button.

9-SEO Data Transporter

This plugin allows you to transfer your inputs SEO data from one theme/plugin to another.

Read more »

CSS Layouts: 40+ Tutorials, Tips, and Best Practices

CSS Layout Tutorials

1-Three column fixed layout structure using CSS- This post explains how to realize an HTML/CSS basic structure to design a simple three column fixed page layout with standard elements (logo top bar, navigation bar, text stage, center column for post categories and right column to insert Google AdSense 120X600 ads), to use in your projects.

2-Design page layout using CSS- How to design page’s layout for your site using a css file.

 

3-How To Create a Horizontally Scrolling Site-  Different techniques for creating horizontally scrolling layouts.

4-Super Simple Two Column Layout- Different techniques for creating horizontally scrolling layouts.

5-Simple 2 column CSS layout- This is a tutorial on how to use CSS to create a simple two column layout. The layout consists of a header, a horizontal navigation bar, a main content column, a sidebar, and a footer. It is also horizontally centered in the browser window. 

6-The holy grail layout – 3 columns and a lot less problems - This is a article discuss the three columns – two fixed-width sidebars and a fluid center column, all while keeping the markup clean and semantic, and most importantly well structured.

7-CSS Centering 101- How to center a fixed-width layout using CSS

<body>
  <div id="container">
    ...entire layout goes here...
  </div>
</body>

Using CSS, the following two rules force whatever is contained within #container to be centered:

body {
  text-align: center;
  }
#container {
  margin: 0 auto;
  width: xxxpx;
  text-align: left;
  } 

8-Creating a CSS layout from scratch- This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout.

9-Multi-Column Layouts Climb Out of the Box-  Multiple columns, equal column heights, fixed or liquid center column, clean markup, and CSS.

10-In search of the One True Layout- Total Layout Flexibility, Equal Height Columns, Vertical placement of 
elements across grids/columns. This article shows how to achieve each of  these goals, and then how to combine them, creating what could be 

called the One True Layout.

11-From PSD to HTML, Building a Set of Website Designs Step by Step- The entire process of getting from Photoshop to completed HTML. 

12-5 Tips for coding xhtml/css layouts- These are few tips that could help you out in the transition from 
table-based web design to standards compliant css based layouts. 

13-Designing a CSS based template- This is the start of a step-by-step based tutorial about how to create a
 CSS based template page. This will be a tutorial consisting of several 
parts: part 1 covers the creation of the navigation buttons in Photoshop
 CS*, the 2nd part will be the creation of the background, next on the list is the header and layout of the page and the final part will be the implementation in CSS and XHTML.

14-Breaking Out of the Box With CSS Layouts- If you understand how the grid works, you can fracture or abstract that 
grid to make your layout more dynamic and interesting. In achieving this
 goal (while supporting flexibility and maintainability), CSS designs 
have so much more to offer than table-based layouts. Jina Bolton 
explains how to acheive this goal.

15-Advanced CSS Layouts: Step by Step-  The ultimate goal of this tutorial is to create a CSS layout that 
exactly resembles the WebReference.com layout made with tables and also 
behaves well with small window sizes and large fonts.

16-6 Keys to Understanding Modern CSS-based Layouts-  

These are the six things that will help people understand CSS-based 
layouts: Box Model, Floated Columns, Sizing Using Ems, Image 
Replacement, Floated Navigation and Sprites. 

17-Are you making these common blog layout mistakes?-

Discussing 4 mistakes in basic blog layout are all too common and all too easy to fix.

18-Page Layout- 

A practical guide for positioing and floating elements in a CSS page layout.

19-Site in an Hour- Making Simple Work of Complex CSS Layouts 

20-Sample CSS Page Layouts- Here are a range of CSS page layouts, including 2 column and 3 column layouts.

21-The Perfect 3 Column Liquid Layout (Percentage widths)- No CSS hacks. SEO friendly. No Images. No JavaScript. Cross-browser & iPhone compatible. 

22-CSS TEMPLATES AND SAMPLES

23-IM Layouts- IM Layouts is a simple CSS layout system. IM Layouts offer full Grade-A browser support. 

24-CSSplay - CSS Layout Listing.

25-Layoutgala -
 Getting the maximum number of layouts based on the same markup, each 
with valid CSS and HTML, without hacks nor workaround and a good 
cross-browser compatibility. The result is a set of 40 layouts.  

26-Glish- Many useful cross-browser CSS layout techniques.

27-Thenoodleincident- CSS Boxes going from a simple single box, through 3 columns with a full width top box, all with variations. 

28-The Layout Reservoir- Many useful CSS layout techniques.

29-The only CSS layout you need- In this article you are presented to ten different layouts with example pages, all based on the same HTML. 

30-Yet Another Multicolumn Layout- is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

• Download YAML here. 

31-Liquid Designs- Liquid Designs is a gallery of websites designed with liquid layouts using XHTML and CSS

32-Helldesign

33-Silverbackapp

34-OS communications informatiques 

35-Rockatee

36-Darrenhoyt 

37-Makebetterwebsites

38-Elitetheme 

 39-Studio7designs 

40-Brightcreative 

Read more »