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.

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

ketagihan baca

Minggu, 16 September 2012

Membuat Pop Up Image Viewer

13 komentar: