Cara Membuat Jquery Lightbox Evolution pada Blog

https://www.ramelhobbyshop.com/2022/07/cara-membuat-jquery-lightbox-evolution.html
Motivation - Pada kesempatan ini, saya akan kembali membagikan Tutorial Blog, Yaitu "Cara Membuat Jquery Lightbox Evolution pada Blog". Kegunaan dan fungsi utama pada Lightbox ini, yakni untuk membuka suatu frame yang baru tanpa membuka jendela yang baru.

Bagi Anda yang ingin Membuat Lightbox, silahkan lihat beberapa bentuknya di bawah ini:

1. Login ke Blogger >> Dashboard >> Template >> Edit HTML

Silahkan masukkan jquery di bawah ini, tepat diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

2. Tambahkan lagi CSS Lightbox berikut diatas kode </head>
<link href='http://kang-is.googlecode.com/svn/trunk/css/lightbox.css' rel='stylesheet' type='text/css'/>
<script src='http://kang-is.googlecode.com/svn/trunk/javascript/lbev2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){$('.lightbox').lightbox()});
//]]>
</script>
3. Save (Simpan Template)

Cara Pemakaian
Untuk memakai lightbox evolution ini, anda hanya perlu menambahkan class='lightbox' pada url tujuan. Untuk lebih jelasnya lagi, Silahkan Lihat Cara penggunaannya di bawah ini,

Cara Penggunaan
Gambar Satuan
https://www.ramelhobbyshop.com/2022/07/cara-membuat-jquery-lightbox-evolution.html

https://www.ramelhobbyshop.com/2022/07/cara-membuat-jquery-lightbox-evolution.html

https://www.ramelhobbyshop.com/2022/07/cara-membuat-jquery-lightbox-evolution.html
<a href="url-gambar-besar" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" class="lightbox" title="Untuk menambahkan deskripsi seperti ini, tambah title"><img src="url-gambar-kecil" alt=""/></a>
Untuk menambahkan class='lightbox' pada setiap gambar secara otomatis, simpan kode ini di atas </body>
<script type='text/javascript'>
  jQuery(document).ready(function(){
    $(&#39;a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)&#39;).lightbox();
  });
</script>

Album Gallery - Banyak Foto
https://www.ramelhobbyshop.com/2022/07/cara-membuat-jquery-lightbox-evolution.html

https://www.ramelhobbyshop.com/2022/07/cara-membuat-jquery-lightbox-evolution.html

https://www.ramelhobbyshop.com/2022/07/cara-membuat-jquery-lightbox-evolution.html

Untuk membuat Gallery, anda hanya perlu menambahkan nama album dengan menggunakan tag rel, contoh rel="nama-album"
<a href="url-gambar-besar" rel="nama-album" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" rel="nama-album" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" rel="nama-album" class="lightbox" title="Untuk menambahkan deskripsi seperti ini, tambah title"><img src="url-gambar-kecil" alt=""/></a>
Inline Content
Buka LoremIpsumBuka LoremIpsum dengan ukuran tertentu (534x165)
<a class="lightbox" href="#loremipsum">Buka LoremIpsum</a>
<a class="lightbox" href="?lightbox[width]=534&amp;lightbox[height]=165#loremipsum">Buka LoremIpsum dengan ukuran tertentu (534x165)</a>
Youtube
https://www.ramelhobbyshop.com/2022/07/cara-membuat-jquery-lightbox-evolution.html
<a href="http://www.youtube.com/watch?v=e1c-wAT0b6g" class="lightbox">YouTube</a>
Flash/SWF - Java
https://www.ramelhobbyshop.com/2022/07/cara-membuat-jquery-lightbox-evolution.html
Flash
<a href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf" class="lightbox">Flash</a>
IFrame
<a href="https://kang-is.googlecode.com/svn/trunk/converter.html?lightbox[iframe]=true&lightbox[width]=770&lightbox[height]=460" class="lightbox">Buka Iframe</a>
<a class="lightbox" data-options='{"width":450, "height":450, "iframe": true}' href='https://kang-is.googlecode.com/svn/trunk/converter.html' rel='nofollow'>Versi HTML5</a>
Nah, Itulah Sebagian dari cara pemakaian yang paling sering digunakan, Semoga, Tutorial "Cara Membuat Jquery Lightbox Evolution pada Blog" ini dapat bermanfaat, bagi anda. Terima Kasih

A Blog Give Motivation

Baca Juga
Related Post

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad