21 April 2013

Cara membuat galeri gambar atraktif dengan JQuery di blog

Posted at  09.36  |  in  tips dan triks blog





  • Tambahkan kode berikut didalam HTML/Javascript pada menu Tata Letak di blog  
  • Klik Tata letak -> Tambahkan gadget (masukan kode) -> Simpan gadget.
 <style type="text/css">
.container1 {
 width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
 position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
/*--Window/Masking Styles--*/
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
 position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_btrix {
 position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center;
 line-height: 40px;
 background: url(http://1.bp.blogspot.com/-UQAJVYvatlY/UTbGMUctYcI/AAAAAAAAHIE/PSM-s1tbAd8/s1600/paging_btrix_bg2.png) no-repeat;
 display: none;
}
.paging_btrix a {
 padding: 5px;text-decoration: none;color: #fff;
}
.paging_btrix a.active {
 font-weight: bold; background: #920000; border: 1px solid #610000;
 -moz-border-radius: 3px;
 -khtml-border-radius: 3px;
 -webkit-border-radius: 3px;
}
.paging_btrix a:hover {font-weight: bold;}
</style>
<!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka -->
<div class="container1">
<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="https://www.blogger.com/blogger.g?blogID=5349897931690169537#"><img alt="" src="http://i1087.photobucket.com/albums/j479/jalupangna/Yogi-Bear-Movie.jpg" /></a>
            <a href="https://www.blogger.com/blogger.g?blogID=5349897931690169537#"><img alt="" src="http://i1087.photobucket.com/albums/j479/jalupangna/toy-story-3-1.jpg" /></a>
            <a href="https://www.blogger.com/blogger.g?blogID=5349897931690169537#"><img alt="" src="http://i1087.photobucket.com/albums/j479/jalupangna/toy-story-3.jpg" /></a>
            <a href="https://www.blogger.com/blogger.g?blogID=5349897931690169537#"><img alt="" src="http://i1087.photobucket.com/albums/j479/jalupangna/pixars-up.jpg" /></a>
        </div>
    </div>
    <div class="paging_btrix">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 //Set Default State of each portfolio piece
 $(".paging_btrix").show();
 $(".paging_btrix a:first").addClass("active");

 //Get size of images, how many there are, then determin the size of the image reel.
 var imageWidth = $(".window").width();
 var imageSum = $(".image_reel img").size();
 var imageReelWidth = imageWidth * imageSum;

 //Adjust the image reel to its new size
 $(".image_reel").css({'width' : imageReelWidth});

 //paging_btrix + Slider Function
 rotate = function(){
  var triggerID = $active.attr("rel") - 1; //Get number of times to slide
  var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
  $(".paging_btrix a").removeClass('active'); //Remove all active class
  $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

  //Slider Animation
  $(".image_reel").animate({
   left: -image_reelPosition
  }, 500 );

 };

 //Rotation + Timing Event
 rotateSwitch = function(){
  play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
   $active = $('.paging_btrix a.active').next();
   if ( $active.length === 0) { //If paging_btrix reaches the end...
    $active = $('.paging_btrix a:first'); //go back to first
   }
   rotate(); //Trigger the paging_btrix and slider function
  }, 5000); //Timer speed in milliseconds (3 seconds)
 };

 rotateSwitch(); //Run function on launch

 //On Hover
 $(".image_reel a").hover(function() {
  clearInterval(play); //Stop the rotation
 }, function() {
  rotateSwitch(); //Resume rotation
 });

 //On Click
 $(".paging_btrix a").click(function() {
  $active = $(this); //Activate the clicked paging_btrix
  //Reset Timer
  clearInterval(play); //Stop the rotation
  rotate(); //Trigger rotation immediately
  rotateSwitch(); // Resume rotation
  return false; //Prevent browser jump to link anchor
 });

});
</script>
  • Kalau mau mengganti link gambar, Lihat pada script diatas yang berwarna Merah. Ganti link gambar sesuai keinginan anda
Happy Blogging...

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 09.36
Anda menyukai postingan di atas? Silahkan di share..!
Blogging dan wawasan spiritual Post Author

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

19 komentar:

  1. Waw bagus bgt neh,,
    ini yang gw carii,, thank you ya,,,
    jangan lupa mampir kblog saya ya klo sempet,,

    http://nabianz.blogdetik.com/2013/04/15/teknologi-hijau-3-tahapan-genius-daihatsu-untuk-masa-depan/

    BalasHapus
    Balasan
    1. Terima kasih banyak kang, udah mau berkunjung ke blog saya. Salam kenal... Insya Allah nanti blogwalking ke blog anda. Ok..you're welcome.. :)

      Hapus
  2. makasih ya kang udah blogwalking..
    tapi keren infonya bermanfaat buat saya buat bikin web tugas akhir saya.
    jd mau berguru nih hehehe

    BalasHapus
    Balasan
    1. Sama-sama...hehe..saya do'akan semoga sukses selalu, amiin..sebenarnya kuncinya kemauan keras dan upaya yg kuat insya berhasil. Saya belum pantes di bilang master tapi lebih enaknya kita share bareng aja ok? :)

      Hapus
  3. ok kang,, thx tips'nya
    ok sip dtungu share artikel lainya kang, keren ulasan blognya.
    oya tadi link blog saya lg ikut lomba blog,
    *ikutan dunk kang hehehe

    BalasHapus
    Balasan
    1. iya, sama-sama. Insya Allah nanti akan update lagi artikel lainnya. hehe..saya belum pantes ikut lomba blog, masalahnya masih dalam tahap belajar dan harus banyak belajar lagi dari para master blogger yang lain.

      Hapus
  4. kang ngerendah za nih,,
    tapi bg saya mah udah master kang 8-)
    kang boleh minta script yang "recent comment" ga?

    BalasHapus
    Balasan
    1. Boleh, nanti sekalian aja saya postingkan ya?..

      Hapus
    2. ok sipp kang,, terimakasih

      Hapus
    3. Sama-sama, follow blog saya donk nanti saya follow back lagi ok?

      Hapus
    4. okey deh kang dah aq follow,,, sip..
      Like dunk yang td postingan yg saya ikut lomba blog td *lagipromosi :))
      woww thankz kang langsung Update postinganya hari ini udah ada. hehe

      Hapus
    5. ok, terima kasih banyak. Langsung ke TKP.. :-)

      Hapus
    6. terimakasih banyak dah kang klo gtu... :)

      Hapus
  5. saya juga masih banyak belajar nih bikin kaya punya mas jalupangna, banyak artikelnya untuk pembelajaran buat saya. salam.

    BalasHapus
    Balasan
    1. 'Alaikassalaam...wr..wb. Saya juga masih belajar secara otodidak sampai sekarang, karena basicly saya bukan programmer atau ahli di bidang IT. Cuma sering banyak baca tutorial blogging aja sambil praktek. Terima kasih sobat kunjungannya..

      Hapus
  6. Oh ya mas itu bisa gk ditambahkan deskripsi foto di setiap fotonya,pliss reply !

    BalasHapus
    Balasan
    1. Kalau slider galery image yang ini ga bisa kita kasih deskripsi karena bawaan defaultnya seperti itu, tapi kalau slider yang satu lagi bisa. Coba anda baca tutorialnya:
      http://jalu-pangna.blogspot.com/2013/04/cara-membuat-slider-gambar-menghilang.html

      Hapus
  7. mo tak coba dulu di blog ku mas , kira2 blog nya ntar jadi berat g ya ? makasih

    BalasHapus
    Balasan
    1. Silahkan mas, yg jelas supaya tidak terlalu memberatkan loading blog alangkah baiknya javascript dan css code nya di kompress dulu.

      Hapus

About Us-Privacy Policy-Contact us
Copyright © 2013 Wawasan spiritual dan blogging. Blogger Template by BloggerTheme9
Proudly Powered by Blogger.
back to top