Cara Membuat Plus Size Image Viewer
Sebuah pilihan berbentuk keterangan dibawah gambar yang dapat menampilkan versi gambar hasil pembesaran dengan ukuran yang berbeda dari aslinya "ukuran plus".
Perbesaran gambar ini terjadi dimana anda meng-klik keterangan tersebut. Jadi perbesaran gambar ini hanya akan ditampilkan sesuai permintaan saja.
Contoh:
(Lihat keterangan dibawah gambar, kemudian klik...)
Cara Memasang Plus Size Image Viewer
Langkah Pertama:
Slahkan terlebih dahulu Download kode CSS dan JS berikut ini dan letakan diatas kode </head>Langkah Kedua:
Pasang script contoh berikut ini untuk membuat Plus Size Image Viewer, letakan pada <body> halaman anda.<img src="http://i45.tinypic.com/fuyk4h.jpg" style="width:200px" data-plusimage="http://i45.tinypic.com/fuyk4h.jpg" data-plussize="700,466" />
<img src="http://i48.tinypic.com/e0aqe.jpg" style="width:150px" data-plusimage="http://i48.tinypic.com/e0aqe.jpg" data-plussize="600,450" />
Keterangan:
Untuk membuat Plus Size Image Viewer ini cukup dengan mambahkan dua buah atribut berwarna merah dalam tag IMG gambar anda seperti diatas. - data-plusimage: URL penuh atau path gambar yang akan diperbesar, seperti http://i45.tinypic.com/fuyk4h.jpg.
- data-plussize: Lebar dan tinggi dari gambar diperbesar, dalam format "w, h", adalah unit yang akan diasumsikan.
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon