jQuery Cycle Plugin . Nice !!

Hai hai... hai bro sist.. hwkwkwkwkwk posting lagi nih . masih bergulir di dunia image . Seperti kata pepatah banyak jalan menuju roma, ribuan cara pula menampilkan image galery kamu . hwehe..

jQuery Cycle Plugin . Inti plugin ini sebenarnya adalah slidshow, tapi kalau dilihat mungkin berbeda jauh dari slideshow .

Untuk Demonya Lihat Disini

Demo

List demo Cycle Plugin

1. Image Shuffle
2. Image Bounce
3. Image Bounce 2
4. Image Custom

Cukup bagus dan lebih menarik untuk menampilkan galery gambar .

Langsung ajah caranya sob...

1. Pertama masukan script jquery ini..

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

Nb: Kalo udah ada lewat ajah, biar ga doble .

2. Tyus masukan juga kedua script dibawh ini tepat dibawah script di atas,

<script src='http://granoblog.googlecode.com/files/jquery.cycle.js' type='text/javascript'></script>

<script src='http://granoblog.googlecode.com/files/jquery.easing.js' type='text/javascript'></script>

Nb: Hostingin sendiri scriptnya yah sob ??

3. ini sedikit cssnya

.pics { height: 232px; width: 232px; padding:0; margin:0; overflow: hidden }
.pics img { height: 200px; width: 200px; padding: 15px; border: 1px solid #ccc; background-color: #eee; top:0; left:0 }
.pics img {
-moz-border-radius: 10px; -webkit-border-radius: 10px;
}

4. javscriptnya bro..

Shuffle.

<script type='text/javascript'> 
  $('#shuffle').cycle({ 
    fx:    'shuffle', 
    delay: -4000 
});
 
</script> 

Shuffle2.

<script type='text/javascript'> 
$('#shuffle2').cycle({ 
    fx:   'shuffle', 
    shuffle: { 
        top:  -230, 
        left:  230 
    }, 
    easing: 'backinout', 
    delay: -2000 
});</script> 

Bounce in.

<script type='text/javascript'> 
$('#bouncein').cycle({ 
    fx:     'zoom', 
    easing: 'bouncein', 
    delay:  -4000 
});</script> 

Bounceout.

<script type='text/javascript'> 
$('#bounceout').cycle({ 
    fx:     'scrollDown', 
    easing: 'bounceout', 
    delay:  -2000 
});</script> 
<script type='text/javascript'> 
 

Bouncein2.

$('#bouncein2').cycle({ 
    fx:      'zoom', 
    speedIn:  2500, 
    speedOut: 500, 
    easeIn:  'bouncein', 
    easeOut: 'easeout', 
    sync:     0, 
    delay:   -4000 
});</script> 
<script type='text/javascript'> 
 

Bounceout2.

$('#bounceout2').cycle({ 
    fx:      'scrollDown', 
    speedIn:  2000, 
    speedOut: 500, 
    easeIn:  'bounceout', 
    easeOut: 'backin', 
    delay:   -2000 
});</script> 
<script type='text/javascript'> 
 

Custom

$('#custom').cycle({ 
    fx:      'custom', 
    cssBefore:{  
        left: 232,   
        top: -232,  
        display: 'block' 
    }, 
    animIn: {  
        left: 0, 
        top: 0  
    }, 
    animOut: {  
        left: 232,   
        top: 232 
    }, 
    delay: -3000 
});</script> 
 

Custom2.

<script type='text/javascript'> 
$('custom2').cycle({ 
    fx:      'custom', 
    sync: 0, 
    cssBefore: {  
        top:  0, 
        left: 232, 
        display: 'block' 
    }, 
    animIn:  { 
        left: 0 
    }, 
    animOut: {  
        top: 232 
    }, 
    delay: -1000 
});
});</script>  
 

Nb: Masukan salah satu sesuai selere kamu sob...

5 HTMLnya bro atau pemakaianya..

 <div id="custom" class="pics"> 
            <img width="200" src="img1.jpg" height="200"/> 
            <img width="200" src="img2.jpg" height="200"/> 
            <img width="200" src="img3.jpg" height="200"/> 
        </div> 
 

atau

 <div id="shuffle" class="pics"> 
            <img width="200" src="img1.jpg" height="200"/> 
            <img width="200" src="img2.jpg" height="200"/> 
            <img width="200" src="img3.jpg" height="200"/> 
        </div> 
 

Nb: untuk div id= ini sesuaikan dengan kebutuhan atau effect pada javascriptanya . Misal kalo butuh effect bouncein2 tulis ajah div id='bouncein2' .

Gimana ??? gampang kan?? bagus lagi . yah mudah2an bermanfaat bagi sobat sobat semua...

Readmore

Image Cube 3D with jQuery !

Another way to present your image galery ! Akhir2 ini lagi seneng main2 sama yg namanya gambar, hehehe banyak banget cara bagus buat nampilin gambar, contohnya yang satu ini . Menampilkan gambar dengan bentuk cube / kotak yg terlihat 3D . untuk lebih jelasnya lihat demonya disini .

Demo

Gimana ?? cukup bagus juga kan untuk menampilkan image ?? langsung ajah caranya sob .

1. masukan jquery ini ..

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'> </script> 
<script src='http://granoblog.googlecode.com/files/imagecube.js' type='text/javascript'>

Nb: untuk http://granoblog.googlecode.com/files/imagecube.js bisa di download dan di hostingkan sendiri .

2. ini sedikit css nya..

 #cube { width: 200px; height: 150px; }

3. ini sedikit javascriptnya..

<script type='text/javascript'> 
$(function () {
 $('#cube').imagecube({imagePath: 'img/'});
});
</script> 

4. terkahir HTMLnya..

<div id="cube"> 
 <img alt="" src="gambar.jpg" title=""/> 
 <img alt="" src="gambar.jpg" title=""/> 
 <img alt="" src="gambar.jpg" title=""/> 
</div>

nah mudah kan... bagus lagi . hhehehehe semoga bermanfaat ya sob ??

Readmore

Membuat Background Blog Berubah-ubah (Slideshow) dengan jQuery !

Hola sista brotha,, saya balik lagi dengan membawa info hangat buat sobat...tetap berkelimpung di dunia jQuery sekarang saya akan share cara membuat background blog kita menjadi background slideshow . Untuk lebih jelasnya lihat demonya disni

Demo

Realy cool .. ! sedikit berbeda dari effect background blog biasanya yg berganti kalo blog melakukan refresh / reload . Yang ini akan berubah-ubah tanpa reload lagi, (namanya juga slideshow... gitu) dan juga sedikit mempercantik dengan menggunakan preloader image pada backgroundnya .

Tanpa banyak cincong.. cabut aja sob ni caranya..

1 Karena plugin jquery, masukan script ini

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

2 lalu masukan juga script dibawh ini tepat dibawah script di atas,

 <script src='http://granoblog.googlecode.com/files/maximage.js' type='text/javascript'/> 

Nb: untuk script diatas bs di hostingkan sendiri, dan sekarang saya udah menemukan tempat hosting terbaik dari hostingan manapun, yaitu code.google.com
hahahhahaa (katro ah..) thanks mang beben .

3 mesukan juga scrpit js ini dibawah script di atas

<script type='text/javascript'<
  $(document).ready(function(){
   $('img.maximage').maxImage({
    verticalOffset: 91,
    horizontalOffset: 520
   });
   
   $('img.bgmaximage').maxImage({
     isBackground: true,
     verticalAlign: 'top'
    });
  
   $('img.widthmaximage').maxImage({
    verticalOffset: 91,
    horizontalOffset: 520,
    maxFollows: 'width'
   });
   
   $('img.maxAtOrigImageSize').maxImage({
    verticalOffset: 91,
    horizontalOffset: 520,
    maxAtOrigImageSize: true
   });
   
   $('img.slidemaximage').maxImage({
    isBackground: true,
    slideShow: true,
    verticalAlign: 'top',
    slideShowTitle: true,
    maxFollows: 'height'
   });
  });
 </script>

4. ini ad sedikit css juga..

.slidemaximage { display:none; } 
.loader        { position:absolute;z-index:9999;width:39px;height:39px;top:49%;left:49% }

5. Yang terakhir sob, masukan di dalam tag body yah..

<img src="images/loading.gif" class="loader" /> 
 <img src="images/slides/slide01.jpg" alt="BgSlide Tester" title="title buat imagenya" class="slidemaximage" /> 
 <img src="images/slides/slide02.jpg" alt="BgSlide Tester" title="title buat imagenya" class="slidemaximage" /> 
 <img src="images/slides/slide03.jpg" alt="BgSlide Tester" title="title buat imagenya" class="slidemaximage" /> 
 <img src="images/slides/slide04.jpg" alt="BgSlide Tester" title="title buat imagenya" class="slidemaximage" /> 
 <img src="images/slides/slide05.jpg" alt="BgSlide Tester" title="title buat imagenya" class="slidemaximage" /> 

Nb: untuk images/loading.gif ini gambarnya



dan untuk link2 gambarnya, itu untuk background yg akan digunakan .

nah gimana sob ? usefull gag yah ? gampang kan ? semoga bermanfaat ajah deh bro .

Readmore

Membuat Menu / Image Scrolling dengan jQuery

Just another way to show your image galery . hoahoahoahoa . Waktu bloging bnyk boger yg make slideshow buat nampilin image dan sebagainya, sekarang saya mau share cara nampilin image yg sedikit berbeda, tapi sama . lha ? gimana maksudnya ? coba lihat demonya disini,

Demo

yup begitulah bedanya, hahahaha langsung ajah cara buatnya, its very simple bro, sist .

1. masukin script jquerynya,

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

Nb: Kalo udah ada, tinggalin ajah .
2.Ini css nya..

div.sc_menu {
 position: relative;
 height: 145px;
 width: 500px;
 overflow: auto;
}
ul.sc_menu {
 display: block;
 height: 110px; 
 width: 1500px; 
 padding: 15px 0 0 15px; 
 margin: 0;
 background: #000;  
 list-style: none;
}
.sc_menu li {
 display: block;
 float: left; 
 padding: 0 4px;
}
.sc_menu a {
 display: block;
 text-decoration: none;
}
.sc_menu span {
 display: none;
 margin-top: 3px;
 
 text-align: center;
 font-size: 12px; 
 color: #fff;
}
.sc_menu a:hover span {
 display: block;
}
.sc_menu img {
 border: 3px #fff solid; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.sc_menu a:hover img {
 filter:alpha(opacity=50); 
 opacity: 0.5;
}

Nb: bs dirubah sesuka hati kog . cocokin sama template gitu..

3. ini javascriptnya..

<script type= "text/javascript">/*<![CDATA[*/
$(function(){
 //Get our elements for faster access and set overlay width
 var div = $('div.sc_menu'),
  ul = $('ul.sc_menu'),
  ulPadding = 15;
 
 //Get menu width
 var divWidth = div.width();
 
 //Remove scrollbars 
 div.css({overflow: 'hidden'});
 
 //Find last image container
 var lastLi = ul.find('li:last-child');
 
 //When user move mouse over menu
 div.mousemove(function(e){
  //As images are loaded ul width increases,
  //so we recalculate it each time
  var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding; 
  var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
  div.scrollLeft(left);
 });
});
/*]]>*/</script> 

Gag banyak2 amat kan sob.. hohohoho .

4. Yg terkahir bro. The HTML .

<div class="sc_menu"> 
 <ul class="sc_menu"> 
     <li><a href="#"><img src="img/1.jpg" alt="Menu"/><span>Menu</span></a></li> 
     <li><a href="#"><img src="img/2.jpg" alt="Navigation"/><span>Navigation</span></a></li> 
     <li><a href="#"><img src="img/3.jpg" alt="Javascript"/><span>jQuery</span></a></li> 
     <li><a href="#"><img src="img/4.jpg" alt="CSS"/><span>Scroll</span></a></li> 
     <li><a href="#"><img src="img/5.jpg" alt="Horizontal"/><span>Horizontal</span></a></li> 
     <li><a href="#"><img src="img/6.jpg" alt="jQuery"/><span>jQuery</span></a></li> 
     <li><a href="#"><img src="img/1.jpg" alt="Menu"/><span>Menu</span></a></li> 
     <li><a href="#"><img src="img/2.jpg" alt="Navigation"/><span>Navigation</span></a></li> 
     <li><a href="#"><img src="img/3.jpg" alt="Graceful"/><span>Graceful</span></a></li> 
     <li><a href="#"><img src="img/4.jpg" alt="Degradation"/><span>Degradation</span></a></li> 
     <li><a href="#"><img src="img/5.jpg" alt="Progressive"/><span>Progressive</span></a></li> 
     <li><a href="#"><img src="img/6.jpg" alt="Enhancement"/><span>Enhancement</span></a></li> 
 </ul> 
</div> 

nah jadi deh scrolling imagenya . bisa buat navigasi menu juga seperti judulnya . ato galery image . gimana sob ? gampang kan..

Readmore

Thumbnail Hover Effect dengan jQuery

Hoi sobat2 giblog, saya posting lagi nih . Kali ini saya akan share cara buat effect thumbnail hover dengan jquery . Bingung apa maksud dari judul nya ??

liat contoh nya disni,

Demo

nah keren kan buat nampilin image ?? di demo saya gunain buat nampilin banner sahabat giblog, biar keren banner2nya saya kasih effect thumbnail, hehehe .

Mau gimana cara buatnya ?? mau ga mau saya mau share . hohoho .

1. Seperti biasa masukan script ajax ini,

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

Nb: kalo udah punya, biarin ajah biar ga doble .

2. Ini css nya sob.

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

Nb:
Untuk thumb_bg.png tmn2 ganti sm url gambar ini .



3. Make it life.. hohoho ini javascript nya

$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/
$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
.animate({
marginTop: '-110px', /* The next 4 lines will vertically align this image */
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px', /* Set new width */
height: '174px', /* Set new height */
padding: '20px'
}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

} , function() {
$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
$(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
.animate({
marginTop: '0', /* Set alignment back to default */
marginLeft: '0',
top: '0',
left: '0',
width: '100px', /* Set width back to default */
height: '100px', /* Set height back to default */
padding: '5px'
}, 400);
});

4. Yup trakhir html nya atau pemakaian nya,

<ul class="thumb">
<li><a href="#"><img src="thumb1.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb2.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb3.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb4.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb5.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb6.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb7.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb8.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb9.jpg" alt="" /></a></li>
</ul>

nah begitu lah, gampang kan ?? semoga bermanfaat yah sob .

Readmore

Menampilkan Gambar / Teks dengan Box Style Facebook jQuery

Yuph Brotha.. sekarang saya coba share cara buat modal box dengan style facebook, biasa na banyak digunakan untuk nampilin gambar ato tulisan2 tertentu gitu,

Contoh na klik ajah facebox di atas sob,

ato

untuk contoh nampilin gambar,

Klik Disini Sob

nah begitu lah contoh na..
mau ?

langsung ajah caranya..

1. Masukan script jquery berikut dibawah <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

2. Masukan Javascript berikut dibawah script jquery tadi,

<script src='http://www.hotlinkfiles.com/files/2644259_k5ca6/facebox.js' type='text/javascript'/>

<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>

3. Masukan juga css-nya sob..
/*Facebox*/
#facebox .b {
background:url(http://www.hotlinkfiles.com/files/2644245_c74zp/b.png);
}
#facebox .tl {
background:url(http://www.hotlinkfiles.com/files/2644250_gzeak/tl.png);
}
#facebox .tr {
background:url(http://www.hotlinkfiles.com/files/2644244_e9l2g/tr.png);
}
#facebox .bl {
background:url(http://www.hotlinkfiles.com/files/2644246_e5qa5/bl.png);
}
#facebox .br {
background:url(http://www.hotlinkfiles.com/files/2644247_c2fz9/br.png);
}
#facebox {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
text-align: left;
}
#facebox .popup {
position: relative;
}
#facebox table {
margin: auto;
border-collapse: collapse;
}
#facebox .body {
padding: 10px;
background: #fff;
width: 370px;
}
#facebox .loading {
text-align: center;
}
#facebox .image {
text-align: center;
}
#facebox img {
border: 0;
}
#facebox .footer {
border-top: 1px solid #DDDDDD;
padding-top: 5px;
margin-top: 10px;
text-align: right;
}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
height: 10px;
width: 10px;
overflow: hidden;
padding: 0;
}

4. Sekarang pemanggilannya.. Untuk Facebox Berisi Tulisan, pertama Sobat Masukan script dbwah ini di atas </body>
<div id="info" style="display:none;">
Isi tulisan sobat disini
</div>

Lalu, masukan script dibawah ini dtempat yg sobat mau,

<a href="#info" rel="facebox">Klik Disini Sob</a>


NB: #info adalah tag pemanggil untuk div info .
rel adalah tag yg digunakan untuk memakai facebox .

Untuk Facebox berisi gambar, tanpa memasukan div, langsung memasukan script dibawah ini ditempat yg sobat mau,

<a href="http://i27.tinypic.com/t66skw.jpg" rel="facebox">Klik Disini Sob</a>

NB: http://i27.tinypic.com/t66skw.jpg adalah url gambar, ganti dengan url gambar yg sobat mau .

Selesai... gmnah ? mau coba ??

Readmore

Memasukan Script ke dalam Gambar / Image

Ini adalah trik dasar Hacking Web yg di kembangkan lanjut menjadi media penyebaran Virus, Trojan, Phissing dll... dan juga bisa digunakan utk menyisipkan script/code dc (restarter), script hang hp, dll ke dalam image...

Trik lama ini aku munculkan disini, guna antisipasi atas maraknya aksi penyebaran picture/image bermuatan script, baek script virus, restarter, trigger, dll..

Metode Injeksi (insert) script ke dalam suatu picture adalah sebagai berikut:

Bahan-bahan:

• Script yg sesuai tujuan penggunaan... Bisa script injection, virus, code utf, dll.
• Image/picture berekstensi jpg, bmp, gif dan png serta image lainnya.
• Sebagai contoh: script dengan namatest.txtdan image berupaicon.bmp,disimpan bersama-sama dalam folder c:\jpgofdeath

Langkah-langkah

• Buka Command Prompt.. Soal ini udah pada tau kan.
  START > RUN > ketik "cmd" tekan [enter].
  
  
  
  
• Ketik "cd \(nama folder tempat file2 bersangkutan)" tekan [enter]
  contoh: ketik "cd \jpgofdeath" dimana jpgofdeath adalah nama folder tempat file-file utk uji coba.
  
• Ketik "dir", tekan [enter] untuk melihat isi direktori folder dan nama file dalam command prompt, (biasanya berbeda nama file dalam windows eksplorer dan command prompt).
  Untuk mengecek/melihat isi file gunakan perintah "type [nama file]" tekan [enter]
  Tidak usah khawatir dgn munculnya suara noise saat membuka file image dlm command prompt.. abaikan saja, hanya peringatan bahwa kita membuka file dgn aplikasi yg tidak disarankan.
  Sebagai contoh seperti pada gambar di bawah ini:
  
• Langkah terakhir adalah menyisipkan/menginjeksi script dalam file text ke dalam file image.
  Ketik "type [nama file text] >> [nama file image]" tekan [enter].
  Nama file harus lengkap dengan ekstensi file bersangkutan. Jika berhasil maka resultnya PC tidak akan berbunyi nyaring atau tidak akan menampilkan pesan kesalahan.
  Sebagai contoh seperti pada gambar di bawah ini:
  

NOTE:

• _{Perintah2 dalam langkah2 diatas jalankan tidak menggunakan tanda kutip}
• _{Kode ">>" itu pada tombol yg ada titik ( [shift] [.] )}

Perhatikan hasil menyisipkan script dalam kotak berwarna biru kedua.
Bandingkan dgn image icon.bmp yg asli dalam kotak biru diatasnya (pertama).

Untuk attacking di PC, trik ini sudah di antisipasi dengan windows xp patch service pack 2 keatas. Sehingga bagi pengguna PC di bawah windows xp service pack 2.0 masih rentan dengan bug ini. Bagi pengguna windows vista dan windows 7 sudah include patch terhadap bug dgn metode ini.

Kendala adalah pada sistem operasi HP yg berbasiskan Java, Symbian maupun mobile OS. Walaupun sementara ini masih berkutat pada injeksi script sederhana (virus, restarter, dll), tidak menutup kemungkinan adanya bug pada pembacaan Header Image yg sudah di injeksi script. Karena cara kerja metode ini adalah dengan memanfaatkan pembacaan header file image.

Perkembangan dari metode injeksi script ini, adalah dengan menginjeksi script virus, restarter, zombie, dan lain2.Antisipasi terhadap trik ini adalah dgn berhati2 terhadap tiap file image yang masuk . Sehingga jika menerima kiriman file misterius, anda bisa memeriksa file tersebut .

Readmore