Practice Makes Right,repetitions Make Perpect.

Tentang Blog Ini ×

B log Ini merupakan media saya untuk berbagi segala hal yang berhubungan tentang blogging meskipun masih sederhana,Mand4rt juga merupakan media saya dalam menuangkan hasil karya sekaligus tempat saya belajar membangun sebuah blog/website dan berharap untuk tetap bisa memberikan yang terbaik kepada pembaca.

Aura Template

T emplate yang saya gunakan ini merupakan buatan saya sendiri, Banyak yang mengatakan bahwasanya DHE adalah template hasil cloningan secara utuh namun tidak demikian template ini saya susun dari sangat dasar dengan pemahaman yang sedikit awam dan otodidak dalam pembuatannya saya berusaha meniru tampilan beberapa template yang pernah dipakai oleh:

DTE :] web.id

Tentang Saya

S

alam pembuka dari saya sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Provinsi Sulawesi Barat Dan Saya Bersekolah Di SMA Neg 1 Polewali.Nama saya Haekal Fikri akrab dipanggil Haekal. Saya Tidak Mempunyai Guru Saya Belajar Secara Otodidak Beserta Bantuan Dari Teman-teman blogger saya dan saya masih NEWBIE Jadi jika Saya Tidak Dapat Menjawab Pertanyaan Anda Tentang Seputar Blogging Harap Di Maklumi.
iklan
Bagikan kepada teman!

Efek Gambar Membesar Dengan Keterangan

Efek Gambar Membesar Dengan Keterangan


Mand4rt | Kali Ini Saya Akan Share Efek Gambar Membesar Dengan Keterangan Yang Saya Dapat Dari Situs Asing Untuk Menyingkat Waktu Langsung Saja Ikuti Tutorial Di Bawah Ini  :D!

Example Thumbnail Effect With Zoom And Sliding Captions, Klik Here,,

CSS::

 .thumbnailWrapper { width:600px; margin:0px auto; } /* not important */

.thumbnailWrapper ul {
list-style-type: none; /* remove the default style for list items (the circles) */
margin:0px; /* remove default margin */
padding:0px; /* remove default padding */
}
.thumbnailWrapper ul li {
float:left; /* important: left float */
position:relative; /* so we can use top and left positioning */
overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
}
.thumbnailWrapper ul li a img {
width:200px; /* not important, the pics we use here are too big */
position:relative; /* so we can use top and left positioning */
border:none; /* remove the default blue border */
}
.caption{
position:absolute; /* needed for positioning */
bottom:0px; /* bottom of the list item (container) */
left:0px; /* start from left of the list item (container) */
width:100%; /* stretch to the whole width of container */
display:none; /* hide by default */
/* styling bellow */
background:rgba(0,0,0,0.8);
color:white;
}
.caption .captionInside{
/* just styling */
padding:10px;
margin:0px;
}
.caption p{
text-align:center;
font-size:110%;
}
.clear { clear:both; } /* to clear the float after the last item */

SCRIPT::

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<script type="text/javascript" charset="utf-8">
$(window).load(function(){
//set and get some variables
var thumbnail = {
imgIncrease : 100, /* the image increase in pixels (for zoom) */
effectDuration : 400, /* the duration of the effect (zoom and caption) */
/*
get the width and height of the images. Going to use those
for 2 things:
make the list items same size
get the images back to normal after the zoom
*/
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
};

//make the list items same size as the images
$('.thumbnailWrapper ul li').css({
'width' : thumbnail.imgWidth,
'height' : thumbnail.imgHeight
});

//when mouse over the list item...
$('.thumbnailWrapper ul li').hover(function(){

$(this).find('img').stop().animate({

/* increase the image width for the zoom effect*/
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
/* we need to change the left and top position in order to
have the zoom effect, so we are moving them to a negative
position of the half of the imgIncrease */
left: thumbnail.imgIncrease/2*(-1),
top: thumbnail.imgIncrease/2*(-1)

},{

"duration": thumbnail.effectDuration,
"queue": false
});

//show the caption using slideDown event
$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);

//when mouse leave...
}, function(){

//find the image and animate it...
$(this).find('img').animate({

/* get it back to original size (zoom out) */
width: thumbnail.imgWidth,
/* get left and top positions back to normal */
left: 0,
top: 0

}, thumbnail.effectDuration);

//hide the caption using slideUp event
$(this).find('.caption').slideUp(thumbnail.effectDuration);

});
});
</script>

HTML::

 <!-- start thumbnailWrapper -->
<div class='thumbnailWrapper'>
<ul>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/1.jpg' /></a>
<div class='caption'>
<p class='captionInside'>CofeeNerd</p>
</div></li>

<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/2.jpg' /></a>
<div class='caption'>
<p class='captionInside'>musiKings</p>
</div></li>

<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/3.png' /></a>
<div class='caption'>
<p class='captionInside'>The Caribbean Energy Conference 2010</p>
</div></li>

<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/4.jpg' /></a>
<div class='caption'>
<p class='captionInside'>Coffee</p>
</div></li>

<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/5.jpg' /></a>
<div class='caption'>
<p class='captionInside'>Quantum</p>
</div></li>

<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/6.png' /></a>
<div class='caption'>
<p class='captionInside'>Infinite Love</p>
</div></li>

<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/7.jpg' /></a>
<div class='caption'>
<p class='captionInside'>Fathom</p>
</div></li>

<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/9.PNG' /></a>
<div class='caption'>
<p class='captionInside'>Mixed Pome</p>
</div></li>

<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/10.jpg' /></a>
<div class='caption'>
<p class='captionInside'>Golf Lessons Online</p>
</div></li>
<div class='clear'></div><!-- clear the float -->
</ul>
</div><!-- end spolightWrapper -->

Semoga bermanfaat yaa,, ^^
iklanBuruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
iklanBuruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
Diposkan Oleh ❖
  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

6 Komentar

Permalink
Mantap Artikelnya Mas Ini Cocok Buat Artikel Yang Penuh Gambar :D :Q Ijin Bookmark Yah :-d
Permalink
Iya Sob :Q Silahkan Di Bookmark Dan Thanks Udah Berkunjung :-d
Permalink
wach saya juga izin bookmark dech mas :D
Permalink
Silahkan Mas :D :Q
Permalink
terimakasih, tapi ini ko tidak membesar ?
Permalink
Sama'' Mas :D,Saya Memang Nggak Masukin Htmlnya Di Post Ini Untuk Nggak Ngeberatin :D :Q

Catatan
Dilarang menambahkan link aktif ataupun meng-iklankan suatu produk dll.
Kode yang panjang bisa menggunakan tag <i rel="pre"> KODE PANJANG ANDA </i>
Untuk menyisipkan gambar, gunakan tag <i rel="image"> URL GAMBAR </i>
Untuk menyisipkan Judul, gunakan tag <b rel="h3"> JUDUL ANDA DI SINI... </b>
Untuk menciptakan efek tebal gunakan tag <b> TEKS ANDA DI SINI... </b>
Untuk menciptakan efek huruf miring gunakan tag <i> TEKS ANDA DI SINI... </i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang kita bahas saat ini akan sangat bermanfaat bagi pembaca lain.
:):(^_^:D;):-bd:'(:\:pB):Q:Ozz7:(\o/**p<30:):-a7:O*fck*x@X@~x(:yaya::p*Klik Untuk Melihat Kode Emoticon!

Konversi Kode Special Character Comment Editor Virtual Pedoman Berkomentar Daftar Member Aktif

BATAL

gobottom