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.
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
Another Codrops creation that features advanced CSS3 effects to reveal content behind an image grid
No jQuery
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
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.
Very versatile lightbox that not only displays images but all types of media, including audio and video files and even other webpages..
Mootools
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
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
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
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
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
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
A lightweight slider that has the advantage of dots (pagination) or prev / next arrows. Simple and effective.
jQuery
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
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
Another simple but versatile slider. Auto plays but has selectable bottom tab.
jQuery 1.2.6.0 min
Numerical paginated auto slider by Soh Tanaka.
jQuery
A versatile slider. Auto plays but has selectable progress dots too. Slideshow pauses on mouse hover.
jQuery 1.4.4 min
A very stylish sliding image viewer. Operating as a slideshow (autoplay) or by clicking the numerical icons. Caption capability supported.
jQuery 1.2.6
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
Three variations of this slider with thumbnails, no captions / thumbnails or with captions. Very versatile.
jQuery 1.4
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
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
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
Images fade in and out and the caption slides; from top to bottom or vice versa.
jQuery 1.2.6
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
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
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
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
A paid option to remove the licence pop-up.
PHP
Flipbook style page turner.... swipe capable, can include HTML text and images.
jQuery
Pulls images from a Flickr account into a gallery. Image viewer lightbox is a bit over the top?
jQuery
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
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
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
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
An excellent gallery from Chris Kankiewicz - enabling anyone to upload their own images. An excellent compliment to a Content Editing System
jQuery
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
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
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
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
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
A slick navigation gallery that gives a circular "peek" (thumbnail) at the next and previous image. Supports captions.
jQuery 1.5+
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
Example 1
Example 2
Example 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.
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
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
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
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
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
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
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
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
Flipbook style page turner.... swipe capable, can include HTML text and images.
jQuery
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
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
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
Lovely work from Mirko Zoric
jQuery
Another beautiful design from Codrops. Suitable for an art site, responsive and detailed.
jQuery
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
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
A simple background slideshow with swipe capability that pulls images using the data attribute into a slideshow
jquery
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
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
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
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
A nifty grid using Masonry that has several options for viewing, including a lightbox.
jQuery
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
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
A slick background scale effect on hover from Tympanus.
javascript 216kb+
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
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
Stylish, full-screen background with autoplay options, and few customiseable features such as a progress bar or pagination. Nice job Swiper.
javascript
A full screen reveal demo
CSS only
An inobtrusive background switcher using jQuery by Bcat.eu
jquery
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
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
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
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
Replaced buggy fullscreen image script, this one works well on all devices / screens tested that we know of!
CSS / media query only
