So, what are web galleries?

What are Web Galleries?

Website gallery (or web gallery)- a web based gallery.

Whyzz defines gallery as:

Galleries are often small spaces, and they’re generally private—meaning that they’re owned by one person or a small group of people. They often show the work of one artist, or a small group of artists or works based on a particular theme.

Image by: Glen Converse

With this definition in mind, we can say web galleries are gallery-like or platforms that showcase the works of designers . These are websites created for the purpose of inspiring others. They’re especially great for beginners, and allow the original designers a chance to gain more exposure and show what they can do to the rest of the world.

Why Visit Web Galleries?

There are two main reasons why designers, and particularily beginners, should visit web galleries: to be inspired by others’ works and be motivated.

Image by: photosteve101

In any kind of field, especially in web design, it is important to be inspired by others’ works. This way, you have a role model, or a specific designer that really fires up your creative juices, that you can always turn to when you feel down, or when you lack motivation.

I have interviewed people who I find successful in the field they have chosen to work in and asked them questions regarding inspiration and web galleries. Take time to read and get inspired by their answers.

Questions:

1. As a blogger/designer/developer, who/what inspired you the most?
2. Why do you think we need an inspiration?
3. Do you visit other blogs? How often?

Rean said:

[1]“I’m a fan of theprofessionalheckler, and I can honestly say that I never really dreamt of becoming a full-time blogger, I only wanted to try it and see if it will work for me. Good thing is, I have really love writing ever since I was young and after seeing how blogging works and how wide the audience is I got hooked into it and I’m loving it.”

[2]“An inspiration may point towards a person or a dream, or both. Having someone to look up to makes you think “Wow, I want to be like him/her someday” or “I want to be better,” things like this will give you the energy to move forward. Some may go to the extremes of saying having a role model is their Raison d’Etre (reason for existence) but don’t laugh, in order to live people need something to look forward to, otherwise it’s a lonely world. Without an object of inspiration, people will become aimless, with an object of inspiration people are guided. Inspiration plus a touch of madness results in a dream come true.”

[3]“Yes, while drinking my coffee I read my favorite blogs. How often, you ask? 5 times a day, give or take a few.”

Rassel said:

[1]“Those people that I find are better than I am. I don’t want to be second best, I want to be the very best! You may find that very childish, but for me this is my way of motivating myself and putting in the effort and the work to be even better than the best.”

[2]“For when we are inspired, we always do things in an extraordinary way. We always reach for excellence in everything we do. Without inspiration, those things are not possible. And for me, inspiration is proportional to passion. If you have passion in what you do, I’m sure inspiration will also come through.”

[3]“Yes, whenever I lack ideas regarding my projects. I often visit Pattern Tap.”

Bench said:

[1]“My inspiration is my future. I always do my best so that I can meet my goals in life, and that is to be a successful designer.”

[2]“I believe that inspiration gives you brighter design. It calms your mind and makes your design acceptable.”

[3]“Yes, whenever I design I make it a point to visit web galleries. This helps me to come up with different ideas.”

Jerico said:

[1]“My fellow designers inspire me the most. When I see how beautiful their designs are, I get inspired to make my designs better than theirs.”

[2]“Of course if you are inspired, you tend to make a better design than the one that inspired you.”

[3]“Very often. These serve as my references for new layouts and designs. It’s useful to know what the new design trends are.

Joggerwalk said:

[1]“I don’t have a specific person, but I have some friends and classmates who inspire me with their works.”

[2]“We really need inspiration because it triggers us to do the things we like. It also influences us to come up with a unique idea or concept based on the things around us. Also, inspiration helps me fight laziness. Haha!”

[3]“Yes, when I have time.”

Stephanie said:

[1]“I am easily inspired by designs that I see as beautiful, amazing and full of emotion. It gives me the drive that if someone can do it, I can do at least as good if not better.”

[2]“We need inspiration to do what we want and to deeply express ourselves. It is something that motivates or pushes me to give my best.”

[3]“Yes, when I think that I need to get some ideas or inspiration I visit web galleries.”

Luigi said:

[1]“My inspiration is my dreams. I get inspired to be the best in everything I do to reach my dreams. And my dream is to be successful in the field I chose.”

[2]“For me, inspiration is important. This is where I get my ideas to do my job.”

[3]“Of course. During my free time, I make it a point to visit web galleries. You can learn techniques that you can use on your projects.”

With all of their answers, we can conclude that inspiration is an important factor that affects a persons work and one source of inspiration we can consider is web galleries.

Motivation is also important in any work. This keeps you moving towards reaching your goals. To be motivated, you need to have your inspiration, in any kind of work, motivation is necessary to do your best and enjoy what you do.

To keep up with the latest trends on web design.

It is important to know what’s going on around you. For designers it’s important to know what the latest trends are in web design. Why? The answer is very simple, so that they won’t be left behind. We all know that viewers want to see and experience the newest or the latest design trends.

Image by: Web Interactive Films

People always want the most current technology whether in gadgets, software, or the web design they see, or the website they hire someone to design. With web galleries, designers can stay current and see new technologies in use, and see the trends in design.

How to get the most from Web Galleries:

To better appreciate web galleries,and what you can learn from them, here are some ways that I believe they can be useful:

When you feel your design is ‘missing’ something or if you’re stuck for ideas.

Write down what parts of your design need work then when you look through the web galleries you can ask these questions:

• What element(s) don’t look good or work with my design?
• What part of the design am I having a difficulty with?

Image by: Martin Bright

Take note of your answers, for these will be the basis on what type of web gallery you need.

Try and define the type of web gallery you want to find.

After writing down where you are having issues of difficulty, try and search for a web gallery that is relevant to your problem. There are web galleries that focus on CSS, WordPress, typography, etc.

There are many galleries there that focus on a certain niche. Say if you are searching for inspiration for a Flash website, search for a web gallery that showcases great Flash websites.

To help you in searching, I will be listing some of the best web galleries that you may find useful at the end of this article.

Search, then take note on what you liked the most.

Searching is kind of like shopping. When searching, take at least 10–15 minutes of your time finding sites thatmay provide you the inspiration you need. Spend one minute or less on each and when you find one that inspires you, bookmark it so you can come back to it whenever you need.

Image by: Lukas Kummer

Visits web galleries you like on a regular basis

When you visit these sites regularly, you can stay current with new trends and learn techniques being used by others in your field.

Benefits of visiting Web Galleries

What are the benefits of visiting these web galleries?

• Designers can keep up with the latest trends in web design.
• It can be inspiring and help motivate designers to do better.
• It can help designers get out of a rut if they’re feeling frustrated by a design or at a loss for ideas.

And here are some of the great web galleries you can find on the net. Make sure to bookmark those that tickled your taste!

The Best Designs

The Best Designs showcases the best Flash and CSS websites grouped into different categories.

We Love WP

We Love WP, a web gallery that showcases WordPress powered websites.

Make Better Websites

Make Better Websites supports several designers by featuring their designs on the site. The nice thing about this site is you can filter your search with the tags and colors provided on the right panel.

Design Shack

Design Shack lists inspiring web designs, resources and tutorials to help designers.

Minimal Sites

Minimal Sites is a gallery dedicated to, what else, minimalism in web design. Designs are categorized to give comfort and faster searching on users.

DrupalSites.net

DrupalSites.net showcases websites that use the open source CMS, Drupal. The purpose of this site is to present the flexibility and advantages Drupal has to offer.

Design Flavr

Designflavr describes their site as: “A Design and Visual Art Gallery.” They aim to share the best design content they can.

Pattern Tap

Pattern Tap aims to give inspiration to designers regarding the best interface designs on the web.

Design Snack

A gallery that showcases CSS/XHTML and Flash designs as well as the designers.

Creattica

A gallery that compiles great designs and imagery where users can vote on each submitted work.

Styleboost

Styleboost has been showcasing beautiful websites created by several designers and developers for more than nine years from now. The good thing about this site is it gives an introduction to the different kinds of websites they present.

Nice Stylesheet

Nice Stylesheet gives a collection of website designs that make use of CSS and web standards.

Web Creme

Web creme features CSS web designs that can be filtered depending on your choice of color or month.

Design Bombs

A portal for all web designers and developers that aims to make it fun searching for the hottest sites on the web.

CartFrenzy

CartFrenzy gives you the best designed e-commerce and online shopping websites.

Best Web Gallery

Best Web Gallery is an inspiration site for designers with a wide range of websites that use Flash and CSS. They say that a quality design is:

Quality Design = Visual + Technical + Creativity

Best of Joomla

This is a community website that also contains a gallery of websites that use Joomla. The search can be filtered into your choice of color, topic, country etc.

Blog Design Heroes

Blog Design Heroes showcases well-designed blogs on the web that are grouped into categories according to platform.

Buzz CMS

A website gallery of several websites that use different CMS’ such as Joomla, Drupal, WordPress and the like.

TypeInspire

TypeInspire features typography created by many graphic and web designers. It aims to provide you with excellent typographic works for inspiration.

That’s it! I hope this article gave you some ideas on where to find inspiration and hopefully next time you’re needing some inspiration, or you need a new idea, you’ll check out some of these web galleries.

Your Thoughts

We know that we just touched on some of the ways and places you can find inspiration. We’d love to hear your thoughts, so if you feel so inclined, tell us:

• Who or what inspired you the most?
• How often do you visit web galleries? Which galleries do you like the most and why? Please include a link so maybe we can include them in a future article.

Let’s take a look at what we will be building, here is the final result :

View The Demo, you can also download the final result by clicking here (*.zip archive).

Step 1: Preparing The Files

Let’s start by creating our needed files :

• Index.html
• style.css ( this file will contain all the styles we need )
• script.js ( this one will contain our scripts )

In this tutorial I used some nature photos, but you can select your own:

• The Lookout By Chris Gin
• Leeds Castle Grounds By Joel Antunes
• Driftwood By Macindows
• Sunny Highlands By sopex
• Grassy Sunset By mattyv8

Here is also the texture I used in this tutorial. Now create a new folder, name it ” images ” then put in your choosed photos.

Step 2: The html file structure

First of all we have to link to our css, javascript files and both of jQuery and jQuery ui, to do this simply paste this code in your head section:

<script type="text/<span class="><!--mce:0--></script>
<script type="text/<span class="><!--mce:1--></script>
<script type="text/<span class="><!--mce:2--></script>
<link rel="stylesheet" type="text/css" href="style.css" />

Now we need to show our images. To do this, add the code above into the body section of your html file :

<img src="images/1.jpg" alt="" />
<img src="images/2.jpg" alt="" />
<img src="images/3.jpg" alt="" />
<img src="images/4.jpg" alt="" />
<img src="images/5.jpg" alt="" />

Step 3: Adding some styles !

Now we have our html file ready, we need to add some styles to the body section and to our images:

body
{
    background: url(texture.jpg);
}
img
{
    padding: 10px 10px 50px 10px;
    background: #eee;
    border: 1px solid #fff;
    box-shadow: 0px 2px 15px #333;
    -moz-box-shadow: 0px 2px 15px #333;
    -webkit-box-shadow: 0px 2px 15px #333;
    position: relative;
    margin:25px 0 0 15px;
}

Explanation:

Here I added a background image. For each image I set it’s background to a light grey and used some paddings to give the traditional Polaroid shape. Also I have used some CSS3 techniques to give each image a simple shadow. Next I used some margins to make some space between the images.

Step 4: Time for some scripts

Now we have our images set up, we need to have some scripts to have a working polaroid.

First add this to your script.js file:

$(document).ready(function(){
 var zindex = 1;
 $("img").draggable({
  start: function(event, ui) {
   zindex++;
   var cssObj = { 'z-index' : zindex };
   $(this).css(cssObj);
  }
 });
});

I defined a variable with a name of zindex and assigned to it 1 as a value. Then I used the jQuery ui features to make each image draggable. When an image is dragged the zindex value will increase by 1 then I used $(this).css to change the z-index value of the dragged image.

Let’s continue, ad this to the previous code :

$('img').each(function(){
  var rot = Math.random()*30-15+'deg';
  var left = Math.random()*50+'px';
  var top = Math.random()*150+'px';
  $(this).css('-webkit-transform' , 'rotate('+rot+')');
  $(this).css('-moz-transform' , 'rotate('+rot+')');
  $(this).css('top' , left);
  $(this).css('left' , top);
 $(this).mouseup(function(){
 zindex++;
 $(this).css('z-index' , zindex);
 });
});
$('img').dblclick(function(){
  $(this).css('-webkit-transform' , 'rotate(0)');
  $(this).css('-moz-transform' , 'rotate(0)');
});

Here I used the .each() technique, so for each image three variables are created : the rotation degrees, the top position and the left position. For each variable you have to use some math : math.random returns a value between 0 and 1 so we have to control the other values to get the numbers we need. Per example the first variable will always return a value between 15 and -15 degrees. For the left and top position I used the same formulas but I have changed the other values. After preparing the variables we have to use them. To do this we are going to use the same method we have used in the previous code ( this.css) then change the rotation degrees, the top position and the left position of each image so we can get a random appearance.

After all this I used the .mouseup method so when an image is clicked it will be showed up in the front. Also you can add something useful : when the button is double clicked we are going to adjust it with rotate(0).

Now all our script file should look like this :

$(document).ready(function(){
 var zindex = 1;
 $("img").draggable({
  start: function(event, ui) {
   zindex++;
   var cssObj = { 'z-index' : zindex };
   $(this).css(cssObj);
  }
 });
$('img').each(function(){
 var rot = Math.random()*30-15+'deg';
 var left = Math.random()*50+'px';
 var top = Math.random()*150+'px';
 $(this).css('-webkit-transform' , 'rotate('+rot+')');
 $(this).css('-moz-transform' , 'rotate('+rot+')');
$(this).css('top' , left);
 $(this).css('left' , top);
 $(this).mouseup(function(){
 zindex++;
 $(this).css('z-index' , zindex);
 });
});
$('img').dblclick(function(){
 $(this).css('-webkit-transform' , 'rotate(0)');
 $(this).css('-moz-transform' , 'rotate(0)');
});
});

That’s it !

Thanks for following this tutorial. I hope you liked it and could follow it step by step. If you’ve done everything correctly, you should have ended up with something like this. If you have any problem or you need some help feel free to write your question or request into the comments section.

Want more?

Check also Creating a polaroid photo viewer with CSS3 and jQuery much more advanced  tutorial done by Marco Kuiper!

Here you will find easy to customize and modern image galleries you can use for your own projects, portfolios and possibilities are endless here! You just need to put them in good use!

jQuery Most for these image galleries you’ll need to use latest JQuery. You can download it here.

1. Full screen image gallery using JQuery and Flickr

Full browser – screened image gallery. Easy and understandable. Features:

• Flickr search using jQuery and JSON
• Full screen with kept ratio using CSS only
• A png raster to even out up-scaled jpegs
• Thumbnails with loader indicator and a nice hover effect that shows a bigger thumb (or description)
• A preloader loads the large images one by one for super-fast viewing
• Fetches the biggest image from flickr using their API
• Caption that can be turned on or off
• Navigate by clicking on either half of the image, or use the thumbnails.

View Demo

2. Supresized image gallery

Features:

• Resizes images to fill browser while maintaining image dimension ratio
• Cycles Images/backgrounds via slideshow with transitions and preloading
• Navigation controls allow for pause/play and forward/back

View Demo | Download Now

3. s3Slider jQuery plugin

This one is handy to put in portfolio header of index page. Self-image changing.

View Demo | Download Now

4. Nivo Slider

Features:

• 9 unique transition effects
• Simple clean & valid markup
• Loads of settings to tweak
• Built in directional and control navigation
• Packed version only weighs 7kb
• Supports linking images
• Keyboard Navigation
• Free to use and abuse under the MIT license

View Demo | Download Now

5. jQueryGlobe – jQuery Plugin

Features:

• Slick effect, no Flash needed
• It’s just 2K
• Reusable on multiple containers
• Cycles items via slideshow
• Can be styled with custom HTML/CSS

View Demo | Download Now

6. jQuery LightBox Plugin 0.5

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.  

View Demo | Download Now

7. jqFancyTransitions

jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects. 

View Demo | Download Now

8. Galleriffic

Features:

• Smart image preloading after the page is loaded
• Thumbnail navigation (with pagination)
• jQuery.history plugin integration to support bookmark-friendly URLs per-image
• Slideshow (with optional auto-updating url bookmarks)
• Keyboard navigation
• Events that allow for adding your own custom transition effects
• API for controlling the gallery with custom controls
• Support for image captions
• Flexible configuration
• Graceful degradation when javascript is not available
• Support for multiple galleries per page

View Demo | View JavaScript File

9. jQuery Image Scroller

View Demo | Download Now

10. Image Rotator

Image rotator is great way to display portfolio images, eCommerce product images, or even as an image gallery.  

View Demo

11. Simple Image Slide Show

Image Slide Show is one of the famous components in web design and development. A lot of the websites display news headlines in an image slide show to attract viewers attention, of course, with caption/excerpt. No doubt about it, this is a clever method not only to gain attentions, but it also makes the website more alive.

View Demo | Download Now

12. Apple style image slider

View Demo | View Source

13. Easy slider 1.7

For this one it’s easy to set up your own options to image gallery.

Demos: Here, here and here | Download Now

14. Circular Image Gallery

View Demo | Download Now

15. jQuery Image Strip

16. Coin Slider

Features:

• Unique transition effects
• Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
• Valid markup
• Flexible configuration
• Auto slide
• Navigation box
• Lightweight (8kb only)
• Linking images
• Free to use under MIT licence
• Fully customizable using CSS

View Demo | Download Now

17. Photo Gallery

View Demo | View Source

18. AJAX Image Gallery powered by Slideflow

The photos and titles are read from an XML file, and the thumbnails are pre-generated using Photoshop actions.

View Demo | Download Now

19. slideViewer 1.2

SlideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing

just few lines of HTML. SlideViewer checks for the number of images within your list, and dinamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide to the next picture.

View Demo | View JavaScript File

20. jQuery Before /After Plugin

Features:

• Slick effect, no Flash needed
• It’s just 7K (4K compressed)
• Reusable on multiple containers
• Degradable. If the visitor doesn’t have JavaScript they will still see both images.

View Demo | Download Now

21. Slick Auto-Playing Featured Content Slider

There is a main content area, which slide from left to right each with different unique content. There is generally a set number of panels, but the code is written in such a way that adding or removing panels isn’t a huge pain. There are links which act as navigation to quickly jump to any particular panel.

View Demo | Download Now

22. AnythingSlider

Features:

• Slides are HTML Content (can be anything)
• Next Slide / Previous Slide Arrows
• Navigation tabs are built and added dynamically (any number of slides)
• Optional custom function for formatting navigation text
• Auto-playing (optional feature, can start playing or stopped)
• Each slide has a hashtag (can link directly to specific slides)
• Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide)
• Multiple sliders allowable per-page (hashtags only work on first)
• Pauses autoPlay on hover (option)
• Link to specific slides from static text links

View Demo | Download Now

Flash

23. CU3ER The Free Flash 3D Image Slider

CU3ER, in a nutshell, is a .swf (flash) file, designed & developed for displaying images & slides in 3D way. It requires an XML configuration file in which the paths to the existing images and instructions (settings), necessary for handling those, are defined. This image slider is equipped with a great range of features that enhance the user’s experience of viewing slides. They can be grouped together lining User Interface and 3D Transitions.

View Demo | Download

24. The Piecemaker XML Gallery

The Piecemaker, a 3D Flash image rotator gallery in the purest sense of the word. It’s Open Source, so feel free to download it, use it in any project you like, learn from it, modify it and improve it if you can.  

View Demo | Download Now

25. SimpleViewer

SimpleViewer is a free, customizable Flash image gallery. It allows you to display your images on any web page in a professional, intuitive and simple way.

View Demo | Download Now

26. Flash Page Flip Photo Gallery template for Picasa

This gallery is made just like real album in your hands! Isn’t that so exciting? This template is based on the free version of the FlashPageFlip flash engine on www.flashpageflip.com. It lacks the advanced functions of the commercial versions but still makes a very nice photo album on your website. You can see and hear the pages flip.  

View Demo

27. Polaroid Gallery

Polaroid Gallery is a free, opensource flash gallery.  

View Demo | Download Gallery Now | Download Flash File Now

28. TiltViewer

TiltViewer is a free, customizable 3D Flash image viewing application.  

View Demo | Download Now

29. Flash Photo Gallery

The Flash version of AgileGallery is a free Flash photo gallery that rips through the XML output from Picasa (a free download from google) and generates the paging and thumbnails and displays the full sized photos along with any description entered in Picasa. It also includes a slideshow feature.

View Demo | Download Now

CSS

30. Cross Browser Multi-Page Photograph Gallery

This one is using CSS only – that means that there is no JavaScript. Based on the look of Suckerfish HoverLightbox, this one uses my multi-page layout system but includes images instead of text.

View Demo | Download Now

It was commercial theme I tested, but since most of people look just for free stuff, I gave it a try and searched for free Portfolio, photo gallery type themes. Enjoy, by the way I also put like 3-4 best portfolio premium themes I found, I hope you wont mind, they are just beautiful alternatives and for very cheap prize!

1. Photocrati WordPress “Supertheme”

Photocrati is a powerful WordPress theme for photographers that comes with 60 built-in styles plus an options panel that allows customization of most elements on the site. It comes with a fully featured gallery management system – and it’s the only photography theme with built-in ecommerce for selling images and prints. One of the premium themes I tested – with huge built-in power.

1.1. PhotoSquares2 Photography WordPress Theme

PhotoSquares is very flexible premium gallery WordPress theme that is perfect way for designers and photographers to display their portfolio.

This theme allows you to set your own thumbnail sizes so everyone will be able to create most suitable layout.

Download PhotoSquares portfolio theme here.

2. WordPress The Unstandard

View Demo

3. Gallery 1.2

Gallery is a beautiful, free, gallery-style Thematic child theme for WordPress, designed by Christopher Wallace especially for Smashing Magazine and its readers. It is extremely flexible and can be used as a starting point for design galleries and portfolios.

View Demo

4. wpFolio – Free CMS / Portfolio WordPress Theme

View Demo

5. Blue Bubble

View Demo

6. Creative by Nature

View Demo

6.1. Gridlocked: Minimalistic WordPress Portfolio Theme ($40)

I really enjoyed this theme because of it’s clean looks and in the same time powerful features built in. Beautiful theme you can easily customize.

Gridlocked is a grid-based, post-format supporting, layout-shuffling, minimalistic theme for creatives. It is both a classic portfolio for showcasing your work and a modern tumblr-style blogging system.

A truly versatile theme, Gridlocked can be configured to focus on your work, your blogging, or both. Support for post formats means you can jazz up your blog with your own self-hosted video, audio, images, galleries, asides, links, quotes and of course good old standard posts.

View Live Demo

7. Linquist

View Demo

8. Work-a-holic

Work-a-holic is a free minimalistic two and three column WordPress theme that focuses mainly on showcasing portfolios for artists, web designers, photographers and illustrators. Work-a-holic separates your portfolio from your blog, enabling easy navigation for clients in a clean, intuitive fashion. It also has a separate sidebar for portfolio (shows recent projects) and a separate widgetized sidebar for the blog and pages.

9. Fotofolio WordPress Theme

View Demo

10. Portfolio WordPress Theme

“Portfolio WordPress Theme” is a wordpress theme designed for web portfolios and (for now) just for web portfolios. It is coming with an Administrative Panel from where you can edit the head quote text, you can edit all theme colors, font families, font sizes and you can fill a curriculum vitae and display it into a special page.

View Demo

11. Irresistable

Use as a standard blog or use the customized homepage layout, as shown in our demo, that you can activate via our options panel

View Demo

12. Sharpfolio: WordPress Portfolio Theme

Sharpfolio is a WordPress theme designed to enable Web Designers, Graphic Designers, Photographers, Motion Designers, Artists or any creative professional to showcase their work in a simple, clean, beautiful portfolio. Sharpfolio aims to focus primarily on your work, because after all, this is what’s most important.

View Demo

13. Portfolio Press

This is a dark-colored theme suitable for anyone who wants to create a quick portfolio or wants to showcase his work through WordPress. The theme is fully CSS/XHTML validated, WordPress 2.6+ ready and comes with easy to modify code.

View Demo

13.1. Garnish: Clean-Cut WordPress Portfolio Theme ($35)

Garnish is a clean-cut, straight to the point, simple to use portfolio theme. The uncluttered, one-page, ajax-powered portfolio is perfect for placing your most important work directly in front of your potential clients.

If you have ever used a “coming soon” page in place of your portfolio on account of being too busy, Garnish is for you. It’s simple, convenient and to the point. If you’re the modifying type, it’s a pretty decent blank canvas too!

Support for post formats means you can jazz up your blog with your own self-hosted video, audio, images, galleries, asides, links, quotes and of course good old standard posts.

View Live Demo

14. Desk Space

View Demo

15. Snapshot

View Demo

16. WP Coda

View Demo

17. Infinity

View Demo

18. AutoFocus

AutoFocus is a WordPress theme specifically for photographers looking for a simple and elegant way to display their work online.

View Demo

19. FotoLog

View Demo

20. Free Photo Gallery

View Demo

21. Grace Photoblog

View Demo

22. Vivee WordPress Theme

View Demo

23. Nishita – Free Photo Blog WordPress Theme

View Demo

23.1. Autochrome

New, just released theme from the same creators of Nishita. New theme really looks much crisper and cleaner – beautiful theme for photographers! Enjoy!

24. Fhi-Zin

View Demo

25. ViewPort

Viewport, a free WordPress theme created by Paul Bennett is focused around a clean and simple, content based layout. The aim is to grab the user’s attention and draw them straight into the content.

View Demo

To make it even easier for you to choose, I also added live demo link under every jQuery plugin! However if you are searching for even more alternatives with Flash, plain CSS or another Javascript library, check out this post -57+ Free Image Gallery, Slideshow And Lightbox Solutions.

1. PhotoSquare Photography WordPress Theme ($79)

PhotoSquares is very flexible premium gallery WordPress theme that is perfect way for designers and photographers to display their portfolio.

This theme allows you to set your own thumbnail sizes so everyone will be able to create most suitable layout.

2. GalleryView: A jQuery Content Gallery Plugin

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

View Demo

2.1. Sexy Slider

SexySlider is a JQuery plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!

View Demo

3. Sliding Image Gallery jQuery Plug-in

The SlidingGallery plug-in will take a group of images and turn them into a cyclical gallery of images which the user can click through. One image will be centered on the screen, with two smaller images off to the sides. The user can click either of the smaller images to bring them to the center, or the center image to enlarge it. For optimal use, this plug-in should be applied to seven or more images, but can work with fewer (images will be duplicated in order to bring the total to seven).

View Demo

4. PrettyPhoto jQuery Lightbox Clone

PrettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.

View Demo

5. Create Beautiful jQuery slider tutorial

This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.

View Demo

6. AD Gallery – a jQuery gallery plugin

A highly customizable gallery/showcase plugin for jQuery.

View Demo

7. FancyBox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

View Demo

8. Shadowbox

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

View Demo

8.1.AviaSlider – jQuery Slideshow

AviaSlider is a very flexible and easy to use Image slideshow plugin for jQuery with a set of really unique transitions that were nver available before, as well as some basic transitions, so the slider will fit into every project.
It comes with an image preloader so the slider starts when images are ready to be shown. No clumsy animations with half loaded images.

View Demo

9. Galleriffic

Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains.

View Demo

10. Colorbox

A light-weight, customizable lightbox plugin for jQuery 1.3.

View Demo

11. The Lightbox Clones Matrix

Comparison of various scripts that display images and other objects in somehow cool CSS popups

12. Full screen image gallery using jQuery and Flickr

It’s a full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. It also supports a flickr search engine, thumbnails, captions, preloader and some other goodies.

View Demo

13. Moving Boxes

View Demo

13.1. DDSlider – 10 Transitions – Inline Content Support

DDSlider introduces a new easy-to-go slider with 9 different unique transitions (+fading & random—11 total) that support Inline Content. You can also have multiple sliders in the same page.

View Demo

14. Creating a Slick Auto-Playing Featured Content Slider

View Demo

15. Start/Stop Slider

View Demo

16. SlideViewerPro 1.0

SlideViewerPro is a fully customizable jQuery image gallery engine wich allows to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts.

View Demo

17. Pirobox V.1.2.1

View Demo

18. s3Slider jQuery plugin

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script.

View Demo

18.1. Advanced Slider – jQuery XML slider

Advanced Slider is a jQuery plugin that allows you to easily create powerfull sliders using either XML , thus making the slider much easier to setup and maintain, or using HTML markup. The plugin also provides an easy to use API which will allow to further enhance the functionality of the slider and make it possible to integrate it into your own application. Please take a look at the list of features below.

View Demo

19. CSS and Jquery – Creating an Image Slider

View Demo

20. Create an Image Rotator with Description (CSS/jQuery)

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.

View Demo

21. jQuery spherical panorama viewer

A javascript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology.

View Demo

22. Zoomimage – jQuery plugin

Present you images in stylish way. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border.

View Demo

23. Building a jQuery Image Scroller

View Demo

24. Easy Slider 1.5 – The Easiest jQuery Plugin For Sliding Images and Content

View Demo

25. jQuery Panel Gallery Plugin

• No slicing or editing of the images is needed
• It’s just 5K
• Easily configurable
• Reusable on multiple containers

View Demo

25.1. uBillboard – Premium Slider for WordPress

uBillboard is a Premium Slider for WordPress. It is a jQuery based slider with a multitude of transitions and options for you to be able to customize it to your needs while not overwhelming you with options you never wanted or needed. Version 3 is a revolutionary release with most of the codebase rewritten from scratch. This has enabled us to integrate many features that you have been requesting during the first year.

View Demo

26. Supersized – Full Screen Background/Slideshow jQuery Plugin

View Demo

27. Pikachoose

Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed, easy to setup, and well… all around easy. Creating an image gallery shouldn’t be a complex thing. I’ve created a new plugin that I’m packaging with PikaChoose called SliderJS.

View Demo

28. jQuery Image Overlay Plugin

The image overlay plugin is a simple jQuery plugin that attempts to present an image with an overlaid title/caption. The overlay drops in on hover, as you can see above.

View Demo

29. imgAreaSelect

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).

Plugin features:

• Highly configurable
• Customizable with CSS styling
• Handles scaled images
• Keyboard support for moving and resizing the selection
• Supports callback functions
• Provides API functions for easier integration with other application components
• Lightweight — the packed version is less than 8KB

View Demo

30. PFeloader

This is a preloader, it scans DOM and loaded StyleSheet’s for occurence of images (in sheet, style, as element).

StyleSheet file has to be in the same domain as page using it.

View Demo

30.1. jQuery Horizontal Image Scroller w/ Lightbox

This is a jQuery image scroller with lightbox. The scroll bar/indexes and directional buttons allow for easy navigation of your image gallery. Image click can either open the included lightbox or a regular link. The scroller is also re-sizable and fully configurable through the plugin’s parameters.

View Demo

31. Image Reveal using jQuery

View Demo

32. The jQuery Cycle Plugin

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

View Demo

33. Galleria Plugin

This demonstration shows you aome more advanced effects you can accomplish with the Galleria plugin. The history object is also active, so feel free to try the back button in your browser and bookmark a page. The next and previous links are simple to create since the galleria object has two public functions for traversing the images in your list.

View Demo

34. CrossSlide jQuery plugin

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (a lot.)

View Demo

35. Fancy Thumbnail Hover Effect w/ jQuery

View Demo

36. Apple-like Slideshow Gallery

View Demo

36.1. li JQuery Slider/Image Rotator

li jQuery Image Slider / Banner Image Rotator is carefully crafted slider/image rotator, full of features, very easy to install and customize. Whenever you need a full featured slider image rotator or you need a simple ad banner, li jQuery Image slider will do the job with ease!

This robust and yet elegant guy, has everything you need to build your next “to-impress” image slider.

View Demo

37. JQZoom

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

View Demo

38. ImageFlow

ImageFlow is an unobtrusive and userfriendly JavaScript image gallery.

View Demo

I got really amazed what can be done with Flash and how limitless possibilities are. You also may notice there are a lot of design, development and interactive agencies in this article, but that’s really self explaining – creative souls and agencies really offer the greatest creativity, because on their own designs they really have no limits. Enjoy!

1. Saizen Media Studios

Excellent digital artwork and animation – dreamy scene!

2.DrawingArt – WebDesign and Development Studio

One of my favorite designs – check it out to understand why!

3. Section Seven

Seriously check out this creative design and development website – you gonna love this – so elegant!

4.Semisture Webdesign

Very creative and beautiful animation saturated webdesign, note interesting flash preloader and line animations when sections loads at first.

5. Fl-2 Interactive Agency

Beautiful typography and mouse hover effects, award winning website.

6. Lecaid Design Studio

7. Esj * Com * AU

Sticky, sticky, very sticky website!

8. Recom CGI

Very nice loading effects – on images, text animation while loading the page – indeed beautiful work!

9. Millice – Cyril Louis

Elegant and light Cyril Louis website, nothing more, nothing less.

10. HYPR – Interactive and Creative Design Studio

Indeed interactive and unique approach.

11. TwistCube

A lot of twisting cubes and elegant approach in this website.

12. Go For Change

Interactive and creative design company encouraging you to go for change!

13.John Wright Photo

Very clean, subtle and professional photography website design, just seems very harmonic and elegant!

14.Timothy Hogan Photography

This is one more beautiful photography flash webdesign, but this one stands out with really huge photographies in full screen leaving everything else in shadow. But photography is his profession, author really shows quality of his works here.

15.LS5 Design Agency

Extremely creative design agency with really a lot of animation going on their website, get cocktail of all the best features!

16. SoyTuaire Labuat

This interactive website gave very strange and inspiring satisfaction feeling!

17. Mattthias Dittrich – Interaction Design Portfolio

Beautiful interactive 3D environment and animation.

18. Museum of Science and Industry

So cute preloader – really made me smile!

Very catching game with scientific taste!

19. Parasol Island – Film Animation Interactive

Company specializing in film animation industry, check out their videos there not only webdesign!

20.Unouplus

Private web-designer and art director flash website with interesting design and subtle animation.

21.MultiAdaptor: Branding & Identify Systems

Colorful branding website with subtle, but cool animation, i think this is very good way to display text and finished works!

22. Chemical Box

Interesting animation effects, mouse hover their logo to create each letter colorful!

23.Hello Monday

Award winning website, voted as one of the best websites in 2008 – unique project display here and beautiful animation.

24. Blanc Fonce

I would describe this site as simple elegance!

25. 2Advanced Studios

Browse through sections and you’ll notice website is full with beautiful digital artworks and animations showing their skill on every step!

26.Magnetic North – An Interactive design company

One more award winning website – draw and discover yourself what’s on the site!

27. In2Media – Digital Agency

Great typography, background animation,preloader and really good color schemes throughout whole website!

28. Cartelle – Interactive Studio

Very inspiring – share the beat!

29.Progetty Studio

Crazy design in totally good way!

30.Narrow Design

Interesting approach how to display many projects vertically in nice timeline. I just love that white grunge background.

31.Yodabaz – Fresh Webdesign

Interesting 3D text approach and in background is going on animation where author just moves all the time creating interesting feeling.

32.Aiala Garcia – Art Director and Webdesigner

Beautiful colors and elegant sliding effects displaying all the finished projects and everything else in one page!

33.PMA – Projects

Nice 3D effects going on in background which are by the way all the finished projects – impressive.

34. Mcinen

Clean and elegant design company’s website!

35. Nvidia Speak Visual

Nvidia website is full of beautiful effects, I enjoy the most creative spotlight section, where people tell about their passions and feelings working at Nvidia, creative facial videos.

36. Okay Dave – Dave Werner Portfolio

Really unique website board which is designer Dave Werner’s home site.

37. Michael Kelley Photography

Simply gorgeous and elegant photography website

38. Maven Interactive

Very unique portfolio page though actually I enjoy whole website from start to finish!

39. Unit 9 – The Creative Mind

Truly amazing website!

40. CreakTif!

Website built in one very interesting kind of house!

41. Experience 159 – Alfa Romeo

Very exclusive Alfa Romeo car company’s website.

Really amazing mouse hover effects – try them out!

42. NikeLab

Almost all big companies have created beautiful website, Nike is no exception, check it out!

43. Morris Code

From design point of view sketching preloader was the one, which cached my interest!

44. CocaCola Zero

Maybe I am not so big fan of CocaCola, but I totally love their website! Cannot even describe how elegant it is!

45. CocaCola Hapiness Factory

I am sure you have seen creative video advertisements in cinemas, this is original website created like interactive game!

46. Living Sasquatch

Website preloader is really stunning like whole website design!

47. Comcast Town

Just sit back and be inspired! Excellent 3D work has been done here!

48. MadeForEachOther

Very interactive illustrated and animated design! I typed “1stwebdesigner” in love letter to get nice effect!

49. Feed Your Ego

Very strong and powerful website, interesting game and interesting ego customization options.

50. BePop Jeans

Huge vector artwork and animation effects has been added to this site, lovely.

If You enjoyed this article, consider reading more inspirational articles:

• 30 Sources To Get Your Web Design Inspiration
• 30 Creative And Eye-Catching Web Designer Portfolios
• 46 Sites To Get Inspired And Familiar With Hand Drawing Style
• 55 Really Creative And Unique Blog Design Showcase: Inspiration
• Beautiful Gradient Effects On Web design – Research: Part 2

Well, I guess what I am suggesting is to always look how much time takes for you to modify, install, setup free solution..and if it takes too much, definitely look into cheap codes, cheap quality tools, where definitely you can spare 5-10$ to save your time, here are few marketplaces I am talking about and using myself on desperate occasions – Mojo-Themes and CodeCanyon! Just thinking, enjoy your free slideshows now – I know here you’ll find huge quality as well, just be aware how well supported, upgraded each solution is, because if you’ll get old buggy code, you won’t be happy with it! Ok, now let’s get to the actual article! -

PhotoSquare Photography WordPress Theme ($79)

PhotoSquares is very flexible premium gallery WordPress theme that is perfect way for designers and photographers to display their portfolio.

This theme allows you to set your own thumbnail sizes so everyone will be able to create most suitable layout.

Ajax, JavaScript ( jQuery, MooTools), Lightbox based galleries

1. JonDesign’s SmoothGallery

Using MooTools v1.11, this JavaScript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website. Together there are 7 different gallery demos, You can download and test for free.

Unlike other systems out there, JonDesign’s SmoothGallery is designed from the ground up to be standard compliant: You can feed it from any document, using custom CSS selectors. And even better, this solutions is very lightweight: The JavaScript file is only 24kb.

2. MiniShowcase Gallery

Minishowcase is a small and simple PHP/JavaScript online photo gallery, powered by AJAX that allows you to easily show your images online, without complex databases or coding, allowing to have an up-and-running gallery in a few minutes.

3. jQuery SlideViewer

SlideViewer is a lightweight (1.5Kb) jQuery plugin which allows to instantly create an image gallery by writing just few lines of HTML. SlideViewer checks for the number of images within your list, and dynamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide to the next picture.

4. DevKick Galleria

Galleria is a JavaScript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

5. ZenPhoto

Zenphoto is an answer to lots of calls for an online gallery solution that just makes sense. After years of bloated software that does everything and your dishes, zenphoto just shows your photos, simply. We hope you agree with our philosophy: simpler is better. Don’t get us wrong though – zenphoto really does have everything you need for your online gallery, and you’ll even stare in awe at some of the innovative innovations we innovated upon.

Check out their feature list – it was too long to long to post here!

6. jQuery Banner Rotator / Slideshow (Live Demo – 8$)

This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters.

Features:

• Multiple transitions available. Also can set a different transition per slide.
• Able to load unlimited number of images, each with customizable text description, tooltip, and hyperlink.
• Show or hide components, including play/pause button, directional buttons, thumbnails, text panel, and tooltip.
• Can set to automatically play on startup with customizable timer delay. Also, can set a different time delay for each slide.
• Banner, thumbnails, and buttons are all resizable.
• and more..

7. Visual Lightbox

VisualLightBox is a free wizard program that helps you easily generate web photo galleries, based on famous LightBox2 script, in a few clicks without writing a single line of code.

8. Photo Gallery with MooTools

Fully explained tutorial and also spectacular photo gallery to comfortably display many images.

9. GreyBox

GreyBox can be used to display websites, images and other content in a beautiful way. It is very easy to use full-screen website, image gallery, which doesn’t conflict with pop-up blockers and it’s only 22 kb size!

10. TripTracker

The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature.

11. qGallery

qGallery is a simple to use prototype based gallery script. All image processing is done by the script so you don’t have to worry about the images you upload on the server. All images for the skimmer graphics and the fullsize view will be created on the fly and stored in a cache directory on the server to save processing power on the server.

12. jFlow gallery

Tutorial and documentation, how to use jFlow plugin to create Your own gallery.

13. NoobSlide

8 different examples how to view Your images using MooTools, unfortunately there isn’t any documentation, but very easy to use gallery.

14. Spacegallery -jQuery plugin

Yet another way how to display Your images.

15.1. Sexy Slider (Live Demo – 7$)

SexySlider is a JQuery plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!

More examples: Example 1 Example 2 Example 3 Example 4

Features:

• Auto slide
• Continuous sliding
• Image captions
• Flexible configuration
• 6 Transitions effects

15.2. JQuery Cycle Plugin

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

16. Slider Gallery

This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff using jQuery plugins.

17. PrettyPhoto

jQuery Lightbox clone, pretty similar to original Lightbox with few another features and full documentation.

18. PrettyGallery

One more way how to display Your photos using jQuery.

19. FrogJS

FrogJS is a simple, unobtrusive JavaScript gallery. It’s not a replacement for other thumbnail galleries like Lightbox JS, but a different way of showcasing galleries. This type of gallery is best used when a page-by-page gallery is needed, as is the case with photo stories.

20. Galleriffic

A jQuery plugin for rendering fast-performing photo galleries. Galleriffic was inspired by Mike Alsup’s Cycle plugin, but with performance in mind for delivering a high volume of photos.

21. Pirobox jQuery Lightbox

Lightbox scripts have become a very popular way of displaying images online in recent months. There are a huge number of them available, using a variety of different frameworks and languages. DesignShack offers a new jQuery Lightbox script It has been designed and created by Diego Valobra.

22. Slideshow 2

Slideshow 2! is a JavaScript class for Mootools 1.2 to stream and animate the presentation of images on your website. This page features some examples of how Slideshow might be used to enhance the presentation of images on your website. Please view the source of this page for usage information.

23. JQuery flickrGallery

FlickrGallery is a jQuery plugin for embedding flickr photos into a webpage.  Plugin considers a Gallery to be a list of Albums (similar to Flickr’s Collections).  Albums are considered to be photo sets.

23.1. DDSlider – 10 Transitions – Inline Content Support ( View Demo – 10$)

DDSlider introduces a new easy-to-go slider with 9 different unique transitions (+fading & random—11 total) that support Inline Content. You can also have multiple sliders in the same page.

Features:

• Inline Content Support
• 11 Different Unique Transitions
• Support to all major browsers including IE6
• Auto Play
• Supports arrows and selectors
• Choose arrows and selectors simply
• Set the number of bars and squares

Words – “Auto Generating” don’t mean that that it takes the pictures for you. This gallery won’t even create the thumbnails for you. What it DOES, is build itself dynamically from your directory of images. So when you want to add new photos, you simply drop the new photo and thumbnail in the directory and you are done! Removing photos just means removing the photos from the image directory. Gallery use PHP for this web wizardry.

25. Photo Slider

Tutorial teaching how to create photo slider gallery with play/pause slideshow settings and interesting thumbnail effect using jQuery.

26. JavaScript TinySlideshow

This dynamic JavaScript slideshow is a lightweight (5kb) and free image gallery / slideshow script.

You can easily set it to auto-display the images, set the scroll speed, thumbnail opacity or to disable thumbnail slider.

27. S3Slider jQuery plugin

JQuery Slideshow with three different features and displaying sides, fully customizable sizes, delay speed and with good documentation.

28. Ajax Photo Gallery

The AJAX version of AgileGallery is a free AJAX photo gallery that rips through the XML output from Picasa (a free download from Google) and generates DHTML for the paging and thumbnails and displays the full sized photos along with any description entered in Picasa. Since this photo gallery uses AJAX technology, it eliminates the need for any page refresh as the user pages through the photos.

29. Suckerfish HoverLightbox Redux

Handy JavaScript, CSS based image gallery with another version of Lightbox included.

[ad#bildes-ads]
30. PhatFusion Slideshow

Slideshow using JavaScript MooTools with features like:

• Fade, Slide and Wipe transitions
• Loops
• Play, Stop, Next and Previous controls
• Inits from array of image src’s, a list of images on the page or using the href of an a tag like the Lightbox.

30.1. AviaSlider – jQuery Slideshow (View Demo – 12$)

AviaSlider is a very flexible and easy to use Image slideshow plugin for jQuery with a set of really unique transitions that were nver available before, as well as some basic transitions, so the slider will fit into every project.

It comes with an image preloader so the slider starts when images are ready to be shown. No clumsy animations with half loaded images.

Features of the Avia Image Slider

• 8 unique transition effects
• Lots of easy to set options to create your own effects
• Included Image preloader
• Autoplay that stops on user interaction
• Valid HTML5 and CSS 3 Markup

31. HighSlide JS

Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popup’s on web pages.

32. SlideFlow Ajax Image Gallery

Use slideflow to show elegantly Your images, also fullscreen mode is available.

Technical background: The photos and titles are read from an XML file, and the thumbnails are pre-generated using Photoshop actions (included)

33. Barack Slideshow 0.2

An elegant, lightweight slideshow JavaScript script.

34. jQZoom Evolution

JQZoom is a JavaScript image magnifier built at the top of the popular jQuery JavaScript framework. jQzoom is a great and a really easy to use script to magnify what you want.

35. jQuery Multimedia Portfolio

This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

36. jQuery spherical panorama viewer

A JavaScript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology.

I didn’t include screenshot here because demonstration can be seen only by clicking and dragging on the picture getting that 3D look.

37. JQuery Virtual Tour

This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour !

38. MooSlideBox

The mooSlideBox v3 is a small and slim Ajax based extension or replacement of the common “Lightbox” that can be found on nearly every page. This Lightbox clone works in IE 6/7, Opera and Firefox. It is based on the MooTools framework version 1.11.

39. jqGalScroll

jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos

40. Featured Content Slider

Tutorial, how to create a slick auto-playing featured content slider.

41. Easy Slider jQuery Plugin

Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with CSS alone. So, basically you link to plugin file, set the content up and style it with CSS.

42. Dynamic Image Gallery and Slideshow

This extremely lightweight JavaScript image gallery and slideshow script clocks in under 3kb packed and includes a number of cool features.

CSS Based Galleries

43. HoverBox Image Gallery

Basically, it’s a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS, free to use for Your own projects.

44. Sliding Photograph Galleries

This gallery is my simplest yet. It is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size. It is based on my sliding menu system and adapted to use images. No thumbnails are required and all the images are ‘pre-loaded’.This method can be used either vertically, as shown, or horizontally.

45. CSS Image Gallery

This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The gallery works in IE6+, Firefox, Opera 8+.

46. Cross browser CSS Slideshow

Nasty CSS Slideshow producing a slide show or photogallery using a mixture of portrait and landscape images.

47. Cross Browser Multi-Page Photograph Gallery

Based on the look of Suckerfish HoverLightbox, this one uses my multi-page layout system but includes images instead of text.Unlike the Suckerfish HoverLightbox this version does not use JavaScript but is pure CSS and still works in IE.

Tested in IE5.5, IE6, IE7, Opera, Firefox, Safari (PC).

48. CSS Decorative Gallery

Nice CSS Decorative Gallery and tutorial, how to decorate your images and photo galleries without editing the source images.

Flash Based Galleries

49. Flash Parallax Gallery

Parallax scrolling is frequently used in most 2D animation and games, where the background images and foreground images scroll at different rate of speed. This will create an illusion of depth as the background images are moving slower than the foreground images. Awesome tutorial and also great idea how to display Your portfolio or create unique web design. Must see!

50. Flash Gallery

Flash Gallery is a free application that allows you to create a slideshow on your website easy and fast. You won’t need any programming skills to install or use it. Just embed it into your website and script will automatically form a slideshow from a specified folder or from Flickr photostream.

51. SimpleViewer

SimpleViewer is a free, customizable Flash image viewing application.

52. 3D Curve Wall

Unique Flash based 3D curve wall similar to Flashloaded version, but this one is free.

53. dfGallery

As stated on many other articles on DezinerFolio site, dfGallery is one of the coolest flash galleries currently on the Web.

54. Spiral Carrousel XML

55. Polaroid Gallery

Polaroid Gallery is a free, opensource flash gallery, the script loads images and image titles dynamically from an external XML file or a flickr RSS feed. Then the script processes the data and creates an interactive flash gallery.

56. TiltViewer

TiltViewer is a free, customizable 3D Flash image viewing application.

57. Lightbox 2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers

Other

57+. DynamicDrive

And finally if You still haven’t got enough galleries or one for Your taste You can check this huge collection of many different image galleries from DynamicDrive.com

If You know some more resources I missed here, feel free to add in comments and if You enjoy this article, let others know about it! Spread the word!

Every site is a little bit different, so make sure to check everyone of these and pick up Your most favorite ones. Hope this list will help to get Your inspiration back.

BestWebGallery

Best Web Gallery is an inspirational gallery site collecting a wide range of quality design websites (Flash & CSS).

Webcreme

Get Your web inspiration in this great site, overall 313 pages with amazing designs.

TheBestWebDesign

This site collects the best Flash and CSS web sites from around the world. Web sites are categorized by CSS or Flash and also by different elements of the design, so You can find and get the best out of it.

CommandShift3

Vote for sites like Hot or Not – You are always presented with screenshots of two websites side by side. Click on the screenshot of the site You like the best, the page reloads and You can continue to vote again and again – in neverending way. And in the final You can check out the best site – weekly, monthly, all-time best and worst ever, You can also browse winners by tag.

CSSImport

CSSImport has been collecting new web sites from year 2005, check out archive page to get overview about each month. Pretty huge collection can be be found there.

CSSRemix

CSSRemix collects the best designed web 2.0 sites, with more than 14 thousand RSS subscribers.

Currently site is undergoing maintenance, but check out this site later.

CSSMania

CSSMania is one of the most popular CSS-based and regularly updated sites with more than 14,700 RSS subscribers. All sites are organized in really detailed topics, also listed by countries and much more, currently there are more than 12,000 web site collection.

WeLoveWP

Very well designed web site showcasing just WordPress based sites.

DesignSnack

DesignSnack site features XHTML/CSS and Flash web designs, categorized by categories – You can browse designs even by color.

CSSZenGarden

This is really popular CSS-based site – the code always remains the same, You switch only external .css file – amazing to see what people can do just by coding CSS. Really inspiring selection!

CSSBeauty

Get inspired in this popular site – really wide selection with CSS based sites.

Unmatched Style

Unmatched Style is a constantly growing community dedicated to acknowledging those who have made exceptionally gorgeous web sites using Cascading Style Sheets and web standards. By recognizing these exceptionally beautiful designs, other designers and businesses can get inspired and find a direction they may wish to take with their own web sites.

InspirationalFolder

Over 20,000 designs to jump-start Your inspiration!

LinkCreme

LinkCreme is a gallery with beautiful CSS and flash sites. Showcasing the best designs only – at least they say it about themselves.

EduStyle

EduStyle is a web design gallery dedicated to higher education websites and powered by higher education web design professionals. Users submit, review, and comment on sites they like (or don’t like). The aim is for higher ed web professionals to learn from and be inspired by the work of their peer.

DesignShack

Not like other CSS repositories. Site only offers he cream of great design, filtering through lots of the redesigns that occur every day across the Internet, and cataloging the greatest projects out there, priding themselves on having a huge selection of inspiring sites – perfect for getting that spark of creativity going again.

CSSTux

Site collecting the best dressed sites on the web.

CSSBloom

Slowly this site collects more and more great web designs. Make sure to check out this site too.

CSSHeaven

CSS Heaven is all about Fresh and innovative CSS / XHTML web designs submitted by web designers from around the world.

MostInspired

This is one of the network sites, there are also sites like MostSliced, MostHired, MostPreviewed, MostSported and MostListed. There are more than 20,000 web designs You can inspire from. Check out “Sites” section.

UniqueCSS

UniqueCSS.com is a CSS gallery featuring some of the most unique CSS designs on the web.Every month, talented CSS designers submit their websites for review by a group of judges. These judges select seven finalists to be featured on the Unique CSS homepage.

CoolHomePages

Huge list of design resources, there are even descriptions about each site telling what it’s about.

Botwg (Best Of The Web Gallery)

Botwg showcases few more unique designs.

UCreative

U-Creative is a design gallery. Create a graphic design portfolio, submit your designs and rate other graphic design work, great inspiration place.

FaveUp

Faveup is a simple gallery of inspirational design. Everybody gets designer’s block sometimes so it’s nice to have somewhere to go to get your creative juices flowing again. Faveup also gives credit where credit is due, rewarding great design with the respect and linkage it deserves. There are even more sections – logos, business cards, flash websites and CSS websites,

DesignFlood

One more site collecting and showcasing unique and really well-design web sites. Vote every web-site from 1-9 score, there are no perfect 10 rating, because there are no website, which can be really perfect. Sort sites by newest, oldest, highest rated and lowest rated.

CSSNature

CSS Nature is a showcase of well designed eco green and organic CSS based web site designs.

CSSCreme

CSSCreme is a free gallery of great sites, encouraging people to create beautiful original sites based on CSS technology.

StyleBoost

Styleboost is a gallery for showcasing beautiful web sites. It has been around since January 2001 and is created, designed and maintained by Johan Bakken.

CSSArtilery

CSSArtillery, showcase of web standards state-of-the-art & inspirational websites from all around the globe.

Where do You get Your web design inspiration from? Share with us in the comments to evolve our community!