Menu icon Foundation
Clearing Lightbox delay and flickering problem

Hi, I have a problem with clearing lightbox using Foundation version 5.4.5.

There is a big delay showing the first image and when the next button is clicked the current image disappears briefly then is displayed again, resulting in a flicker, then after a few seconds delay the next image is displayed. I used firefox dev tools to check the GET requests on the next button press and it does not look right.

Any suggestions much appreciated.

Code:

<div class="row">
<div class="large-12 columns">

<ul class="clearing-thumbs small-block-grid-4" data-clearing>
  <li><a class="th" href="path/to/img1"><img src="path/to/img-th" width="300" height="225" alt="Thumb for img1 (4876 KB)"></a></li>
  <li><a class="th" href="path/to/img2"><img src="path/to/img-th" width="300" height="225" alt="Thumb for img2 (5484 KB)"></a></li>
  <li><a class="th" href="path/to/img3"><img src="path/to/img-th" width="300" height="225" alt="Thumb for img3 (4834 KB)"></a></li>
  <li><a class="th" href="path/to/img4"><img src="path/to/img-th" width="300" height="225" alt="Thumb for img4 (5120 KB)"></a></li>
  <li><a class="th" href="path/to/img5"><img src="path/to/img-th" width="300" height="225" alt="Thumb for img5 (4734 KB)"></a></li>
</ul>

</div>
</div>

            

         

Use case:

STEP 1 - Click first thumbnail - lightbox starts - big delay displaying first image

Firefox>Developer>Network tab reports:
GET request img2 200 OK
GET request img1 200 OK
>>>>>I assume foundation is pre-loading the next image into cache at this point but it downloads img2 first, then img1 so nothing is displayed on-screen until both images have loaded – which means there is a big delay

STEP 2 - Click the lightbox next button - img1 disappears briefly then is displayed again, resulting in a flicker, then after a few seconds delay the next image is displayed

Firefox>Developer>Network tab reports:
GET request img2 200 OK
GET request img3 200 OK
>>>>>Foundation seems to load img2 again unnecessarily, maybe I’m missing something but I would expect img3 and img4 to load at this point.

clearing lightboxslowflickercache

Hi, I have a problem with clearing lightbox using Foundation version 5.4.5.

There is a big delay showing the first image and when the next button is clicked the current image disappears briefly then is displayed again, resulting in a flicker, then after a few seconds delay the next image is displayed. I used firefox dev tools to check the GET requests on the next button press and it does not look right.

Any suggestions much appreciated.

Code:

<div class="row">
<div class="large-12 columns">

<ul class="clearing-thumbs small-block-grid-4" data-clearing>
  <li><a class="th" href="path/to/img1"><img src="path/to/img-th" width="300" height="225" alt="Thumb for img1 (4876 KB)"></a></li>
  <li><a class="th" href="path/to/img2"><img src="path/to/img-th" width="300" height="225" alt="Thumb for img2 (5484 KB)"></a></li>
  <li><a class="th" href="path/to/img3"><img src="path/to/img-th" width="300" height="225" alt="Thumb for img3 (4834 KB)"></a></li>
  <li><a class="th" href="path/to/img4"><img src="path/to/img-th" width="300" height="225" alt="Thumb for img4 (5120 KB)"></a></li>
  <li><a class="th" href="path/to/img5"><img src="path/to/img-th" width="300" height="225" alt="Thumb for img5 (4734 KB)"></a></li>
</ul>

</div>
</div>

            

         

Use case:

STEP 1 - Click first thumbnail - lightbox starts - big delay displaying first image

Firefox>Developer>Network tab reports:
GET request img2 200 OK
GET request img1 200 OK
>>>>>I assume foundation is pre-loading the next image into cache at this point but it downloads img2 first, then img1 so nothing is displayed on-screen until both images have loaded – which means there is a big delay

STEP 2 - Click the lightbox next button - img1 disappears briefly then is displayed again, resulting in a flicker, then after a few seconds delay the next image is displayed

Firefox>Developer>Network tab reports:
GET request img2 200 OK
GET request img3 200 OK
>>>>>Foundation seems to load img2 again unnecessarily, maybe I’m missing something but I would expect img3 and img4 to load at this point.