All image viewers and galleries

Please click on the screenshot to view a working demonstration. If the demonstration does not work in your browser please contact us, thank you.

Remember that these demonstrations are often in their most basic, uncustomised form and may often not look that 'polished'. You may need to use a little imagination to see how they could work on your website with your images, colours or fonts.

Lightboxes

Photoswipe with Masonry

Photoswipe Flickr slider

Masonry to make the thumbnails beautiful. Swipe-capable light-box style gallery with captions. A little finnicky so I've disabled the share and full-screen capability, but should be able to re-add this if necessary. For documentation check the Photoswipe documentation and Thrive Web site for the Masonry bits.

jQuery

By Dimitry Semenov.

3D Grid Effect

3D Grid Effect

Another Codrops creation that features advanced CSS3 effects to reveal content behind an image grid

No jQuery

By Codrops

Fancy Moves

Fancy moves scroller and image viewer

This combo scroller / viewer is something different. Browse different products (images) and then view the gallery for each - it is possible to show many images per product. Not bad huh? Please note that navigation arrows for the sub-items (hover) do not appear on touch-devices such as iPad, tablets and smart phones.

jQuery 1.3.1

By Web Design & Such

Lightbox v2

Lightbox viewer version 2

Lightboxes work by expanding a box to fit the size of your image over a greyed-out or transparent background. Previous / Next image buttons enable the next or previous photo in sequence to be viewed along with a caption box.

Author link credit to be added. If you are the author, or know of the author please contact us. We are working to add appropriate credits as soon as we can.

Phatfusion Multi media viewer

Lightbox viewer version 2

Very versatile lightbox that not only displays images but all types of media, including audio and video files and even other webpages..

Mootools

By PhatFusion

Shadowbox Multi media viewer

Shadowbox viewer

A similar product to the PhatFusion multibox, showing images, video, audio or webpages. Operable also by keys as well as mouse navigation (for galleries).

yui

Author link credit to be added. If you are the author, or know of the author please contact us. We are working to add appropriate credits as soon as we can.

Fancybox viewer

Fancybox viewer

A good lightbox option that has a more modern appearance than some. Unobtrusive 'next' and 'previous' arrows for the successive image appear when you mouseover close the photo border. Another nice feature of this lightbox is that the caption is not limited to just a single line or paragraph. It also features an image counter for improved useability.

JQuery 1.3.2

HTML drive (we think!)

Sliders

Swiper

Swiper

Stylish, full-screen background with autoplay options, and few customiseable features such as a progress bar or pagination. Nice job Swiper.

A production version of this slider can be seen on the Riverside Apartment - Taupo Accommodation website.

javascript

By iDangerous

Fitness Swipe slider

Fitness Swipe

A heavily modified version of the responsive slider by w3cwidgets. Incorporating a sticky responsive menu this has been pretty well tested out on most modern desktop browsers, mobile iOS products and Android Chrome. Animations, swipe and pagination feature in this nicely featured ready-to-go site.

jquery

By w3widgets

2 block responsive product slider

2 block responsive image slider

An app-style website that gloriously shows off products in two blocks. Adopted from the great article and tutorial from CodyHouse, this deveopmental site also features the off-canvas menu first seen on the Codrops site. Slick, responsive and very very nice to look at.

jQuery

By Codyhouse and Codrops

Diapo Gallery / Slider

Diapo slider

A versatile slider / gallery that features an auto-play function (with countdown timer), thumbnails on hover and multiple transition effects. It also supports other media, not just images. Multiple style captions round off this very capable gallery slider / viewer.

jQuery

By HTML drive.

Aino Dots Slideshow / Slider

Aino Dots Galleria slider

A lightweight slider that has the advantage of dots (pagination) or prev / next arrows. Simple and effective.

jQuery

By Aino Galleria.

Fullscreen Slider

Fullsize slider

An intersting take on a fullscreen slider. Beware of slow internet connections and bandwidth requirements when using this slider... but it makes an impression! Note that it is also not a true resizing background but a large left-top positioned image.

jQuery 1.5 min

By Marcofolio.

Numbers Slider

Numbers slider

A simple but versatile slider. Auto plays but has selectable number pagination too - nice effect by hovering instead of clicking to select the slide.

jQuery 1.4.0 min

By HTML drive.

Auto Tabbed Slider

Auto Tabbed slider

Another simple but versatile slider. Auto plays but has selectable bottom tab.

jQuery 1.2.6.0 min

By HTML drive.

Soh Slider

Soh slider

Numerical paginated auto slider by Soh Tanaka.

jQuery

By Soh Tanaka.

Searles Slider

Nathan Searles slider

A versatile slider. Auto plays but has selectable progress dots too. Slideshow pauses on mouse hover.

jQuery 1.4.4 min

By Nathan Searles.

Slider 1

Lightbox viewer version 2

A very stylish sliding image viewer. Operating as a slideshow (autoplay) or by clicking the numerical icons. Caption capability supported.

jQuery 1.2.6

Author link credit to be added. If you are the author, or know of the author please contact us. We are working to add appropriate credits as soon as we can.

Elastislide

Elastislide

A versatile, responsive carousel slider. Excellent for cross-browser / multi-device considerations. Try resizing your window or testing it in your mobile device.

jQuery 1.8.2

Original code by Codrops

jShowoff

Lightbox viewer version 2

Three variations of this slider with thumbnails, no captions / thumbnails or with captions. Very versatile.

jQuery 1.4

Author link credit to be added. If you are the author, or know of the author please contact us. We are working to add appropriate credits as soon as we can.

Presentation Cycle

Presentation Cycle

A moving progress line anticipates when the next slide will be loaded. The slides feature an image and text combination which is advantageous from the point of search engine performance. Images are advanced by clicking on the circular progress dot of each slide - which cleverly stops the slideshow - from this point the progress is continued manually.

jQuery 1.3

Original code by HTML drive

Time liner

Time Liner

A brilliant take on an image slider, this represents images in a time-line - it also has a vertical variation but we think the horizontal display is better. Nice effects on the timeline and of course the year markers can be be replaced with any headings, although evenly spaced headings certainly look good.

jQuery 1.6 but this functions on 1.5

Original code by HTML drive ?

Slideshows (auto-play)

Tabbed rotator

Lightbox viewer version 2

This slideshow can also be used as a navigation menu - simply by changing the delay of each slide to an infinite amount of time. We put it on our websites for both the Pirongia Golf Club and also the new site for Speak Up!

jQuery 1.3.2

Author link credit to be added. If you are the author, or know of the author please contact us. We are working to add appropriate credits as soon as we can.

S3 slider

Lightbox viewer version 2

Images fade in and out and the caption slides; from top to bottom or vice versa.

jQuery 1.2.6

Author link credit to be added. If you are the author, or know of the author please contact us. We are working to add appropriate credits as soon as we can.

Galleries

Simple Lightbox

Simple Lightbox swiper

A winner. Thumbnails appear in a masonry effect by gunnarbittersmann and it works with two galleries or more galleries too. Or, version 2 with horizontal masonry using simple ul and li - which is ok as long as you don't mind losing some image top and bottom..

jQuery

By Andre Knieriem.

Swipebox

Swipebox gallery

Multiple galleries the nice feature of this touch capable gallery. Added a CSS masonry effect for the thumbnails which makes it a lot more useable. Refined by Mosne to achieve better lightbox aesthetics. Note: A workaround for the .js file will be needed to avoid a 'loop' of background images when trying to close the swiper. "Scobbleme's" solution seems to work AND then I had to add the following line: location.reload(true); otherwise the window was unable to be scrolled after closing it down. This causes the page to reload every time the gallery closes... NOT GOOD! Around line 606 of the jquery file I had to add:

closeSlide : function () { $( 'html' ).removeClass( 'swipebox-html' ); $( 'html' ).removeClass( 'swipebox-touch' ); $( window ).trigger( 'resize' ); location.reload(true); this.destroy(); if(event){ event.preventDefault(); } },

jQuery

Based on Swipebox byBrutal Design.

Justiswipe

Justiswipe Flickr slider

Quite file-intensive but it ticks all the boxes. Best so far. Supports albums (and multiple albums on one page), captions, swipe capable and uses the very tidy justified.js for thumbnail layout and the photoswipe.js libraries for function. Not a bad page download time either, only 1.2 seconds for intial load on Chrome!

jQuery

By Peter Fabian.

Aino Flickr-feed Galleria

Aino Flickr Galleria slider

Caution - won't load on mobile devices after modification? A super gallery / slider that pulls images from your flickr photoset (not just the author). Simply upload your photos to your flickr account, create a set and let us know the set number. Includes a info (caption) from filename. Organise the order that they appear in by modifying in Flickr Organiser. Fullscreen now as modified by Piccante recently. The only down side? No swipe capability, but the other benefits must outweight this?

jQuery

By Aino Galleria.

Files Photo Gallery

Files gallery

A paid option to remove the licence pop-up.

PHP

By Files Gallery.

BookBlock

Bookblock flip viewer

Flipbook style page turner.... swipe capable, can include HTML text and images.

jQuery

By Tympanus

Nice Gallery

Nice-gallery Flickr image viewer

Pulls images from a Flickr account into a gallery. Image viewer lightbox is a bit over the top?

jQuery

By Lukasz Czerwinski

S-gallery

S-gallery responsive swipe image viewer

This beautiful gallery works relatively well in touch devices, has a full screen mode and smooth transitions. Thumbnails or full image modes are available.

jQuery 1.8

By Sara Soueidan

Galleriffic viewer

Galleriffic viewer

A really versatile gallery viewer... instead of using thumbnails to view the larger image we can replace these with links (text based).

jQuery 1.3.2

Original code by Trent Foley

Foliogallery

Foliogallery

Very capable slider that is demonstrated on our Riverside Accommodation website. Thumbnails created automatically from a folder on the web (not Flickr or other feed) - so it will require the ability for the user to FTP to an album folder.

jQuery

Nice job by Foliopages.

Trung Ho Masonry-style Flickr-feed Galleria

Trung Ho Flickr Feed slider

A nice gallery using masonry style display that pulls images from a Flickr account. Easy to set up and get the API. Downside at the moment - doesn't support albums (have to load from the Flickr 'author' account) and there is no caption support at the moment. The "lightbox" has been trimmed down and is now good - great because it is swipe supported in fact.

jQuery

By Trung Ho.

Uber Gallery - single gallery - add your own images!

Uber Gallery

An excellent gallery from Chris Kankiewicz - enabling anyone to upload their own images. An excellent compliment to a Content Editing System

jQuery

By Chris Kankiewicz.

Uber Multiple Gallery - add your own image to multiple galleries on one page!

Uber Gallery

Another example of this excellent gallery from Chris Kankiewicz - enabling anyone to upload their own images. The gallery creates it's own thumbnails and is organised into two or more galleries. Another excellent compliment to a Content Editing System

jQuery

By Chris Kankiewicz.

Barack image viewer

Barack viewer

A Moo-tools viewer based on the viewer originally seen on the Barack Obama campaign website. Suitable for a small list of images as the menu is not expandable.

Mootools

Author link credit to be added. If you are the author, or know of the author please contact us. We are working to add appropriate credits as soon as we can.

Orbit image viewer

orbit viewer

A lightweight ultra-simple slideshow. The demo shoes no autoplay, no numbers, no captions - just a 'next' and 'previous' icon. There are options for these however, should you want them.

jQuery 1.4.1

By Zurb

Sideways image viewer

Sideways viewer

An impressive gallery that really does occupy the entire screen. Not suitable for users with dial-up connections... are there any still out there?!?! The launch version of this gallery was a bit buggy, but we've included it because we hope that improvements will be made to stabilise the script.

jQuery 1.4

By Malihu

Slideshow with thumbnails

Slideshow viewer

A smart viewer that allows an infinite number of thumbnails displayed below the main image which is capable of auto-playing as a slideshow. Many different slide transitions are available - mosaics, wipes, curtain effect and blind effects too

jQuery 1.4

By HTML drive

Circular Navigation

Circular navigation viewer

A slick navigation gallery that gives a circular "peek" (thumbnail) at the next and previous image. Supports captions.

jQuery 1.5+

By Codrops

Responsive image display

Swiper with src-set responsive image selection

Swiper SrcSet

Highly modified and cut down by Piccante to add src set images. Using 'w' as an image attribute allows the browser to determine the best image including on retina devices. Seem to have solved issue of slide height by using 'vw'. The winner so far? If you prefer not to have all 'small' size placeholder images and have a true lazy load site then check out version two or this full-height and full-width version.

Test my site: 3seconds.

PageSpeed Insights: 74/100 and 77/100

j swiper javascript only

By iDangerous

bqworks Slider Pro

bqworks slider proExample 1 bqworks slider proExample 2 bqworks slider proExample 3

Five examples, all are responsive, touch (swipe) enabled, have alternate sources for retina (high PPI) screens, and feature lazy loading. Examples 2 and 4 use Fancybox (Lightbox). Examples 1 and 5 have media breakpoints. Example 2 features a carousel layout. Infinite scrolling available. Full window available on Example 2 (and 3?). Can handle portrait and landscape orientated images and Example 4 has auto-height.

Example 2 - Carousel with dot pagination and lightbox. Currently working on improving the performance of this with Example 2A.

Example 3 - Single large image with thumbnails in a lower

Example 4 - Auto-height multi-use slideshow including video and multiple layouts.

Example 5 - A responsive layout that shows the thumbnails and captions to the right on wide screens and positions them to the bottom of the main image on smaller screens. Quite slick.

Example 1 Lighthouse: 79/100

PageSpeed Insights: 82/100 and 91/100

jQuery - not yet fully tested on devices/browsers but has potential.

By bqworks

Lazysizes

lazysizes

A combination of the Flex Slider and Lazy Sizes in a slider. Has great potential but seems to be a little erratic in selecting the correct size image in Chrome browser, including the mobile.

Test my site: 8seconds.

PageSpeed Insights: 91/100 and 37/100

jQuery

By iDangerous

Elba swipe slider

Elba Swipe

Swipe capable, lazy loading with media queries. Is this the smoothest slider? Probably not, but these other features make it well worth considering for your project. At the moment there is an issue with the swipe function not working on Windows touch screen computers.

Test my site: 4seconds.

PageSpeed Insights: 61/100 and 74/100

javascript only

By Giancarlo Soverini, iliketomatoes

Elba modified

Elba Swipe

Messed around with by Piccante to limit height of the slider. At the moment there is an issue with the swipe function not working on Windows touch screen computers.

Test my site: 4seconds.

PageSpeed Insights: 66/100 and 79/100

javascript only

By Giancarlo Soverini, iliketomatoes

Fitness Swipe slider

Fitness Swipe

A heavily modified version of the responsive slider by w3cwidgets. Incorporating a sticky responsive menu this has been pretty well tested out on most modern desktop browsers, mobile iOS products and Android Chrome. Animations, swipe and pagination feature in this nicely featured ready-to-go site.

jquery

By w3widgets

Justiswipe

Justiswipe Flickr slider

Quite file-intensive but it ticks all the boxes, however it can be buggy. Supports albums (and multiple albums on one page), captions, swipe capable and uses the very tidy justified.js for thumbnail layout and the photoswipe.js libraries for function. Not a bad page download time either, only 1.2 seconds for intial load on Chrome!

jQuery

By Peter Fabian.

Simple Lightbox

Simple Lightbox swiper

A winner. Thumbnails appear in a masonry effect and it works with two galleries or more galleries too. Or, version 2 with horizontal masonry using simple ul and li - which is ok as long as you don't mind losing some image top and bottom..

jQuery

By Andre Knieriem.

Photoswipe with Masonry

Photoswipe Flickr slider

Masonry to make the thumbnails beautiful. Swipe-capable light-box style gallery with captions. A little finnicky so I've disabled the share and full-screen capability, but should be able to re-add this if necessary. For documentation check the Photoswipe documentation and Thrive Web site for the Masonry bits.

jQuery

By Dimitry Semenov.

Nice Gallery

Nice Gallery, a Flickr slider

No known problems with the nice gallery that is responsive and pulls files from Flickr with auto captioning and thumbnailing in a masonry style display.

jQuery

By Lukasz.

BookBlock

Bookblock flip viewer

Flipbook style page turner.... swipe capable, can include HTML text and images.

jQuery

By Tympanus

Aino Flickr-feed Galleria

Aino Flickr Galleria slider

Caution - won't load on mobile devices after modification? A super gallery / slider that pulls images from your flickr photoset (not just the author). Simply upload your photos to your flickr account, create a set and let us know the set number. Includes a info (caption) from filename. Organise the order that they appear in by modifying in Flickr Organiser. Fullscreen now as modified by Piccante recently. The only down side? No swipe capability, but the other benefits must outweight this?

jQuery

By Aino Galleria.

Trung Ho Masonry-style Flickr-feed Galleria

Trung Ho Flickr Feed slider

A nice gallery using masonry style display that pulls images from a Flickr account. Easy to set up and get the API. Downside at the moment - doesn't support albums (have to load from the Flickr 'author' account) and there is no caption support at the moment. The "lightbox" has been trimmed down and is now good - great because it is swipe supported in fact.

jQuery

By Trung Ho.

Plus Gallery

Responsive thumbnail image view

This is a great slideshow. The images are uploaded from your Google (Picasa) account once it is "Shared" to the public. Thumbnails are created automatically and best of all - the slideshow is responsive.

jQuery 1.7.2

By Pluse Gallery

Fluxus

Fluxus two part image slider

Lovely work from Mirko Zoric

jQuery

By Mirko Zoric

Diagonal Slideshow

Diagonal image slider

Another beautiful design from Codrops. Suitable for an art site, responsive and detailed.

jQuery

By Tympanus (Codrops)

2 block responsive product slider

2 block responsive image slider

An app-style website that gloriously shows off products in two blocks. Adopted from the great article and tutorial from CodyHouse, this deveopmental site also features the off-canvas menu first seen on the Codrops site. Slick, responsive and very very nice to look at.

jQuery

By Codyhouse and Codrops

Gilbitron Ideal Gallery

Responsive swipe friendly image slider

An HTML5/SEO friendly slider that is fully responsive to retain width and proportion of the images. Retina friendly with 2x resolution possible. Touch enabled and keyboard navigation finish it off. The slideshow pauses on hover and also shows the navigation arrows at the same time. Nice.

Vanilla js

By Gilbitron

Simple Fullscreen Background Image Slideshow

Simple Full Screen Background Slideshow

A simple background slideshow with swipe capability that pulls images using the data attribute into a slideshow

jquery

By Tutorialzine

Swiper

Swipe capable full width, responsive image slideshow

A nice full-width responsive slideshow with swipe capability and pagination.

Also check out this Piccante-tailored version with navigation arrows left and right

jquery

By iDangero.us

Fresco

Responsive image gallery

A beautiful, responsive lightbox. Youtube and Vimeo integration is possible. Commercial licences may be necessary.

Note that the close ('x') icon is very small on some devices

jQuery 1.11.1

By Fresco.js

Responsive Slides

Responsive slides image viewer

This versatile gallery has slide show, numerical pagination, caption or thumbnail options. Modified and shown in the Piccante Web Design.co.nz website as our special limited edition photography site for sale

jQuery 1.8

By @viljamis

Responsive Slides with media queries for screen width and retina detection

Responsive slides image viewer

Full page width, serving only the image size required by your device to save on bandwidth and reduce page load time. A sweet solution for a high-end website. Image costs per slide may be more than HKD$28 per image as each image must be edited into 8 suitable sizes. Remember that your minimum image size must also ideally be at least 2560 x 1800 px

This slideshow also uses the excellent picturefill.js plugin, thanks to Scott Jehl.

jQuery 1.8

By @viljamis

Wookmark Masonry demos

Wookmark

A nifty grid using Masonry that has several options for viewing, including a lightbox.

jQuery

By Wookmark

Responsive Google Grid

Responsive Google Grid viewer

A nifty grid using Masonry that enlarges into a slider. Responsive - another beauty from Codrops.

Note that the images are truncated in landscape orientation of some mobile devices, a better option might be the Masonry plugin

No jQuery

By Tympanus (Codrops)

Anoslide

Anoslide

A responsive carousel-style slider with non-infinite looping. There could be the possibility to integrate a modal popup or lightbox style image to view a larger picture, untested at this time.

Note that the buttons (controls) are rather difficult to use on smaller devices

jQuery 1.10 min

By Anowave

Fullscreen background images

bg Effects

bg effects

A slick background scale effect on hover from Tympanus.

javascript 216kb+

By Tympanus.net

Elba swipe slider

Elba Swipe

Swipe capable, lazy loading with media queries. Is this the smoothest slider? Probably not, but these other features make it well worth considering for your project. At the moment there is an issue with the swipe function not working on Windows touch screen computers.

javascript only

By Giancarlo Soverini, iliketomatoes

Elba modified

Elba Swipe

Messed around with by Piccante to limit height of the slider. At the moment there is an issue with the swipe function not working on Windows touch screen computers.

javascript only

By Giancarlo Soverini, iliketomatoes

Swiper

Swiper

Stylish, full-screen background with autoplay options, and few customiseable features such as a progress bar or pagination. Nice job Swiper.

javascript

By iDangerous

Full Screen Reveal

Full Screen Reveal

A full screen reveal demo

CSS only

CodePen by Dudley Storey

BgSwitcher

BgSwitcher

An inobtrusive background switcher using jQuery by Bcat.eu

jquery

By bcat.eu

Codyhouse Hero Slider

Codyhouse Hero Slider

A beautiful design job by Codyhouse. Responsive menu featuring an icon-based navigation slider with a full-screen background image or video. This design is ideally suited to pages that require a maximum of 5-6 landscape orientated images on each page.

jQuery

By Codyhouse

Skippr

Skippr

Stylish, full-screen background with autoplay options, and a few customiseable features such as a progress bar or dots. As an alternative, check out Flickerplate

jquery

By iamapioneer.com

FullPage Alvatotrigo

Full page

Swipe capable, great for snapping screens vertically (and horizontally). Expandable in many ways. The fixed headers version is quote cool. As seen on the Bruce-Mayne site.

jquery

By Alvatrigo

Alternate Background scroll fullscreen images

Alternate Background

Very 'in' design with alternate images being revealed as page content is scrolled through.

Note that on some mobile devices the menu does not operate after scrolling - only when the page is returned to the very top of the window

jquery 1-11

By Codyhouse

ResponsiveBG

Responsive background fullscreen images

Replaced buggy fullscreen image script, this one works well on all devices / screens tested that we know of!

CSS / media query only

By Piccante Web Design

Join us on Facebook Join Piccante on Facebook | Follow us on Twitter Follow piccanteweb on Twitter | View our latest website