How to Make an AMP Lightbox with Gallery Features
Updated on 14 May
In posting content, many use images to make them more attractive. Or maybe using image media as a medium to make it easier to understand the contents of the article. And, maybe also as a media gallery.
Often many blog visitors who preview or enlarge images to make it look clearer, especially images that have detailed parts. So they have to open the image on the tab.
Using the lightbox image can be enlarged. There are many tutorials for creating a non-amp lightbox and many plugins for creating lightboxes.
On the project there are three types of lightbox components, including:
Here will discuss the tutorial on creating a lightbox using the amp-lightbox-gallery. Why choose amp-lightbox-gallery, because its use is easy and not complicated, and there are some nice features.
The first step is to install the amp-lightbox-gallery script.
In the post, enter HTML mode after searching for the amp-img element (which is used as a lightbox), so that when the image is in a large state it won't run away then set the url parameter first.
On the scale or S [number] parameter change to s0 for the original size or s1600 for a maximum of 1600px. Then in that element add the lightbox attribute.
Example:
Preview first, to check whether it works. On the preview page, try clicking the image that has been made a lightbox. If successful, a lightbox will appear.
Next, how to create a lightbox gallery. If the post is embedded with several images, you can create a gallery in the post.
In other media images set the same way as above, change the scale url parameter and add the lightbox attribute to amp-img.
Not only that the amp lightbox gallery component can also be used to create several different lightbox groups. You just need to make different contents of the lightbox attribute.
For example in the first group image you use the lightbox="grub1" attribute for all the images that will be displayed in the first group. then on the second grub you use atrinut lightbox="grub2". for all the images that will be displayed in the second group.
The point is that the contents of the lightbox attribute must be different for each group. It is also possible for the first lighbox not to be filled.
Or just want to display one image in the article, but when it opens, the lightbox displays many images. The method is the same, you only need to hide images that are not displayed.
After giving the lightbox attribute to all images. You create the <span class="overlay-text">Lihat Galeri Foto</span> in the media image displayed. Then create a div tag and give the hidden attribute. And put the image you don't want to display into the div element.
Examples like this:
It is important not to forget to save the following css to position the text Lihat Galeri Foto.
Not only can you display images in the lightbox. Images can also be given a description, which later the description will appear at the bottom of the image.
There are two ways you can try, using figcaption and aria-describedby.
Figaption is a child element of a figure, meaning a figure and figcaption in a series. Create a series of figures first, then place the image media and make the description in figcaption.
Example:
Aria-describedby is an attribute, which is later used to call text from other elements. To use it add the attribute aria-describedby="" to the amp-img element and create a div element (then given the id="") attribute.
Then fill the div element with the image description, and the contents of the aria-described attribute and id with the same contents.
Example:
Often many blog visitors who preview or enlarge images to make it look clearer, especially images that have detailed parts. So they have to open the image on the tab.
Using the lightbox image can be enlarged. There are many tutorials for creating a non-amp lightbox and many plugins for creating lightboxes.
On the project there are three types of lightbox components, including:
- amp-lightbox, displays html elements with full screen.
- amp-image-lightbox, displays the lightbox effect for the specified image.
- amp-lightbox-gallery, displays images in lightbox gallery mode. Users can interact to look at pictures more comfortably.
Here will discuss the tutorial on creating a lightbox using the amp-lightbox-gallery. Why choose amp-lightbox-gallery, because its use is easy and not complicated, and there are some nice features.
The first step is to install the amp-lightbox-gallery script.
<script async="async" custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>How to Use Amp Lightbox Gallery
In the post, enter HTML mode after searching for the amp-img element (which is used as a lightbox), so that when the image is in a large state it won't run away then set the url parameter first.
On the scale or S [number] parameter change to s0 for the original size or s1600 for a maximum of 1600px. Then in that element add the lightbox attribute.
Example:
<div class="separator">
<amp-img lightbox alt="Menu AMP Lightbox gallery" data-original-height="654" data-original-width="1360" height="306" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6XdwMj8s8nNThnMfu-_WWSq7mwAo3VG2eFtk2UTsA4cvgvtgHeVjEV8IGo5vERuOm1BSmSTaHNpooZp-MMOPiKs9vj_rOJTIkoWLZAEJD-qlW0MWiYWDc1VAmAvm1gK9stFDWUlUARJY/s0/Lightbox+Galeri.png" title="Menu AMP Lightbox gallery" width="640"></amp-img>
</div>Preview first, to check whether it works. On the preview page, try clicking the image that has been made a lightbox. If successful, a lightbox will appear.
Creating a Lightbox Gallery
Next, how to create a lightbox gallery. If the post is embedded with several images, you can create a gallery in the post.
In other media images set the same way as above, change the scale url parameter and add the lightbox attribute to amp-img.
<div class="separator">
<amp-img lightbox alt="AMP Lightbox gambar" data-original-height="654" data-original-width="1360" height="306" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUk6sHg24B7clYmUoYiYNyi1lHPjDIkkIDjw6uaqFEDn55NM5jeOO_1TBkFv966_d0Au0T-sV1e2ZGisM8vTFMhFF3wZ9V5i0VgaS0zye4lelbVuI2Ak1Z32Q7211epkRHb_QTfPqHpn4/s0/AMP+Lightbox.png" title="AMP Lightbox gambar" width="640"></amp-img>
</div>
<p>paragraf 1</p>
<div class="separator">
<amp-img lightbox alt="Menu AMP Lightbox gallery" data-original-height="654" data-original-width="1360" height="306" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6XdwMj8s8nNThnMfu-_WWSq7mwAo3VG2eFtk2UTsA4cvgvtgHeVjEV8IGo5vERuOm1BSmSTaHNpooZp-MMOPiKs9vj_rOJTIkoWLZAEJD-qlW0MWiYWDc1VAmAvm1gK9stFDWUlUARJY/s0/Lightbox+Galeri.png" title="Menu AMP Lightbox gallery" width="640"></amp-img>
</div>
<p>paragraf 2</p>
<!-- etc--> Make More Than One Lightbox
Not only that the amp lightbox gallery component can also be used to create several different lightbox groups. You just need to make different contents of the lightbox attribute.
For example in the first group image you use the lightbox="grub1" attribute for all the images that will be displayed in the first group. then on the second grub you use atrinut lightbox="grub2". for all the images that will be displayed in the second group.
<div class="separator">
<amp-img lightbox alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn62-5DOvAAfyBvOtrF46eI6jSjrG3wOBNRZwaGkYFTPyGmsMK6EiijPpELfXO3SwSuTkJPAs5EXQ2kEpfhIrj2giXQK_Kt1wdJg9q3XFP4p3GKC_EA8Xd6KjEuPoVVeHDwVFzlQ6Xem0/s0/Surat+PIN+adsense+%25283%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
</div>
<p>paragraf 1</p>
<div class="separator">
<amp-img lightbox alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiahNh3mKiOrjo2gCWJseuDVA80s2g7N0Xw8-mSXOdo2JaONyXGDobLDgkrRZ5JakX0JwGt_d7sRMi1USwm784bzjpIKrvv4fkigdtvxG5W8OZs5A7LCixco1URtKYdQqSIWqfaPrUyHmQ/s0/Surat+PIN+adsense+%25282%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
</div>
<p>paragraf 2</p>
<!-- etc -->
<div class="separator">
<amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn62-5DOvAAfyBvOtrF46eI6jSjrG3wOBNRZwaGkYFTPyGmsMK6EiijPpELfXO3SwSuTkJPAs5EXQ2kEpfhIrj2giXQK_Kt1wdJg9q3XFP4p3GKC_EA8Xd6KjEuPoVVeHDwVFzlQ6Xem0/s0/Surat+PIN+adsense+%25283%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
</div><p>paragraf 1</p>
<div class="separator">
<amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiahNh3mKiOrjo2gCWJseuDVA80s2g7N0Xw8-mSXOdo2JaONyXGDobLDgkrRZ5JakX0JwGt_d7sRMi1USwm784bzjpIKrvv4fkigdtvxG5W8OZs5A7LCixco1URtKYdQqSIWqfaPrUyHmQ/s0/Surat+PIN+adsense+%25282%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
</div><p>paragraf 2</p>
<!-- etc -->The point is that the contents of the lightbox attribute must be different for each group. It is also possible for the first lighbox not to be filled.
Just show one image to open the gallery
Or just want to display one image in the article, but when it opens, the lightbox displays many images. The method is the same, you only need to hide images that are not displayed.
After giving the lightbox attribute to all images. You create the <span class="overlay-text">Lihat Galeri Foto</span> in the media image displayed. Then create a div tag and give the hidden attribute. And put the image you don't want to display into the div element.
Examples like this:
<div class="separator">
<amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmiLRrlzcP-x_BvsUUTY0DNI0sZ5_yFVgqVWhs1z2z7iu_RhZebC57pfhwOjIw2KHQYj6x2rHvZ0DKcF2ltJezm8jPHgXIDnLgcJhC7FD_FO1CVQPAJUgTa3v2Q0AeOqOuWyiAhEJIrDE/s0/Surat+PIN+adsense+%25281%2529.jpg" title="Surat PIN adsense" width="640">
<span class="overlay-text">Lihat Galeri Foto</span> </amp-img>
<div hidden>
<amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn62-5DOvAAfyBvOtrF46eI6jSjrG3wOBNRZwaGkYFTPyGmsMK6EiijPpELfXO3SwSuTkJPAs5EXQ2kEpfhIrj2giXQK_Kt1wdJg9q3XFP4p3GKC_EA8Xd6KjEuPoVVeHDwVFzlQ6Xem0/s0/Surat+PIN+adsense+%25283%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
<amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiahNh3mKiOrjo2gCWJseuDVA80s2g7N0Xw8-mSXOdo2JaONyXGDobLDgkrRZ5JakX0JwGt_d7sRMi1USwm784bzjpIKrvv4fkigdtvxG5W8OZs5A7LCixco1URtKYdQqSIWqfaPrUyHmQ/s0/Surat+PIN+adsense+%25282%2529.jpg" title="Surat PIN adsense" width="640"></amp-img>
</div>
</div>It is important not to forget to save the following css to position the text Lihat Galeri Foto.
.overlay-text{position:absolute;bottom:20px;left:20px;z-index:1;pointer-events:none;background-color:rgba(0,0,0,.3);color:#fff;padding:5px
15px;border-radius:2px;font-size:1em}Adding Descriptions to Lightbox Images
Not only can you display images in the lightbox. Images can also be given a description, which later the description will appear at the bottom of the image.
There are two ways you can try, using figcaption and aria-describedby.
Using figcaption
Figaption is a child element of a figure, meaning a figure and figcaption in a series. Create a series of figures first, then place the image media and make the description in figcaption.
Example:
<figure class="separator">
<amp-img lightbox="adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmiLRrlzcP-x_BvsUUTY0DNI0sZ5_yFVgqVWhs1z2z7iu_RhZebC57pfhwOjIw2KHQYj6x2rHvZ0DKcF2ltJezm8jPHgXIDnLgcJhC7FD_FO1CVQPAJUgTa3v2Q0AeOqOuWyiAhEJIrDE/s0/Surat+PIN+adsense+%25281%2529.jpg" title="Surat PIN adsense" width="640">
<figcaption>
Surat PIN adsense
</figcaption>
</figure>Using aria-describedby
Aria-describedby is an attribute, which is later used to call text from other elements. To use it add the attribute aria-describedby="" to the amp-img element and create a div element (then given the id="") attribute.
Then fill the div element with the image description, and the contents of the aria-described attribute and id with the same contents.
Example:
<div class="separator">
<amp-img lightbox="adsense" aria-describedby="pin-adsense" alt="Surat PIN adsense" data-original-height="961" data-original-width="1600" height="384" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmiLRrlzcP-x_BvsUUTY0DNI0sZ5_yFVgqVWhs1z2z7iu_RhZebC57pfhwOjIw2KHQYj6x2rHvZ0DKcF2ltJezm8jPHgXIDnLgcJhC7FD_FO1CVQPAJUgTa3v2Q0AeOqOuWyiAhEJIrDE/s0/Surat+PIN+adsense+%25281%2529.jpg" title="Surat PIN adsense" width="640">
</div>
<div id="pin-adsense">Pin Adsense adalah ....</div>
source:blog.krakentechno.com
0 comments for How to Make an AMP Lightbox with Gallery Features