jQuery Lightbox Evolution - Part 2

jQuery Lightbox Evolution, setelah membuat postingan pertama yaitu jQuery Lightbox Evolution - Image-Video. Disini saya akan memberikan Javascript untuk membuat Lightbox ini terotomatisasi pada setiap gambar yang ada pada postingan blog/web anda dan Skin-skin dari Lightbox ini.

JAVASCRIPT, untuk javascript lihat langsung scriptnya dibawah. taruh tepat diatas kode </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>

Jadi, setelah anda memasang script diatas, anda tidak perlu lagi menambahkan kode class='lightbox' pada gambar yang ingin anda tampilkan menggunakan lightbox.

LIGHTBOX SKIN, selain skin default dari lightbox ini, ada 9 lagi skin keren dari lightbox ini, silahkan liat list dan link downloadnya dibawah.

• Carbono
• Classic
• Classic-Dark
• Evolution
• Evolution-Dark
• Default
• Facebook
• Minimalist
• Minimalist-Dark
• White-Green

Untuk Link DEMO silahkan klik nama Skin diatas, dan untuk link downloadnya, silahkan cek dibawah :)

DOWNLOAD SKIN LIGHTBOX
134kb | Password RAR : om-dayz.blogspot.com

Sekian dulu postingan kali ini sobat blogger^^
Thx to my bloggermates - p4r46hcyb3rn3t
mudah-mudahan bermanfaat ya!
kotak komentar selalu terbuka jika ada pertanyaan atau mengalami kesulitan^^

jQuery Lightbox Evolution - Image-Video

jQuery Lightbox Evolution - Image-SWF-Video, adalah alat untuk menampilkan gambar, konten html, peta, dan video dalam gaya "lightbox" yang mengambang pada halaman web. Menggunakan Lightbox ini, author web dapat menampilkan berbagai macam media di semua browser utama tanpa menavigasi pengguna jauh dari halaman yang terhubung.

Tapi disini saya hanya akan memberikan tutorial bagaimana cara mengapklikasikan lightbox ini untuk Gambar dan Video, bagi yang ingin tahu cara untuk aplikasikan SWF dan HTML silahkan contact saya. lihat Contoh dibawah!

KLIK UNTUK MEMBUKA LIGHTBOX!

CONTOH VIDEO LIGHTBOX DARI YOUTUBE

Langsung saja copy paste script dibawah ini, lalu kemudian buka EDIT HTML kemudian simpan kode ini diatas kode </head>

<script src='http://ganteng-project.googlecode.com/svn/trunk/LightboxEvo/jquery-1.7.min.js' type='text/javascript'/>
<script src='http://ganteng-project.googlecode.com/svn/trunk/LightboxEvo/jquery.lightbox.js' type='text/javascript'/>
<script src='http://ganteng-project.googlecode.com/svn/trunk/LightboxEvo/imagenvideo.js' type='text/javascript'/>
<link href='http://ganteng-project.googlecode.com/svn/trunk/LightboxEvo/jquery-lightbox.css' rel='stylesheet' type='text/css'/>
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="http://ganteng-project.googlecode.com/svn/trunk/LightboxEvo/jquery-lightbox-ie6.css" /><![endif]-->

Setelah itu save template anda. jQuery telah terpasang di template anda.

Cara Menerapkan Lightbox

cukup tambahkan kode class="lightbox" pada kode gambar anda, perhatikan contoh penerapan dibawah ini

<a href="assets/7.jpg" title="Image Description" class="lightbox"><img src="assets/m7.jpg" alt=""/></a>

Anda juga dapat membuat gambar dalam 1 grup (galeri gambar) dengan menambahkan kode rel="blah...blah...", contoh penerapan lihat dibawah.!

<a href="assets/5.jpg" class="lightbox" rel="group1"><img src="assets/m5.jpg" alt=""/></a>
<a href="assets/9.jpg" class="lightbox" rel="group1"><img src="assets/m9.jpg" alt=""/></a>
<a href="assets/6.jpg" class="lightbox" rel="group1" title="Lorem ipsum dolor sit amet..."><img src="assets/m6.jpg" alt=""/></a>

cara menerapkan video lightbox dari berbagai provider video sharing.

<a href="http://www.youtube.com/watch?v=TsUD1za9TA4" class="lightbox">youtube</a>
<a href="http://www.vimeo.com/12421175" class="lightbox"><img src="assets/m13.jpg" alt=""/>vimeo</a>
<a href="http://www.metacafe.com/watch/yt-nn096G5jek0/coldplay_speed_of_sound_acoustic/" class="lightbox">metacafe</a>
<a href="http://www.dailymotion.com/video/x53dvz_fragma-toca-s-miracle-2008_music" class="lightbox">dailymotion</a>
<a href="http://video.google.com/videoplay?docid=-8618166999532839788" class="lightbox">google video</a>

Gimana sobat blogger ?
simple banget kan :)
Kalau masih ada yang belum jelas, silahkan berkomentar dibawah

Hope You Enjoy \m/

Siapkah anda dengan Facebook TimeLine ?

Facebook Timeline, perombakan total profil pribadi yang akan diluncurkan dalam beberapa minggu mendatang, dibangun dengan ide yang luar biasa "bagaimana jika Anda bisa melihat seluruh hidup Anda di satu tempat?"

Timeline adalah cara memvisualisasikan hidup Anda (atau lebih tepatnya hidup Anda seperti yang telah hidup di Facebook). Anda dapat dengan mudah menelusuri dan melihat teman-teman anda, foto yang Anda upload, status hubungan Anda, dan bahkan penyakit dan operasi - jika Anda memilih untuk berbagi mereka. Anda dapat melihat, menyoroti dari tahun tertentu atau bulan dan hari.

Saya sendiri telah mencoba facebook timeline ini, tapi menurut saya sih masih agak ribet(lama-lama juga terbiasa :P)

Ini merupakan konsep yang luar biasa dari Facebook, kita bisa melihat semua sisi dan kehidupan kita dan teman-teman kita di facebook.

Mark Zuckerberg mengatakan, " It's all here, it's your whole life." 

dalam artian indonesia, "Semuanya ada disini, Ini adalah bagian keseluruhan dari hidupmu".

Jadi, siapkah anda dengan fitur dahsyat dari facebook ini ?