20230902 105945

Lightimage Sederhana Dengan HTML dan CSS

Diposting pada

Codepelajar – Lightbox image adalah salah satu fitur yang sangat berguna dalam desain blogspot. Fitur ini memungkinkan pengguna untuk memperbesar gambar dengan hanya mengekliknya, sehingga pengunjung dapat melihat rincian gambar dengan jelas.

Lightbox image juga memberikan pengalaman yang lebih interaktif bagi pengunjung blog. Saat pengunjung mengklik gambar, gambar tersebut akan muncul dalam jendela pop-up yang terpisah, sehingga pengunjung tidak perlu meninggalkan halaman blog mereka. Ini sangat memudahkan untuk melihat gambar dengan ukuran yang lebih besar tanpa harus berpindah halaman.

Cara Membuat Lightbox Sederhana Dengan HTML dan CSS

Silahkan buka Blogspot > tema > edit html salin CSS di bawah ini dan tempel di atas kode ]]></b:skin> atau </style>

• • •

.zoomclick.active{position:fixed;top:0;left:0;bottom:0;right:0;z-index:9999999;background:#000;}
.zoomclick.active img{height:100%;max-width:800px;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);}
.flow{overflow:hidden;position:relative;}
.zoomclick.active:after{content:"";cursor:pointer;width:40px;height:40px;background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='34' height='34' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23cccccc' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-position:top right;-webkit-background-size:40px 40px;background-size:40px 40px;position:absolute;top:10px;right:10px;z-index:2;opacity:.8;transition:all .4s ease-in-out}
@media screen and (max-width:800px){.zoomclick.active img{width:100%;height:auto;max-width:100%}}

• • •

Selanjutnya salin JavaScript di bawa ini dan tempatkan di atas kode </body>

• • •

<script>
//<![CDATA[
function wrap(t,e,r){for (var i = document.querySelectorAll(e),o = 0;o < i.length;o++){var a = t + i[o].outerHTML + r;i[o].outerHTML = a}}
wrap("<div class='zoomclick'>",".post-body img","</div>");var container = document.getElementsByClassName("zoomclick");for (var i = 0;i < container.length;i++){container[i].onclick = function(event){this.classList.toggle('active');var element = document.body;element.classList.toggle('flow')}}
//]]>
</script>

• • •

gambar pada postingan tidak boleh ada linknya agar ketika gambar diklik tidak membuka gambar tersebut di browser

Jika sudah, silahkan simpan.

Langkah selanjutnya silahkan masuk ke postingan dengan gambar yang ingin dimasukkan Lightbox > Masuk ke mode HTML > Hasil gambar kiranya akan seperti dibawah ini, silahkan hapus bagian yang sudah ditandai

<div class=”separator” style=”clear: both; text-align: center;”><a href=”https://1.bp.blogspot.com/xxxx.png” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ data-original-height=”768″ data-original-width=”1366″ src=”https://1.bp.blogspot.com/xxxx.png” width=”320″ /></a></div>

Jika sudah maka hasilnya akan seperti ini

<div class=”separator” style=”clear: both; text-align: center;”><img border=”0″ data-original-height=”768″ data-original-width=”1366″ src=”https://1.bp.blogspot.com/xxxx.png” width=”320″ /></div>

Oke mungkin segitu saja yang dapat Codepelajar sampaikan semoga bermanfaat dan dengan banyaknya fitur yang menarik, saya yakin pengunjung akan nyaman berada di blog Anda.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *