A
srcset is used to load small files to small mobile devices and large files with large images to large screens devices, it is already discusses in this forum.
But there is a simple way to display on small devices small slide files which can be applied in all skins:
Create your album for smart phones for example with 568x320 HDPI images. Save the result in for example your_site\FB_S upload it and save the project as FB_S.jap
Change now the image bounds to 2560x1440 HDPI images. Insert in the head-section a small script:
<script>
if (screen.width < 500) {
window.location = '../FB_S/index.htm';
};
</script>
With the
FancyBox skin, the
LightGallery skin, the
PhotoSwipe skin and the
Slide Show 4 skin you can do that by entering this code in the HEAD code field on the
Custom code /
Web page tab.
Save the result in for example your_site\FB_L upload it and save the project as FB_L.jap
That is all, to see this in action open
my Algarve album The images for small devices do show a blue background, while on larger displays you see a sand background.
In next example I made a dummy root album which even can be displayed for retina displays:
<!DOCTYPE html>
<head>
<script>
var pixelRatio = window.devicePixelRatio || 1;
if (screen.width < 500) {
window.location = "https://www.andrewolff.nl/SrcSets_FB_S/";
}
else if ( window.devicePixelRatio > 1.5 ) {
window.location = "https://www.andrewolff.nl/SrcSets_FB_hdpi/";
} else {
window.location = "https://www.andrewolff.nl/SrcSets_FB_L/";
}
</script>
</head>
<body>
</body>
</html>
For an album with folders, you can use next code in my skins:
<script>
if (screen.width < 500) {
window.location = absolutePath.replace("/Algarve/", "/Algarve_S/");
};
</script>
See
here for an example.
More information in the
skin manual
