LightBox Untuk Image 2
Ini kaedah ke-2 untuk "lightbox". Saya lebih menggemari kaedah ini. Kaedah pertama telah dijelaskan sebelum ini. Klik SINI untuk melihat kaedah pertama. Jika anda menghadapi masalah dengan kaedah yang pertama, cuba dengan kaedah yang ke 2 ini.
Mula-mula, pergi ke Dashboard >> Layout >> Edit HTML dan anda cari tag </head>.
Kemudian anda masukkan kod di bawah tag di atas. Klik save dan selesai.
Nanti dulu. Langkah di atas itu selesai untuk kod "scripts" dan "style" sahaja. Kita pergi pula untuk kaedah memasukkan gambar yang anda ingin sertakan dalam post atau entri anda.
Sama seperti kaedah yang pertama, anda MESTI menggunakan "Old Editor" dan bukannya "Update Editor" untuk post dengan kaedah ini. Dan gunakan "Edit HTML" bukan "Compose" untuk edit kod gambar.
Setelah itu anda upload gambar yang anda inginkan dan anda akan mendapat kod seakan sama seperti di bawah:-
Saya petakkan sebahagian tag di dalam gambar itu. Anda "highlight"kan seperti di atas dan anda gantikan dengan tag:-
rel="lightbox" title="Tajuk Gambar"
Satu lagi yang saya petakkan iaitu "-h". Anda perlu buangkannya. Ingat!! Hanya itu sahaja.
Kemudian anda boleh klik "Publish Post".
OK, itu kaedah untuk satu gambar.
Untuk gambar yang banyak dalam satu topik atau "group image" atau album, sama juga seperti kaedah di atas dan bezanya hanya perlu gunakan kod di bawah:-
rel="lightbox[albumname]" title="Tajuk Gambar"
Kesimpulannya,
Satu gambar:
rel="lightbox" title="Tajuk Gambar"
Banyak gambar:
rel="lightbox[albumname]" title="Tajuk Gambar"
Untuk Demo, sila klik SINI .
**NOTA** Seeloknya biarkan "upload page" itu "done" barulah anda klik gambar.
Mula-mula, pergi ke Dashboard >> Layout >> Edit HTML dan anda cari tag </head>.
Kemudian anda masukkan kod di bawah tag di atas. Klik save dan selesai.
| <!--Light Box Code Starts Bloggerplugins.ORG--> <style> #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY2QV0wFQQyZr-bo7O7TAQkOf2oARCHDJ5AqCfHZAv69x7StLC-qLPuW1mMRMXECfSNaS92dk2AQO3GfEEpIXHVyFzXkUjIXf8M14jHxNjAA1yihcjxId5NPZX2Dy92Gmt8rp26eigPJU/) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpxI13D5AATk2eAvL1ALf0jc25d4vKt6J7oZOaW-gDdQuc9KvsJ8jlg4kMx_XZbdfgbuOxicPUJTwXsIi0ijPw3NmAojCp3dZbTIThU1WTj2qqf2FyiCxdo0k-TCsDz4jRDqfD1JLSGcM/) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } round-color: #000; } lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } round-color: #000; } </style> <script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/> <script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/> <script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/> <!--Light Box Code Ends Bloggerplugins.ORG--> |
Nanti dulu. Langkah di atas itu selesai untuk kod "scripts" dan "style" sahaja. Kita pergi pula untuk kaedah memasukkan gambar yang anda ingin sertakan dalam post atau entri anda.
Sama seperti kaedah yang pertama, anda MESTI menggunakan "Old Editor" dan bukannya "Update Editor" untuk post dengan kaedah ini. Dan gunakan "Edit HTML" bukan "Compose" untuk edit kod gambar.
Setelah itu anda upload gambar yang anda inginkan dan anda akan mendapat kod seakan sama seperti di bawah:-
Saya petakkan sebahagian tag di dalam gambar itu. Anda "highlight"kan seperti di atas dan anda gantikan dengan tag:-
rel="lightbox" title="Tajuk Gambar"
Satu lagi yang saya petakkan iaitu "-h". Anda perlu buangkannya. Ingat!! Hanya itu sahaja.
Kemudian anda boleh klik "Publish Post".
OK, itu kaedah untuk satu gambar.
Untuk gambar yang banyak dalam satu topik atau "group image" atau album, sama juga seperti kaedah di atas dan bezanya hanya perlu gunakan kod di bawah:-
rel="lightbox[albumname]" title="Tajuk Gambar"
Kesimpulannya,
Satu gambar:
rel="lightbox" title="Tajuk Gambar"
Banyak gambar:
rel="lightbox[albumname]" title="Tajuk Gambar"
Untuk Demo, sila klik SINI .
**NOTA** Seeloknya biarkan "upload page" itu "done" barulah anda klik gambar.
Comments
Post a Comment