This question is not answered. Helpful answers available: 2. Correct answers available: 1.


Permlink Replies: 0 - Pages: 1 Threads: [ Previous | Next ]
AndreWolff

Posts: 2,268
Registered: 14-Dec-2007
Loading albums faster on mobile phones
Posted: 30 Aug 20, 20:16
 
  Click to reply to this thread Reply
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
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums