Sedikit Info Seputar Simple Lightbox Evolution untuk Blog Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Simple Lightbox Evolution untuk Blog, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel CSS, Artikel JavaScript, Artikel Plugin, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Simple Lightbox Evolution untuk Blog Terbaru
link: Simple Lightbox Evolution untuk Blog

Berbagi Simple Lightbox Evolution untuk Blog Terbaru dan Terlengkap 2017

Lightbox evolution ini pernah saya gunakan pada template sebelumnya untuk 'Konversi Kode'. Tutorial cara pemasangan Lightbox Evolution ini sebetulnya sudah dishare oleh Om-Dayz (Dayz Hidayat). Akan tetapi setelah saya cek ulang ternyata kodenya sudah kehapus. oleh karena itu saya coba share ulang untuk sobat semua.

Bagi sobat yang ingin menerapkan lightbox ini, silahkan ikuti langkah mudahnya :

1. Pasang framework jQuery diatas kode </head>:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Apabila sudah terpasang jQuery silahkan ganti dengan versi 1.7.2, karena saya coba dengan beberapa versi sampai yang terbaru, tidak bisa bekerja

2. Pasang Lightbox jQuery serta CSS-nya masih di atas 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. Simpan Template

Cara Penggunaan

Untuk penggunaan Lightbox Evolution ini, cukup tambahkan class='lightbox' pada url tujuan. Untuk lebih lengkapnya lihat cara penggunaan dibawah ini :

Gambar Satuan

<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

Untuk membuat Gallery, tambahkan 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

id="loremipsum" Nullam varius congue fringilla. Curabitur auctor dapibus molestie. Cras malesuada vestibulum lectus, vel ullamcorper nibh tempus lobortis. Donec ipsum magna, malesuada et fringilla eget, placerat ut arcu. Donec aliquet, mauris ut pellentesque tincidunt, massa dolor tempor urna, ac interdum massa nisl id tellus. Maecenas eu nunc varius lorem porttitor faucibus. Suspendisse potenti. Donec ullamcorper vehicula pretium. In aliquam adipiscing mi, rhoncus eleifend felis auctor eu. Aenean et mi vitae ante ultricies pulvinar a vel neque.

<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

<a href="http://www.youtube.com/watch?v=e1c-wAT0b6g" class="lightbox">YouTube</a>

Flash /SWF

<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>

Sebetulnya masih banyak cara penggunaannya, namun yang diatas itu yang paling sering digunakan.

FULL Repost from : Blog Kang Ismet

Itulah sedikit Artikel Simple Lightbox Evolution untuk Blog terbaru dari kami

Semoga artikel Simple Lightbox Evolution untuk Blog yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Simple Lightbox Evolution untuk Blog

Free Template BLogspot.Com

Cara Download Simple Lightbox Evolution untuk Blog Update Terbaru