Borders and frames with the FancyBox, the Slide Show 4 and the PhotoSwipe skin

I present the pictures of our trips with the jAlbum program and the Slide Show 4 skin, the FancyBox skin or the PhotoSwipe skin which I designed for that program. How I do this has been described here (in Dutch). This note describes how you can present the photos with borders and frames.

With the eXtended Border filter available in the jAlbum program. It is possible to make borders and frames around pictures in all skins, so also in my Slide Show 4 skin, in my FancyBox skin and in my PhotoSwipe skin. With the PhotoSwipe skin this is the only way to get borders around the slide image.

Unfortunately a graphical interface to the eXternal Border filter is missing in the jAlbum program. For each filter you like to use, you have to add a user variable via Settings / Advanced / User variables:

The filters should get the names filter1, filter2 etc. No spaces are allowed.
The text in the values section has been described in the jAlbum filters manual. For the describtion of the colors you can use the HTML Color names.

If you like to apply borders and / or filters both for a Slide Show 4 index page (parameter thumbnails) and for the slide pages (parameter closeups), it is advised to use 2 filters as showed above.

After you filled the User Variables, press the "Rebuild all" to have the album generated and filters applied If the building is ready, the index page with the above settings look as follows:

and a slide looks as follows:

Another example:

filter1 class=XBorderFilter bgCol=#8fa1b9  boWidth=8 boCol=ivory  frWidth=5 frCol=Khaki shWidth=8 clip=15  shCol=Black thumbnails

filter2 class=XBorderFilter bgCol=#8fa1b9  boWidth=20 boCol=ivory  frWidth=10 frCol=Khaki shWidth=15 clip=25 shCol=Black closeups

Click here to see the result on my jAlbum website. 

In the Slide Show 4 and PhotooSwipe skin settings for the index page you should set all border widths to 0:

You should do that also for the Slide Show 4 skin slide page:

But this is not required for the PhotoSwipe slkide page settings, because the PhotoSwipe skin shows the slide images always without borders.

If you like to select a real shadow, use the following user variables:

filter1	class=XBorderFilter bgCol=White frWidth=6 frCol=ivory frTrans=0 clip=80 shWidth=50 shDrop=norm shCol=Black closeups
filter2	class=XBorderFilter bgCol=White frWidth=3 frCol=ivory frTrans=0 clip=20 shWidth=15 shDrop=norm shCol=Black thumbnails

This gives the following index page:

and as slide page:

The parameter Clip=80 defines here the rounded corners. To see this album on the web, click here.

You can use this too in embedded albums, see my homepage.

Click here to see an example of a small frame around the slides and thumbnailswith a shadow. It has been made with the following User Variable:

filter1	class=XBorderFilter bgCol=#3d3f3e frWidth=3 frCol=White shWidth=15 shDrop = hard shCol=silver clip = 80 closeups
filter2	class=XBorderFilter bgCol=#3d3f3e frWidth=2 frCol=White shWidth=8 shDrop = hard shCol=silver clip =14 thumbnails

The background color bgCol is selected with the color picker in PhotoShop Elements, to match the color of the Gray-Textile background used in the Slide Show 4 skin.

My last example, see here, shows an album with borders and frames made with the following user variables:

filter1	class=XBorderFilter bgCol=#8fa1b9 boWidth=8 boCol=ivory frWidth=5 frCol=Khaki shWidth=8 clip=15 shCol=Black thumbnails
filter2	class=XBorderFilter bgCol=#8fa1b9 boWidth=20 boCol=ivory frWidth=10 frCol=Khaki shWidth=15 clip=25 shCol=Black closeups

The background color bgCol is again selected with the color picker in PhotoShop Elements, to match the color of the used background photo. 

However with the newest versions of the skins it is also possible to create shadows with the skin settings, see this album. Create shadows by checking check-mark 'Show shadows on the index page' on the Index page / General tab and 'Show shadows on slide page' on the Slide page tab.

You can download the Slide Show 4 skin here and the PhotoSwipe skin here. Read the user manual for both skins here. The jAlbum program can be fetched here.