Untuk anda yang suka menampilkan photo selfie, photo-photo unik, gambar animasi, dll di website forum gratis SL, dapat juga memperkaya tampilan variasai halaman dan postingan dengan menginstal kode script plugin slider album photo mini melayang..
Bagi anda yang belum membuat website forum gratis SL, maka segera dapatkan web forum gratis di halaman: Buat Website Forum Gratis.
Fungsi Plugin Slider Album Photo Mini Melayang
★Menumpuk semua gambar dalam 1 bingkai photo. Dan hanya menampilkan 1 photo, atau 1 gambar animasi untuk dilihat.
★Otomatis sistem plugin akan menampilkan (mengeluarkan) 1 gambar berikutnya/sebelumnya yang tersembunyi, dengan cara melayang unik ketika kursor mouse menglik tanda panah sebelah kanan ataupun sebelah kiri yang tersedia di pinggir bingkai photo.
★Mengkik tanda panah sebelah kiri, akan menampilkan 1 gambar photo tersembunyi (di background) dengan cara melayang dari bawah ke atas menutupi 1 gambar photo lainnya.
★Mengklik tanda panah sebelah kanan, akan menggeser 1 gambar photo yang yg sedang terlihat dengan cara melayang ke atas dan disembunyikan di background. Maka foto lainnya segera akan terlihat.
★Plugin berfungsi baik di PC/Laktop maupun di Mobiling Smartphone.
[sayalagi.com]
<style>
#albumphotosayalagi{
width:310px;
padding:120px 0;
height:250px;
position:relative;
z-index:1000;
margin-left:10px;
}
#tampilkan{
position:absolute;
height:250px;
width:300px;
background-color:#fff;
margin:8px 0 0 10px;
z-index:100;
-moz-box-shadow:0 0 10px #111;
-webkit-box-shadow:0 0 10px #111;
box-shadow:0 0 10px #111;
}
#gambar { position: relative; height: 208px; }
#gambar img { position: absolute; top: 0; left: 0; margin: 10px 0 0 10px;}
#albumphotosayalagi > a{
border:none;
text-decoration:none;
text-indent:-99999px;
overflow:hidden;
width:36px;
height:37px;
background:url('/uploads/0007/e3/f7/64535-1.png') no-repeat;
position:absolute;
top:50%;
margin-top:-21px;
}
#sebelumnya{left:-22px;}
#sebelumnya:hover{ background-position:bottom left;}
a#berikutnya{right:-32px;background-position:top right;}
#berikutnya:hover{background-position:bottom right;}
</style>
<center>
<div id="albumphotosayalagi">
<div id="tampilkan">
<div id="gambar">
<img src="https://i.pinimg.com/564x/42/fa/3b/42fa3b73b773918fb1f23422a4313224.jpg" alt="album photo gadis berjilbab cantik" width="280" height="230" />
<img src="https://i.pinimg.com/564x/e6/4e/39/e64e390eb818c430542e87c9577eee5e.jpg" alt="album photo cewek berjilbab merah" width="280" height="230"/>
<img src="https://i.pinimg.com/564x/37/0d/e1/370de11d1b1f7b3d6548d0a271c0a784.jpg" alt="wanita berjilbab cantik sedang duduk" width="280" height="230"/>
<img src="https://1.bp.blogspot.com/--LtTs_jTTn4/X2dR_uavA3I/AAAAAAAAHqE/S7OmoLjXsAQNET8s4YudqfiSLK1SjzcVgCLcBGAsYHQ/s280/foto-soraya-gadis-berjilbab-penyuka-hewan-kucing.jpg" alt="gadis berjilbab penyuka kucing" width="280" height="230" />
<img src="https://3.bp.blogspot.com/-nMrJ6ADhLpY/VeHSiVs5M8I/AAAAAAAAEIU/6B74ieBah7w/s280/soraya-gadis-jilbab-sendirian-jomblo.jpg" alt="album photo gadis cantik berjilbab jomblo" />
<img src="https://1.bp.blogspot.com/-hxmNDpxafpY/XpBcewd2MDI/AAAAAAAAHRM/MkXFjAOwZI8GIzdji7WAuWIQUG3G8anOwCLcBGAsYHQ/s280/photo-meme-soraya-wanita-hijaber-cari-jodoh-jauh-dekat.png" alt="album photo wanita hijaber cari jodoh" width="280" height="230" />
<img src="https://i.pinimg.com/236x/2a/be/e5/2abee5357b08c6016a690758ce0e7efc.jpg" alt="album photo gadis cantik berjilbab baju kaos" width="280" height="230" />
<img src="https://2.bp.blogspot.com/-zzzUP7Efd_E/V64Ny52vxpI/AAAAAAAAAHg/dKukcDXqrGAC9_n6ZDEuwMz2P2yfzWjqQCPcB/s280/mata-batin-soraya-semangat-wanita.gif" alt="album animasi photo gadis berjilbab mainin bola mata" width="280" height="230" />
<img src="/f/com/videoanda/videogadisanda.gif" alt="album animasi video gadis berjilbab joget" width="280" height="230" />
<img src="https://i.pinimg.com/564x/fd/78/10/fd7810d844296ef97547464207635334.jpg" alt="album foto selfie wanita berjilbab cantik" width="280" height="230" />
</div>
</div>
<a id="sebelumnya" href="#">»</a>
<a id="berikutnya" href="#">«</a>
</div></center><script>
$(document).ready(function() {
var z = 0;
var inAnimation = false;
$('#gambar img').each(function() {
z++;
$(this).css('z-index', z);
});
function swapFirstLast(isFirst) {
if(inAnimation) return false;
else inAnimation = true;
var processZindex, direction, newZindex, inDeCrease;
if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease =1; }
else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; }
$('#gambar img').each(function() {
if($(this).css('z-index') == processZindex) {
$(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow',function() {
$(this).css('z-index', newZindex)
.animate({ 'top' : '0' }, 'slow', function() {
inAnimation = false;
});
});
}
else {
$(this).animate({ 'top' : '0' }, 'slow', function() {
$(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);
});
}});
return false;
}
$('#sebelumnya').click(function() {
return swapFirstLast(false);
});
$('#berikutnya').click(function() {
return swapFirstLast(true);
});
});
</script>[/sayalagi.com_copyright]
Cara Instalasi Plugin ini:
» MASUK sebagai Admin di Forum Gratis SL anda
» Buka Halaman Panel Admin forumgratisSL/admin_index.php
» Selanjutnya Klik menu Forms
» Copy kode script Instalasi Kode Script Plugin Album Photo Melayang, dan paste di kolom HTML header yang ada di halaman Forms.
» Klik Simpan (save changes)
Cara Pasang Widget Plugin ini:
Jika anda sudah memasang kode instalasi script plugin ini, maka selanjutnya, anda dapat menampilkan photo album Album Photo Mini Melayang di halaman mana saja yang anda inginkan dengan cara memasang Widget Plugin Album Photo Mini Melayang. Cukup copy kode widget plugin dan paste di halaman mana saja. Widget plugin dapat dipasang di beberapa bagian forum seperti:
⇒ Kolom Announcement. Buka di .... /admin_forms.php#f-announcement
⇒ Kolom Form Reply. Buka di .... /admin_forms.php#f-form-reply
⇒ Buat Halaman Baru .... /admin_pages.php
⇒ Kolom Header dan Footer .... /admin_forms.php
⇒ Postingan Topik (wajib mengaktifkan HTML in posts). Caranya cukup dengan mengaktifkan centeng YES di: .... /admin_scripts.php
Kompatibel |
☛Forum Mybb | ✔ |
☛Wordpress | ✔ |
☛Blogspot | ✔ |
☛Forum Sayalagi dan Mitra Domain | ✔ |