The story of the FancyBox skin

By André Wolff

I was 30 years active in the software development for Philips in the Netherlands.

To keep my brains active, I spent after my retirement still some time in software development, but now for my hobbies: digital photography, playing Bridge, walking with GPS and investing. Some of my programs can be downloaded from my website.

After I discovered jAlbum, I used initially for the presentation of my pictures the Slide Show 2 skin, developed by David Ekholm. After I asked him add the possibility to show panoramic pictures and to display GPS tracks and height profiles to that skin, he suggested that I could derive a new skin from his Slide Show skin with the features I proposed.

That was the start of the multi page Improved Slide Show 3 skin. I had no experience at all with JAVA or Javascript, but with the help of a number of people of the jAlbum forum, in particular with the advices of Jeff Tucker, I made the single page html5 compliant Slide Show 4 skin with improved slide show transitions implemented with jQuery.

In 2016, one of the users of the Slide Show 4 skin did ask me if I could replace the slide page by the the PhotoSwipe light-box developed by Dimitry Semenov. This library did use CSS transitions and is very well suited for mobile device. That was the birth of the PhotoSwipe skin.

Because I make a lot of landscape pictures with very different width/height ratios, I searched a method to display these in a nice way on the index page. I found an excellent solution, the Justified-Gallery developed by Miro Manninho. I added the Justified-Gallery both to the Slide Show 4 skin and to the Photoswipe skin.

Although the PhotoSwipe skin was appreciated by many users, the original creator of the PhotoSwipe skin was not very active in implementing new features and the slide show had no slide transitions. So after a new Internet search I discovered the fancyBox library which implements a similar light-box as the PhotoSwipe library, but with a much better slide show and good support for all types of videos. The developer of this library, Janis Skarnelis is very keen to implement suggestions for improvements and he is very fast in answering questions. So I implemented the FancyBox skin, with a slide page based on the fancyBox library and with the same index page as the PhotoSwipe skin, so it includes also the Justified-Gallery. In 2021 the developer of the PhotoSwipe light-box was again active with a nicely implemented version 5, so I updated the PhotoSwipe skin with this new version.

The responsive FancyBox skin is well suited for small mobile devices with touch screens, but also for PCs with large monitors. It can display the location of the photos both in Google Maps and in Google Earth, together with a possible GPS track and the corresponding height profile of your tour. This is of course only possible if an image contains GPS coordinates. You can fetch these coordinates from the GPS track with my program EditPhotoInfo or with the Adobe Lightroom program and various other programs and you can do it manually in the jAlbum location window. To see the GPS possibilities of this skin, see this album which is also displayed below or visit my Algarve walking site, which shows about 200 walkings in Algarve (Portugal).

Your (360°-) panoramic pictures can be displayed is special cylindrical or spherical viewers which uses the full height of the screen. The slide page displays an optional sideshow with one of 7 possible slide transitions.

The viewer can select on a preferences page the type of transition he/she likes to see and the viewing and transition time. The viewer can also change the button size and the font size, which is useful for small devices like an iPhone and in case you have troubles reading small letters. The viewer can also decide here to open the ligth-box always in full screen mode and if the album contains background music he/she can decide to start the music automatically if the album is opened.

Navigation and control is possible via buttons, via the keyboard and mouse-wheel on a PC and via one finger swipes on the iPhone or iPad and other touch screen devices. The buttons at the top of the index page are optional and can be hidden or displayed by clicking the theme image or the album title. Navigation on the slide page: Swipe left / right to the next or previous image, spread to zoom in, swipe up or down to close the slide page and return to the index page. FancyBox can handle large image descriptions on the slide page: the description can be displayed below the image with a 'more info' text-link which displays a longer description below the image or in a new modal window. It is also possible to display long descriptions in a side panel right of the image.

You can add your own code at several places in the album code via include files or on the Web page tab. This allows you to add simple Google Analytical code or Advertisement code or Translation code, but it allows you also to make complete websites as you can see in this simple example and this website with may albums. The slide page can be embedded in a web-page without the use of an iframe or JSON data, as you see above. Another example with explaining text is given here. That is also possible with the thumbnails page by coping code in your website as you can see here, but you can display it als in a responsive iframe as you see at the end of this page.

All features of the Fancybox skin are demonstrated in the sample album and explained in the user manual. This note has also been made with the FancyBox skin, where this text is fetched from file page-header_embed.inc.

Help   Close
Font size:
Button size:
Viewing time:
Transition effect: in
 Use full screen for a picture:

Lightbox

Lightbox

Click to show or hide the buttons
We took the train to Klosters-Dorf and went up there with the Madrisabahn. Next we walked the signposted large circular walk.
Download GPS track Route in Google Maps Route in Google Earth

Close
Previous slide (left arrow key)
Close window and show index (up arrow key)
Next slide (right arrow key)