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:
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.
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.
