Swap Background

Allows you to set an alternative background image that will appear when the panel is opened. The alternative image must be added in a separate img element and it must be given the as-background-opened class.

<div class="as-panel">
    <img class="as-background" src="path/to/image1.jpg"/>
    <img class="as-background-opened" src="path/to/alt_image1.jpg"/>
</div>

<div class="as-panel">
    <img class="as-background" src="path/to/blank.gif" data-src="path/to/image2.jpg" data-retina="path/to/image2@2x.jpg"/>
    <img class="as-background-opened" src="path/to/blank.gif" data-src="path/to/alt_image2.jpg" data-retina="path/to/alt_image2@2x.jpg"/>
</div>

<div class="as-panel">
    <img class="as-background" src="path/to/blank.gif" data-src="path/to/image3.jpg" data-retina="path/to/image3@2x.jpg"/>
    <a href="http://bqworks.com">
        <img class="as-background-opened" src="path/to/blank.gif" data-src="path/to/alt_image3.jpg" data-retina="path/to/alt_image3@2x.jpg"/>
    </a>
</div>

As you can see, the alternative image can be lazy loaded and can have a high resolution version as well.

Please note that the size of the 'opened' image should be equal or bigger than the size of the default image, in order to prevent parts of the default image to be visible behind the 'opened' image when the panel is opened.

This module is showcased in example2.html.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk