How to add a class into php array for Supersized plugin

Question

I'd like to add class="lazyload" into thumbs (and not images) generated by this PHP block that allows Supersized plugin (http://buildinternet.com/project/supersized/) to detect the images and thumbs automatically from folders, but I can't figure out how to do it:

<?php
$directory = "../../photo-locations/riviera/photo/";
$directory_thumbs = "../../photo-locations/riviera/thumb/";
$images = glob($directory . "*.jpg");
$images_thumb = glob($directory_thumbs . "*.jpg");
$images_final = array_combine($images,$images_thumb);
$number = count($images);
$start = 0;
foreach($images_final as $image => $key)
{ echo "{image : ' $image ', title : 'Riviera' , thumb : '$key' }";
if ($start < $number - 1)
echo ", ";
$start = $start + 1;
}
?>

Supersized plugin is a fullscreen image gallery that unfortunately do not provide lazy loading of thumbs. I'm also trying to find a good lazy-loading script that can handle images (thumbs in this case) just with a class and not in conjunction with a data-src or data-srcset attribute - which are not used by this plugin. Please, anyone have any idea? Thanks!

Michael Laffargue Michael Laffargue · Accepted Answer · 2015-06-01T14:28:49

You could do that using JQuery. It seems all the thumbnails are prefixed by thumb:

<li class="thumb1">
  <img src="http://.../img1.jpg">
</li>
<li class="thumb2">
  <img src="http://.../img2.jpg">
</li>

So you could easily do something like this :

$("li[class^='thumb']").addClass( "lazyload" );

This could work for your lazyloading plugin too, imagine the function to be called is lazyload()

You could :

$("li[class^='thumb']").lazyload()

And then you launch/initialize your lazy loading plugin. But are you certain the Supersized plugin won't load its own photos beforehand?

If not working your best shot would be to :

Extend the plugin (if possible)
Modify directly the library (beware if you upgrade the version)

How to add a class into php array for Supersized plugin

1 Answers