Skip to content Skip to sidebar Skip to footer

Clearing Lightbox

Clearing lightbox yaitu fitur untuk membuat zoom gambar yang biasanya digunakan pada galeri foto. Dengan fasilitas ini kita dapat menampilkan galeri foto dalam bentuk gambar besar dengan tampilan yang elegan dan navigasi yang interaktif.

Cara menggunakan clearing lightbox yaitu dengan menambah class .clearing-thumbs dan .clearing-feature serta menambahkan atribut data-clearing pada tag <ul>. Clearing lightbox merupakan salah satu fitur yang menggunakan javascript sehingga harus memanggil file javascript sebelum penutup tag <body>.

Skrip clearing lightbox.html

<div class= "row">

    <div class="column large-8">

        <ul class="clearing- thumbs clearing-feature

                large-block-grid-4" data-clearing>

            <li><a href="gambar/1. jpg" class="th">

                <img src="gambar/1. jpg"></a></li>

            <li<>a href="gambar/2. jpg" class="th">

                <img src="gambar/2 . jpg"></a></li>

            <li><a href="gambar/3.jpg" class="th">

                <img src="gambar/3. jpg" ></a></li>

            <li><a href="gambar/4. jpg" class="th">

                <img src="gambar/4. jpg"></a></li>

        </ul>

    </div>

</div>


<script src="../foundation/js/vendor/jquery.js"></script>

<script src="../foundation/js/foundation.min.js"></script>

<script>

    $ (document ) . foundation () ;

</script>

Post a Comment for "Clearing Lightbox"

RajaBackLink.com