SwipeView: Mobile Gallery with Touch Control on Smartphones and Tablets
JavaScript and galleries, what do you associate? I associate the word plethora. Though it's not easy for new projects to impress, SwipeView does. Because SwipeView supports touch control, it is ideal for usage on mobile devices such as tablets and smartphones. You navigate through the galleries with swipes. Non-mobile devices imitate the swipes with mouse actions. The project even features classical navigation concepts.
[caption id="attachment_72640" align="alignnone" width="550"]
Gallery example for SwipeView[/caption]
SwipeView is a script, that comes stand-alone and doesn't depend on one of the usual frameworks such as jQuery or MooTools. Unfortunately integration is a little out of standard. Embedding the script doesn't do the work, you'll have to include some lines of additional JavaScript also. This is necessary to get the functionality running. The contents are defined through JavaScript too.
The last point makes for some unusual experience: You don't define the gallery-content using HTML but do so using JavaScript. It's not exactly complicated nor difficult, but not the usual way to do it.
Gallery example for SwipeView[/caption]
SwipeView is a script, that comes stand-alone and doesn't depend on one of the usual frameworks such as jQuery or MooTools. Unfortunately integration is a little out of standard. Embedding the script doesn't do the work, you'll have to include some lines of additional JavaScript also. This is necessary to get the functionality running. The contents are defined through JavaScript too.
The last point makes for some unusual experience: You don't define the gallery-content using HTML but do so using JavaScript. It's not exactly complicated nor difficult, but not the usual way to do it.
Markup Of Navigation and Pictures, controlled by JavaScript
The HTML part of the gallery is rather lucid. There is one container getting filled with content by JavaScript. And there is one list to enable navigating the gallery:<div id="inhalt"></div>
<ul id="nav">
<li id="prev" onclick="gallery.prev()">-</li>
<li onclick="gallery.goToPage(0)"></li>
<li onclick="gallery.goToPage(1)"></li>
<li onclick="gallery.goToPage(2)"></li>
<li onclick="gallery.goToPage(3)"></li>
<li id="next" onclick="gallery.next()">+</li>
</ul>
In addition to embedding the SwipeView library in the head of your site, you have to integrate an additional JavaScript snippet right after the HTML elements in the body-section. That way the event listener touchmove, enabling touch control, is called and the gallery-object is defined:
document.addEventListener("touchmove", function (e) { e.preventDefault(); }, false);
var gallery, el, i, page, dots = document.querySelectorAll('#nav li'), slides = [
{
img: "pic1.jpg",
width: 300,
height: 200,
desc: "description"
},
… ];
gallery = new SwipeView('#content', { numberOfPages: slides.length });
Using the array slides all pictures in the gallery get listed. Next we output the content via HTML. The function createElement() creates the corresponding HTML elements, necessary for the presentation of the pictures. The layout is controlled using CSS.
If you're the lazy kind you could just check out the sample source code on the SwipeView page. After establishing the HTML, the gallery is ready for prime time.
Conclusion: SwipeView is nice to have. Main downside is the necessity to manually define this and that, even custom coding can't be avoided. On the other hand this is what makes SwipeView extremely flexible. SwipeView runs on iPhones from version 4, on iPads from version 3.2 and on Android from 2.3 onwards. Needless to say that modern desktop browsers are supported anyway..
(dpe)