Minggu, 16 September 2012

You are here : Home » ILMU LINK, Ketagihan Javascript, TOP WIDGET, TOP WIDGET 2 » Membuat Pop Up Image Viewer

Membuat Pop Up Image Viewer

Apa itu Pop Up Image Viewer ???

Pop Up Image Viewer adalah jendela munculan untuk melihat gambar. Seperti ini contohnya. Coba Agan klik link berikut :

Gambar 1

Bagaimana ?? Agan kaget  ?? Maaf deh habis tadi bingung mau pakai gambar mana.

Postingan ini terinspirasi dari web Kent-Tatto (Studio Tatto ternama di Bandung) yang di salah satu menu nya terdapat Pop Up Image Viewer ini. Iseng-iseng mengintip lewat Open Source, akhirnya bisa juga.

Apabila Agan tertarik membuatnya, Agan cukup salin kode berikut.

<script type="text/javascript">

// JK Pop up image viewer script-
// Visit JavaScript free (http://ketagihanbaca.blogspot.com)
// for free JavaScript tutorials and scripts
// This notice must stay intact for use

var popbackground="lightskyblue" //specify backcolor or background image for pop window
var windowtitle="Image Window"  //pop window title

function detectexist(obj){
return (typeof obj !="undefined")
}

function jkpopimage(imgpath, popwidth, popheight, textdescription){

function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}

getpos()
var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("","",winattributes)
else{
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}
jkpopwin.document.open()
jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'+textdescription+'</body></html>')
jkpopwin.document.close()
jkpopwin.focus()
}


</script>
<a href="http://www.blogger.com/blogger.g?blogID=8310555286126623658#" onclick="jkpopimage('alamat gambar', 325, 445, '.'); return false">
Gambar 1</a>
<br />

Perhatikan :

Letakkan script di atas pada menu "HTML" di halaman membuat postingan. Sementara jika Agan hendak membuat lebih dari satu link, maka tinggal tambahkan kode berikut. Begitu seterusnya.

<a href="http://www.blogger.com/blogger.g?blogID=8310555286126623658#" onclick="jkpopimage('alamat gambar', 325, 445, 'Breakfast is served.'); return false">
Gambar 1</a>
<br />

Ganti sederetan angka ini 8310555286126623658 dengan blogID Agan.

Ganti tulisan alamat gambar dengan gambar punya Agan.

Ganti tulisan Gambar 1 dengan judul gambar.

Selamat mencoba. 

13 komentar:

  1. Boleh ane coba nanti gan. Ane sering liat neh di toko online.

    BalasHapus
    Balasan
    1. Betul gan, style seperti ini banyak di pakai web dagang.

      Hapus
  2. kunjungan malam sekalian support bang,,..artikel yang bagis nie?

    BalasHapus
  3. ijin coba gan mudah2han bisa..thx

    BalasHapus
    Balasan
    1. Silahkan.... di jamin bisa Gan :D

      Hapus
  4. hahahah, masih belum bisa sob ngagetin ane.
    thanks atas infonya, baru tau nih :D

    BalasHapus
    Balasan
    1. Wkwkwkwk padahal gambarnya udah lumayan horor tuh gan :D

      Hapus
  5. memank mantap blogger nya ia. tinggkatkan ia..

    BalasHapus
  6. Thanks Gan Tutornya, Sangat Membantu :)

    BalasHapus