Creative Reboot

digitalpublishing:

Slideshows with Swipe

Creating Image Slideshows like in the iPhone image gallery, that is to say by swiping instead of fading, is a much requested feature for the Adobe Digital Publishing Suite. Currently, slideshows only support fading images to each other.

You can build these swiping galleries for publications with Adobe DPS but you need to build them in HTML. I found a great javascript tool handling the swiping and displaying and is easy to use (and even has a ton of other features I am not using here).

The great people from Code Computerlove made PhotoSwipe, a very easy-to-use javascript library for mobile and touch devices. I made a HTML5 template for you to download and use, wich uses the PhotoSwipe gallery, and should give you the result you see in the video above in no-time.

You don’t even need to know much about javascript: just prepare the image files, change the HTML and you are good to go.

Download PhotoSwipe Gallery for DPS template (zip-file, 1,1 MB, including my exmaple images from L.A.)

Preparing Slideshow Images

After extracting the ZIP you fill find a subfolder called images. Put all images you want to use in there. For best results, make them all the same size, but they don’t even need to be. In my example I prepared them exactly the same size like the InDesign frame I wanted them to run inside.

Changing the HTML

At least, you need to change the list of images here according to the images you want to display. They will be displayed in the order you specify here. The caption is only visible if you enable the Toolbars (off in my example), so you don’t really need to care about them.

Note that the last line never has a closing comma ,

You can change some parameters how PhotoSwipe will display the images. If you want enable looping, set loop: true. You can change a bunch of other parameters and even make the slideshow autoplaying by referring to the list of Configuration parameters on photoswipe.com.

One caveat

While letting the user swipe through the images it is not possible to reach the next article while swiping (wich is the same for InDesigns “Swipe to Change Image”) on native slideshows.

—Johannes