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.

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
Thumbnails code to be copied
PhotoSwipe General settings
Index page / General
Index page / Thumbnails
Index page / Footer
Slide page

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.

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.