New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF2+ IE8+ Opr9+

Touch Image Gallery

 Author: Dynamic Drive

Note: Updated Aug 3rd, 2013:  Clicking on forward/back nav buttons no longer selects entire DIV

Description: Touch Image Gallery is a simple image gallery that caters to mobile and desktop browsers alike, by being touch/ swipe friendly, in addition to the traditional way of navigating. The gallery can be navigated in the following intuitive ways:

  • By swiping left or right using your fingers in mobile browsers, or dragging using a mouse.
  • By tapping or clicking on either the left or right edges of the gallery.
  • By clicking on the auto generated bullets underneath the gallery.

The gallery itself consists of just a regular UL list with images defined inside it. A simple to implement, cross device friendly gallery this is!

Demos:


Directions Developer's View

Step 1: Add the following script to the <head> section of your page:

Select All

The code above references the following external files, which you should download and upload to the same directory as your webpage:

  1. touchgallery.js
  2. jquery.touchSwipe.min.js (Github)
  3. touchgallery.css

Important Note: Your page should contain a valid doctype at the very top in order for this script to work as intended, such as:

<!doctype html>

Step 2:  Add the below HTML markup for the two demo galleries to your page:

Select All

Each gallery should consist of an outer DIV with an unique ID and a CSS class of "touchgallery". Inside this DIV, a regular UL list with images as its content completes the markup.

More information

To initialize a new Touch Image Gallery, first, reference the above DIV container via its ID attribute, then call the method touchgallery() on top of it. This takes place in the HEAD section of your page:

<script>
jQuery(function(){ // on DOM load
 $('div#touchgallery1').touchgallery({ // initialize first demo
  width: 250,
  height: 200
 })
})
</script>

Notice the width and height settings defined inside touchgallery()- they should correspond to the desired dimensions of the gallery. All images inside it will be shown in their native dimensions unless their width exceeds that of the gallery's. In that case, the image will be scaled appropriately to fit. The following table lists all of the options you can pass into touchgallery():

Option Description
width: int The width of the gallery (pixel unit assumed). All images inside it will display in their native width unless the image's width exceeds that of the gallery's. In that case it will scale down to the gallery's width instead.
height: int The height of the gallery (pixel unit assumed). All images inside it will display in their native height unless the image's width exceeds that of the gallery's. In that case it will scale down based on the image's new, scaled width.

When setting the height option, take into account the additional space needed to show the auto generated bullet links at the end of the gallery.

navarea: 'percent' Sets the area of the left and right edges of the gallery that's clickable to navigate the gallery back and forth, respectively. For example, a "20%" setting means 20% of the left and right edges of the gallery will be clickable.
threshold: int Sets the threshold (pixels assumed) the user has to swipe before the gallery advances to the next image. If the threshold is not met, the gallery bounces back to the current image. For example:

<script>
jQuery(function(){ // on DOM load
 $('div#touchgallery1').touchgallery({ // initialize first demo
  width: 250,
  height: 200,
  threshold: 100 // <-- no comma after last option!
 })
})
</script>

navbuttons: ['left.png', 'right.png', int] Sets the paths to the left and right navigation buttons that appear when the user moves his mouse over the gallery, or in mobile platforms, when he taps on it. The final parameter sets the vertical offset (pixels assumed) of each image from its default center position. For example, the following setting moves the navigational images up 20 pixels from the center of the gallery:

<script>
jQuery(function(){ // on DOM load
 $('div#touchgallery1').touchgallery({ // initialize first demo
  width: 250,
  height: 200,
  navbuttons: ['left.png', 'right.png', -20]
 })
})
</script>

 

You may also want to edit touchgallery.css to make additional changes to the look of each gallery. For example, to modify the animation speed of the swipe, edit the corresponding code in red below:

.touchgallery ul{
list-style: none;
margin: 0;
padding: 0;
left: 0;
position: absolute;
-moz-transition: all 100ms ease-in-out; /* image transition. Change 100ms to desired transition duration */
-webkit-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;

}