Nice jQuery Sliding Image Gallery
There are a lot of jQuery image galleries out there, some of which are quite lovely (Galleria springs to mind). However, I've yet to discover a really nice-looking, full-window sliding image gallery that is simple and elegant, and that also shows off the photos to good effect. So I decided to write one!
It looks best on WebKit browsers such as Safari and Chrome, but other modern browsers should work well too.
For best results, make your browser full-screen. Google Chrome gives the most immersive experience here — view the demo, then choose View > Enter Full Screen.
The gallery is simple to use. Click the left or right edge of the window to move around the pictures (or use the left and right arrow keys on your keyboard). Hover over the main image to view its caption.
I've also made the gallery work reasonably well on touch devices such as iPhones and iPads by adding touch and swipe events. (I haven't yet tested these on the Android browser so your mileage may vary there. Watch this space!)
Step 1: Create the markup
<body> <button id="leftButton" onclick='moveLeft()'><</button> <button id="rightButton" onclick='moveRight()'>></button> <div id="galleryContainer"> <div id="gallery"> <img src="slides/BarbedWire.jpg" alt="Barbed Wire" /> <img src="slides/Feather.jpg" alt="Feather" /> <img src="slides/DriftStuff.jpg" alt="Drift Stuff" /> <img src="slides/Driftwood.jpg" alt="Driftwood" /> <img src="slides/DriftwoodGuy.jpg" alt="Driftwood and Guy" /> <img src="slides/GrassLight.jpg" alt="Grass and Light" /> <img src="slides/PebbleAndShells.jpg" alt="Pebble and Shells" /> <img src="slides/StickSea.jpg" alt="Stick and Sea" /> <img src="slides/SeaweedGasmask.jpg" alt="Seaweed Gasmask" /> <img src="slides/Surfers.jpg" alt="Surfers" /> </div> <div id="caption">Photo Caption</div> <div id="loading">Please wait...</div> </div> </body>
The markup contains:
buttonelements for the left & right buttons (
We bind each button's
clickevent to a function that slides the gallery 1 image to the left or right (
moveRight()respectively). Each button has an arrow (< or >) for a label. We'll use CSS later to style these buttons as large, transparent buttons that sit on the left and right sides of the gallery.
A container for the gallery (
The sliding gallery sits inside this
The gallery itself (
This is the
divthat contains the slide images. We will slide this
divleft and right to show each photo.
The slide images inside the
Each slide is simply an
imgtag containing the photo's URL, and some
alttext which we'll display as a caption when the user hovers over the image.
The photo caption container (
We'll position this just below the current gallery image. It will hold the caption text to display for the current image.
The loading message (
divcontains the "Please wait.." text that will appear if the gallery images are taking a while to preload.
Step 2: Add the CSS
Now we'll add the CSS to our page to style the gallery. Here's the complete CSS:
Let's look at each rule in the CSS:
The page body
We remove all margin and padding on the
bodyelement so that our gallery goes right to the edge of the window. We also give the body a black background and use Georgia for the font.
The gallery container
divthat contains our sliding gallery. We stretch it across the width of the browser window and give it a height of 800 pixels — this should be 200 pixels more than the height of our image slides. We set
hiddenso that the slides outside the browser window don't create a horizontal scrollbar, and position the container in the vertical centre of the page.
The slide images
#gallery imgselects the individual slide photos in the gallery. We float the images left so that they all sit side by side in a row; set the image height (600px); and add 100px of left and right margin to separate each slide. We also add a reflection effect below each image using the
-webkit-box-reflectproperty (as you'd imagine, this only works in WebKit browsers such as Safari, Mobile Safari, and Chrome). We apply a semitransparent gradient mask to the reflection to fade the reflection towards the bottom.
You can adjust the
marginproperty to suit. For example, change this value to
0 50pxto put the images closer together. Or you could change it to
0 1000pxto ensure that only 1 image is ever displayed onscreen at once.
The left and right buttons
#rightButtonare the buttons on either side of the gallery. The user can click these buttons to slide left and right between the images.
We restyle these
buttonelements quite drastically. We position them on the left and right sides of the page; give them a
z-indexof 2 so they sit above the gallery; centre them vertically in the page (moving them up 100 pixels to allow for the reflections below the images); and give them the same height as the images (600px).
We also turn off all borders and outlines that are usually applied to buttons, and give the buttons a white foreground colour and a transparent background. We set a large Courier font on the buttons so that the arrows (< and >) are large and nice-looking.
Finally, we make the buttons invisible by setting their opacity to zero, and add a :hover state to the buttons to bring up the opacity when the user moves the mouse over them. We use the transition property to fade the buttons in and out slowly over half a second.
::-moz-focus-innerrules ensure that the outlines are properly turned off in Firefox 3. (Firefox 4 only requires
The image caption
divcontaining the text caption that appears below the current slide image when the user hovers over the image. We position it 90px from the bottom of the gallery container, give it a tan colour, and centre it horizontally. We adjust the font size and letter spacing to make the text attractive, and hide the caption initially using
The loading text
#loadingis the "Please wait..." text that appears if the slide images are taking a few seconds to preload. We position it in the centre of the window, and style and colour the text in a similar way to the image caption. We set its opacity to zero initially to hide it.
Internet Explorer 7 has a problem with vertically positioning the left and right buttons. We compensate for this by adding a conditional comment for IE7 to adjust the
top property on the buttons.
I've also added CSS to style the "info" button and box in the bottom right-hand corner. Since this isn't part of the gallery we won't talk about it here.
- jQuery (hosted on Google's CDN)
- jQuery Swipe, a jQuery plugin that we can use to detect swipe gestures on mobile devices. We'll use this to let users swipe left and right to move between the gallery images.
jQuery Swipe isn't available on a CDN, so you'll need to download it, then put the
jquery.jswipe-0.1.2.js file in the same folder as your gallery page.
Step 4: Set up the configuration options
// --- Begin Config --- var preloadSlides = 3; // Number of slides to preload before showing gallery var loadingMessageDelay = 2000; // How long to wait before showing loading message (in ms) var loadingMessageSpeed = 1200; // Duration of each pulse in/out of the loading message (in ms) var loadingMessageMinOpacity = 0.4; // Minimum opacity of the loading message var loadingMessageMaxOpacity = 1; // Maximum opacity of the loading message var captionSpeed = 1200; // Duration of the caption fade in/out (in ms) var captionOpacity = 0.5; // Maximum opacity of the caption when faded in var swipeXThreshold = 30; // X-axis minimum threshold for swipe action (in px) var swipeYThreshold = 90; // Y-axis maximum threshold for swipe action (in px) var leftKeyCode = 37; // Character code for "move left" key (default: left arrow) var rightKeyCode = 39; // Character code for "move right" key (default: right arrow) var currentSlideOpacity = 1.0; // Opacity of the current (centre) slide var backgroundSlideOpacity = 0.5; // Opacity of the slides either side of the current slide // --- End Config ---
You might also like
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu