Horizontal on desktop und vertical on smartphone

[timnarr]

I wonder how I should use lazyload when the layout changes.
I have a horizontal image gallery on the desktop. And on Smartphone (under 500px) I have a vertical arrangement of images. How can I use lazyload to solve both circumstances. Currently it works for me only in the horizontal variant.

Maybe someone has a tip for me :)
Thank you

[montrothstein]

We use lazyload in a view that let's the user switch between horizontal (row across the top), vertical (column on the left), and full page (rows and columns that fill the page). This is obviously more than you need but hopefully you can glean the pieces you need from this. The following code snippets are copied from our source but I've edited them in places to attempt to simplify the example. My apologies if any of this is non-functional.

Our HTML has an outer <div> with another <div> around each <img>:

<div id='MyThumbnailDiv'>
    <div  class='thumbImgDiv'><img src='Images/spinner.gif' class='thumbnail' data-original='Images/MyImage1.jpg' /></div>
</div>

We are doing some other things like captions for the images and I don't recall if the <div> around the images is because of that or because of the horizontal/vertical switching.

Our CSS is as follows:

.thumbnailViewerHorz
{
    height: 150px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.thumbnailViewerVert
{
    width: 150px;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: normal;
}

.thumbnailViewerFull
{
    overflow-x: hidden;
    overflow-y: auto;
    white-space: normal;
}

.thumbImgDiv
{
    text-align: center;
    display: inline-block;
    width: 100px;
    vertical-align: bottom;
    padding: 10px;
    margin: 1px;
}

.thumbnail
{
    margin-left: 0px;
    margin-right: 0px;
}

Finally we use JavaScript (jQuery) to change the class and height:

function Vertical()
{
    $('#MyThumbnailDiv')[0].className = 'thumbnailViewerVert';
    $('#MyThumbnailDiv').css('height', '100%');
}

function Horizontal()
{
    $('#MyThumbnailDiv')[0].className = 'thumbnailViewerHorz';
    $('#MyThumbnailDiv').css('height', '');
}

function FullPage()
{
    $('#MyThumbnailDiv')[0].className = 'thumbnailViewerFull';
    $('#MyThumbnailDiv').css('height', '100%');
}

Now, having been dumped all of that on you what you may need is to simply set different attributes for a ThumbnailViewer class using @media rules. For example it might be as simple as:

<div class='ThumbnailViewer'>
    <img src='Images/spinner.gif' class='thumbnail' data-original='Images/MyImage1.jpg' />
</div>

@media screen and (min-width: 601px) 
{
    /* Horizontal */
    height: 150px;
    white-space: nowrap;
}

@media screen and (max-width: 600px) 
{
    /* Vertical */
    width: 150px;
    white-space: normal;
}

This would mean no JavaScript and obviously simplified CSS.

[timnarr]

Hi @montrothstein ,

thank you for your detailed answer. I really appreciate that.

I have a slightly different HTML structure and don't get your solution to work:

<div class="gallery">
<ul>
<li>
<img class="lazy" data-original=" " width="750" height="500">
</li>
</ul>
</div>

[montrothstein]

The CSS I gave you was missing the class selector, and therefore wouldn't apply. I couldn't get your <ul> <li> structure to work. However if you can remove the <ul> <li> elements then the followed (corrected and simplified) code should work.

Init LazyLoad with your gallery container:

      $(document).ready(function() {
          $("img.lazy").lazyload({
            container: $('.gallery')
            });
      });

Apply different CSS based on screen width. This is easy to test simply by resizing your desktop browser window. Note that the <img> dimensions will need to be applied in the CSS and not the HTML so that they can vary based on the screen width.

    /* Horizontal */
    @media screen and (min-width: 601px) 
    {
        .gallery
        {
            height: 500px;
        }

        img
        {
            width: 750px;
            height: 500px;
        }
    }

    /* Vertical */
    @media screen and (max-width: 600px) 
    {
        .gallery
        {
            width: 400px;
        }

        img
        {
            width: 400px;
            height: 267px;
        }
    }

The HTML is then very simple.

<div class="gallery">
    <img class="lazy" data-original=" ">
    <img class="lazy" data-original=" ">
</div>

Note there is no need for a <div> around each <img> and no need for a <br> after each <img>.

If you are unable to remove the <ul> <li> then I don't know the answer. There is probably some way to override the behavior of those elements to do what you want, there usually is, but I don't know what it is.