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.
Tidak ada komentar:
Posting Komentar