Getting the slider lightbox to show mobile screenshots to a mobile; and desktop screenshots to a larger viewport

As this site is all about showcasing examples of my responsive website designs, I wanted users on a mobile device to see screenshots of (you guessed it) mobile sites, and desktop users to see screenshots of desktop sites. The previous post handles doing that for the thumbnails, but I wanted the same for the lightbox of images you see when you click that thumbnail (on the home or design pages).

Petr Marek has done an excellent job of integrating a very nice lightbox into the Slick Carousel (see previous post), and the instructions for having an array of images linked to a carousel slide work great, but would show the same screenshots to all users. With a little simple javascript I was able to adjust this so that different devices get shown different screenshots.

To do this required an appropriate class adding to the list item (thumbnail) at different viewport sizes so that different images could be triggered in the array:

HTML

<li class="esw-home-lightbox desk" data-min-width-1024='<a href="#"><img src="img/slick/design/mob-tab-esw.png" alt="East South West Landlords page"></a>'>
</li>

I’ve removed any classes not relevant to the lightbox for this post. If that ‘data-min-width’ part looks odd to you, it’s part of issuing the appropriate thumbnail (see the previous post).

JS

$(window).resize(function(){
var width = $(window).width();
if(width >= 1024){
$('[class*="-lightbox"]').removeClass('mob').addClass('desk');
}
else{
$('[class*="-lightbox"]').removeClass('desk').addClass('mob');
}
})

As you can see, I didn’t go crazy, just adding a ‘mob’ class for a portrait mobile screenshot to anything under 1024px, and a ‘desk’ class for a desktop screenshot to anything over 1024px. With those classes appropriately added, the addition code to supply the correct screenshots to the lightbox looks like this:


$('.esw-home-lightbox.mob').slickLightbox({
images: ['slick/mob-esw1.jpg', 'slick/mob-esw2.jpg'],
});
$('.esw-home-lightbox.desk').slickLightbox({
images: ['slick/desk-esw-1.jpg', 'slick/desk-esw-2.jpg'],
});

This of course is in addition to loading Slick and Slick-lightbox JS files, but that is amply covered in their own documentation.

For the next post I’ll take a look at including this WordPress blog within a hand-coded site; why I did that, how, and whether it was a good idea or not!

Leave a Reply

Your email address will not be published. Required fields are marked *