What you need:
– Basic knowledge in HTML and CSS.
– A Mac and Xcode (no programming skills required) for exporting the app.

Image Slideshow

This module produces a slideshow on iOS devices. On desktop browsers it displays images one after another. On iOS the user can swipe images. The hint to “swipe for more pictures” is only enabled on iOS devices. The javascript is based on the image scroll demo by http://labs.skinkers.com/touchSwipe.

Geeky note: This slideshow is realized with CSS-Transitions to speed up performance on iOS devices (see “Performance on iOS“).

Notice: This module only works when placed in a “full-column”, so the slideshow pictures will always be resized to the current screen width.

The slideshow module consists of three parts.

Part 1 – Activate the Javascript in the <head> section which control the touch gestures

In order to work, the following line of code must be activated. That includes the correct javascript for controlling the slideshow via touch gestures. TouchSwipe is complete javascript touch framework, so it can do much more.

<head>
…
<script src="js/jquery.touchSwipe-1.2.1.js" type="text/javascript"></script>
</head>

Part 2 – Insert images and captions

Every image and caption is encapsulated in a “div” called “imgscroll-img”.

<div class="imgscroll-img" id="imgscroll-img">
	<img src="images/dossier-XX/myPicture.jpg" />
	<div class="caption"><p>My great caption</p></div>
</div><!--imgscroll-content-->

Part 3 – Initiating the slideshow

After creating the markup for the images, call the javascript. It produces the touch friendly slideshow.

<script src="js/imgscroll.js" type="text/javascript"></script>

The complete HTML:

<div id="imgscroll-content">
<div id="imgscroll-legend"><p>» Swipe for more pictures.</p></div>
<div id="imgscroll-imgs">

<!--Picture 1-->
<div class="imgscroll-img" id="imgscroll-img">
	<img src="images/dossier-01/nyc1.jpg" />
	<div class="caption"><p>New York City #1</p></div>
</div><!--imgscroll-content-->

<!--Picture 2-->
<div class="imgscroll-img" id="imgscroll-img">
	<img src="images/dossier-01/nyc2.jpg" />
	<div class="caption"><p>New York City #2</p></div>
</div><!--imgscroll-content-->

<!--Picture 3-->
<div class="imgscroll-img" id="imgscroll-img">
	<img src="images/dossier-01/nyc3.jpg" />
	<div class="caption"><p>New York City #3</p></div>
</div><!--imgscroll-content-->

</div><!--Div imgscroll-imgs-->
</div><!--Div imgscroll-content-->

<!--Initiating the slideshow by calling the JS-->
<script src="js/imgscroll.js" type="text/javascript"></script>

Laker is now on github! Please discuss issues, suggestions or tipps in the github forums of Laker. Thanks! ;)

26 Responses to “Image Slideshow”

  1. Could this same technique for swiping sets of images also be applied to snapping pages when swiping vertically? The Adobe Digital Publishing Suite does this by default, and it would be a nice feature to have since the publications at our company that we would like to convert were originally designed page by page.

    I’m going to mess around with they idea, but my javascript skills aren’t the best.

  2. Hey alan,
    a couple of weeks ago, someone posted a “page snapping”-Javascript. Unfortunately I cannot find it anymore. Could anybody help? Or maybe you could ask in the baker forums.

    florian

  3. Thanks Florian, I’ll look around there. Might I add how happy I am that you’ve put all of this together, and that you’re sharing it with the community. There is definitely a need for an html based solution such as this. We were priced out of Adobe’s Digital Publishing Suite, since we are a small firm, and it’s too platform limited as well. Hopefully I’ll have something to contribute to the project, I’m just figuring out Laker and Baker right now.

    You’re welcome to consult me on actual usage of tools like this, since we make some smaller magazines for businesses, and I have some experience with actually putting these things together commercially. I was a designer first, and a web developer second – now it’s the other way around. And ePublishing seems to be our next big venture.

    Thanks for the help.

  4. Think I found it.
    https://github.com/harryfk/baker-pagify

  5. yeah that’s the one I was referring to!
    Glad that I could help! Let me know, when you published something with it ;)

  6. it’s exceptional to check out an awesome website just like it now..not surprisingly much like your internet site however you need to check the spelling in tibetan jewelry a lot of you. A variety of themare usually filled along withpunctuationproblems and i also realize itsrather

  7. Hallo,
    erstmal möchte ich dir für deine tolle Arbeit danken!
    Ich habe aber eine Frage: Ich möchte 2 verschiedene Slideshows untereinander machen, aber da ich ziehmlich neu in diesen sachen bin, funktioniert das nicht bei mir: Kanns du mir da vielleicht helfen oder sagen wie ich das machen muss, damit beide Slideshows funktionieren.
    Vielen Dank im voraus
    Marco

  8. Hi Marco,

    dazu müsste man das Javascript modifizieren. Da fehlt mir im Moment leider die Zeit sorry…. Im Endeffekt muss man dem Script beibringen, welche Klasse mit welcher Slideshow substituiert werden soll, bzw. mit keinen festen Klassennamen arbeiten.

    Viele Grüße,
    Florian

  9. Marco: Did you get it to work with multiple slideshows?

  10. In case anyone wants multiple image slideshows working on the same page, use this modified version of imgscroll.js

    https://gist.github.com/1245444

    Then in the HTML, instead of using ID for all the containers of the images and the gallery, switch those to CLASS. More specifically:

    imgscroll-content, imgscroll-legend, imgscroll-imgs, imgscroll-img

    All those should be CLASS instead of ID, and remember to edit the stylesheet accordingly (change “#” to “.”).

  11. I forgot I also changed the file jquery.touchSwipe-1.2.1.js so here’s my modified version:

    https://gist.github.com/1247327

    With this file, the one in the previous comment + those css/html changes you can have as many slideshows you want on a same page.

  12. Any news on using 2 or more slideshows on 1 page?

  13. Sorry, I totally missed the posts from ErneX…

  14. I just tried ErneX’s suggestion and it’s working fine. The only problem is that it skips every other image in the slideshow, e.g. when you are on slide #1 and swipe it, it goes to slide #3 etc.

  15. Just FYI: eaglejohn’s issue was including the imgscroll.js twice on the page, it just needs to be included once.

  16. hi ,
    i am using touch swipe and imgscroll.js on one of my application for ipad for picture slideshow. i have a weird problem. all the images have same dimensions, they do scroll and shown well on ipad simulator how ever they do not on the ipad device, instead a ? in a blue circle shown.
    do you have any idea??
    thanks,

  17. Thanks for the multiple slideshow hack, ErneX. It works like a charm on iPad 5.1 simulator, but when I run exactly the same code on an iPad 2 only the first slide shows, and the “scrolling” swipe moves to the next dossier rather than advancing through the slideshow. I’m stumped: any ideas?
    Thank you!

  18. I dont know about this… Testing

  19. Hi, I try to work on the demo on ios 4.3 xcode simulator and it works fine, but when I try to run it on a xcode 5.1 simulator it crash and doesn’t work. Any thoughts?

  20. Hey there, try to post it in the baker forums, sounds like a xcode-thing.

  21. I am new to developing web sites and I was wanting to know if having your website title relevant to your articles and other content
    really that critical? I notice your title, “Laker compendium – Designing digital publications in HTML5

  22. Observation – the Slideshow doesn’t work if you include it (div using csi:src= ) from another html file (like the footer is included in laker example).

    I used:

    The content of the my-body.html was included correctly – the slideshow looked to be rendered correctly with header and 1st image – but the swipe didn’t work. Once taking the content of my-body.html and pasting it directly to dossier html file -> the swipe started to work.

    Question: as I used the csi:src include often -> I wonder what other side-efefcts I can expect -> i.e. now I am fighting encoding issues and also images in columns are not resized properly so I wonder whether the fact that I have used this include technique can have any impact (but I guess that the problem iof curent issues I am facing is elsewhere).

  23. yeah the CSI:SRC is kind of strange sometimes, so I would suggest to use it carefully (also because it decreases performance). cheers

  24. I’m not sure why but this site is loading very slow for me. Is anyone else having this problem or is it a issue on my end? I’ll check back later and see if the рroblem
    still exists.

  25. If you want to get much from this paragraph then you have
    to apply such strategies to your won webpage.

  26. Even though your goal is just to lose 5 pounds in a week, you should be
    strict with what you do so as not to inadvertently undo all your hard work for vegetarian weight loss.
    For many working to lose weight, one failure is enough to get them off the path to success.

    Hence, broccoli is a must-add ingredient in your vegetarian weight loss diet.

Leave a comment, suggestion or question.

You must be logged in to post a comment.