The responsive thumbnail gallery for the PhotoSwipe and Slide Show 4 skin.

Up to version 2.3 of the Slide Show 4 skin for the jAlbum program, the thumbnails were displayed in an elastic table, were the thumbnails were reduced in size if the window size was reduced and enlarged if the window was enlarged.

As an example look at the next two screen-shots:

This shows the thumbnails of my Barcelona album on a monitor with a resolution of 1920x1080.

In the album settings we selected here a fixed-sape thumbnail layout of 9 columns and 10 rows, so that all 70 pictures were visible on the screen. The image bounds of the thumbnails was set at 240x160.

If we reduce the window width, the thumbnails will shrink:

This elastic design used in the PhotoSwipe and Slide Show 4 skin is based on the good old html table structure and is works fine on Android tablets, on the iPad and iPhone and on a PC with the Chrome and Safari Browsers. It is not supported by Firefox and by the Internet Explorer.

Try it yourself by opening my Barcelona album with the fixed number of thumbnails per row.

If we display this album on the small screen of an iPhone, the  thumbnail gallery shows as follows:

In the responsive design you can hide the theme image on small devices, what has been done here. You see here all thumbnails on the screen, but in rather small shape. 
You can enlarge the thumbnails somewhat by rotating the iPhone to landscape mode:

It looks better on an iPad:

Up to version 2.3 of the Slide Show  skin you could improve this only by defining in jAlbum a limited number of thumbnails per index page. For instance if we set the number of rows to 3 and the number of columns to 6, we get larger thumbnails on the iPhone:

To see the other thumbnails you have to swipe to the left or click the green right arrow.

In version 2.3.1 of the Slide Show 4 skin and in the newer PhotoSwipe skin, we introduced a second display mode, where the number of  thumbnails per rows is reduced if the area for the thumbnails is reduced.

We selected again a thumbnail layout of 9 columns and 10 rows, and  image bounds of the fixed-shape thumbnails of  120x80.

If we now reduce again the window width, we see first that the number of thumbnails per row is reduced and finally you get the next display of 4 thumbnails per row:

On an iPhone this album looks as follows:

Use the area on the sides of the thumbnails to shift the thumbnails up or down with your finger.

On an iPad it looks as follows:

Try it yourself by opening my Barcelona album with variable number of fixed-shape thumbnails per row. The selected thumbnail image size is in this example 1000x100.

This way of presentation is in particular very useful if you have an album with a very large number of pictures which you like to present in one galery. A good example of such an album is my Nepal album, where also filters are used to create nice borders.

If an album contains also folder albums, the thumbnail folder icons are now displayed in a second table of  thumbnail folder icons after the slide picture thumbnails of the top album. However it is the responsibility of the album creator that the folders are located after all normal images in the jAlbum Explore. 

As you can see in the screen-dump of the Index page settings above, you can select the border color of these  thumbnail folder icons.

Click here  for an example of an album with folders with a variable number of thumbnails per row and thumbnails of different sizes and click here for the same album with a gallery of variable thumbnails per row but now with fixed-shape thumbnails.

The new implementation did not use html table tags, only div tags combined with CSS3 media queries. It was based on the article of  Joshua Johnson How to build a Responsive Thumbnail , but in version 2.3.2 it is replaced by a design based on a table, as is also used in the Mirage skin of Chris Twist. This gives a nicer symmetrical thumbnail gallery which works fine on Android tablets, on the iPad and iPhone and on a PC with all browsers including Firefox and  Internet Explorer. 

The table design is in version 2.4.2 of the Slide Show 4 skin  replaced by a <div> structure which gives equal spaces between the thumbnails and the number of thumbnails per row depends on the available screenspace on a row.

In version 2.6 of the Slide Show 4 skin and in the PhotoSwipe skin is a new thumbnails design implemented. This design is implemented without <table> tags. The table is constructed of floating <div>s.

So we have now 3 types of thumbnails presentations:

1. An elastic thumbnails table which uses <table> tags. Supported by all mobile devices but on a PC Firefox and Internet Explorer do not support the resizing of the thumbnails. For an example click here. 
2. An elastic thumbnails table which does not use <table> tags. Supported in all browsers both on mobile devices and PCs. To see the same album in that design click here. To see an example with folders, see my Texel album. 
3. A responsive design where the size of the thumbnails does not change, but the number of thumbnails per row may change if the window/screen size is different. Supported in all browsers both on mobile devices and PCs. To see the same album in this design click here

For method 1 and 2 fixed-shaped thumbnails are mostly used, but in method 3 I use most times thumbnails size 1000x100 wit check-box 'Fixed-shape thumbnails' cleared.

You can choose the type of thumbnails gallery on the Slide Show 4 Index page settings:

Choose type 3 gallery by setting the 'Variable number of thumbnails per row' check-box. If that check-box is cleared an elastic table is used for the gallery. If check-box 'Don't use <table> tags is cleared, the classical html table structure is used in gallery type 1.

Click here  to download and install newest version of the Slide Show 4 skin and click here to open the Slide Show 4 skin manual.

How to show panoramic pictures with the Slide Show 4 skin, the FancyBox skin or the PhotoSwipe skin?

Both the Slide Show 4 skin, the FancyBox skin and the PhotoSwipe skin makes it possible to expand slides of panoramic pictures:

If you click the gray expand button above this picture, the image is enlarged, so that the whole window height is filled by the picture:

You can scroll horizontally through the picture with the mouse on a PC or with your fingers on a tablet or mobile phone.

To try it yourself, open  my Terschelling album and click next the folder West-Terschelling and click there on the 25th thumbnail to open the panoramic picture shown above.
See also this album with only panoramic pictures.

Normally I use as image bounds for the slides HD quality 1920x1080. But this gives for panoramic pictures which are expanded to the screen height sometimes a bad quality image. So before I create the final version of an album, I open each panoramic image in jAlbum's Explorer next I click in the right panel on the triangle before Panoramic image select depending on the type of panorama the 'Spherical panoramic image' check-box or the 'Cylindrical panoramic image' check-box. In case you made a 360° cylindrical panorama, you should also select the '360° panorama'.

You should see a window like this:

Next clear check-box 'Progressive mode' on Album Setting / Images /Advanced:

If you don't do this, the panoramic pictures can't be displayed on an iPhone or iPad.

Next (re-) create the album by selecting 'Make All' (Shift+F9), all slides will be made in the defined default size (1920x1080 in my case), except the panoramic picture which has been edited. The height of the panoramic picture  is set to 1080 pixels; the width depends on the aspect ratio of the panoramic picture, but  if the width exceeds 30000 pixels, it is limited to 30000 and the height is made smaller as 1080 pixels. In the example above, the width is 6791 pixels.

I stitch my panorama photo's with program autopano pro or with Lightroom 6, which makes it also possible to generate 360° panoramas. As an example go to my West-Terschelling folder as indicated above and click on the 3th thumbnail. Next you see the whole compressed panoramic picture:

To expand it, click the 360Cities button and next the expand button in the right corner. The whole screen will be filled with your panorama and you can scroll through the panorama with the mouse or with your fingers.

If you stitch this with program autopano pro  it is imprtant that you see that the range in the detected panorama is 360°:

In the rigth panel you should see behind “FOV” 360.00

After you created the panorama you can upload it to the 360Cities site. Before you can do that you should create an account on 360Cities.

Once the panorama is uploaded and published, click on the View button in your profile of published images and copy the URL of the panorama to the clipboard.

Next open edit image window in jAlbum for the corresponding picture and click the Link arrow in the right panel:

Next past the URL of the panorama into the URL field of the link panel and check check-mark "Link to an external panorama picture page, ...".

Finally create the album.