Example of an embedded PhotoSwipe skin album

In the PhotoSwipe skin it is possible to hide the top row of buttons on the index page and to hide the album title. If you do that and do not use an album description, link buttons and set check-mark 'Remove footer code', you get an album with shows only a gallery of thumbnails as you see below. This example uses next Image bounds: Thumbnails 133x133, Images 1920x1920.

It is possible to extend the PhotoSwipe index.html too a full webpage by entering this text and html code in include file page-header_2.inc and the text below the thumbnails in file page-footer_2.inc, with possible extra links and css code in page-header_0.inc . Click here to see an example of a website made in that way and click here to see a describtion of the include files for your extra code.

If you have already a webpage where you like to add a thumbnails gallery from a PhotoSwipe album, make the album in the same directory as your existing webpage and copy a part of the generated code to your webpage as you see here:

Corte do Peso
Malhada Peres
Malhada Peres
Portal_PR2_21 01 08_0948
WW1_D3_09 01 08_0547

You have to copy 3 sections, section 1 to the header section, where you merge it with the header code of your website (copy minimal the lines starting with '<meta name="viewport"' and '<link href="res/common.css"'), section 2 to the body where you like to see the thumbnails and section 3 to the end of your website. If this is ready, you can delete the index.html file in the directory of your website, but you have to keep the other files.

Instead of following this copy procedure, it is generally recommended to add the extra code in include files, because in that case it is easier to add pictures to the album or regenerate the website with a new version of the PhotoSwipe skin. See the the Jahn Foto example test website I made in that way. This website contains a folder album, the photos of each artist are in in his own folder, so it is easy to add a new artist by adding a new folder and next you rebuild the website by clicking the Make button in jAlbum.

Click on a thumbnail to open the corresponding slide page. The captions (comment) below the images are optional. Optionally you can also display filenames below the thumbnails or add shadows to the thumbnails.

It is possible to select the same page colors for the index page and the slide page or use different colors as is done in this example.

In this example the size of the thumbnails will be adapted if you enlarge or reduce the window size, because an elastic table of thumbnails has been selected, see image 'Index page / Thumbnails'. If you select on the Index page / Thumbnails option 'Table with variable # thumbnails / row', the size of the thumbnails will not change if you enlarge or reduce the window. Click here to see an example of a website which such a type of embedded PhotoSwipe album.


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