Gambar Bergantian

Demo :

JavaScript Blogger - Contoh 1 Gambar Bergantian
JavaScript Blogger - Contoh 2 Gambar Bergantian
JavaScript Blogger - Contoh 3 Gambar Bergantian
JavaScript Blogger - Contoh 4 Gambar Bergantian
JavaScript Blogger - Contoh 5 Gambar Bergantian

Current Panel: Total Panels:




Cara membuatnya

Dari Dashboard >> Design >> Edit HTML.


Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>

.stepcarousel{
background:#000;
position: relative;
border: 10px solid black;
overflow: scroll;
width: 270px;
height: 200px;
}
.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 10px;
width: 250px;
}

Langkah kedua > Penempatan URL dan JavaScript
dibawah ]]></b:skin>
........
diatas </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/Gambar%20Bergantian.js"></script>

<script type="text/javascript">

stepcarousel.setup({
 galleryid: 'mygallery',
 beltclass: 'belt',
 panelclass: 'panel', //class of panel DIVs each holding content
 autostep: {enable:true, moveby:1, pause:3000},
 panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
 defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://3.bp.blogspot.com/-wQT4GoXhquc/TV25ORKlF9I/AAAAAAAACZw/8g_7RLwGX-I/s1600/Nano+Yulianto-Left.png', -50, 80], rightnav: ['http://3.bp.blogspot.com/-JRCrs_gV5iA/TV25keK03hI/AAAAAAAACZ4/0yH_ve7S0OY/s1600/Nano+Yulianto-Right.png', -5, 80]},
 statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
 contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

</script>

Induk JQuery yang berwarna merah jika sudah ada, tidak perlu lagi !.


Langkah ketiga > Penempatan kode HTML
dibawah <body>
........
diatas </body>

<div id="mygallery" class="stepcarousel" style="width:530px;margin:0 auto;">
<div class="belt">

<div class="panel">
<img src="http://2.bp.blogspot.com/-DERIwOG03ks/TV27rO-jeKI/AAAAAAAACZ8/1dZVkVB4CzM/s1600/1-Nano+Yulianto.jpg" />
</div>

<div class="panel">
<img src="http://2.bp.blogspot.com/-PKoWp1oIqrg/TV27smBGXCI/AAAAAAAACaA/cq77Sawx5iU/s1600/2-Nano+Yulianto.jpg" />
</div>

<div class="panel">
<img src="http://2.bp.blogspot.com/-HcK35_T72SA/TV27uto7ioI/AAAAAAAACaE/j8nNzo1K7XI/s1600/3-Nano+Yulianto.jpg" />
</div>

<div class="panel">
<img src="http://1.bp.blogspot.com/-IzAbms3o76c/TV27yZf5obI/AAAAAAAACaI/VqscFxakEys/s1600/4-Nano+Yulianto.jpg" />
</div>

<div class="panel">
<img src="http://1.bp.blogspot.com/-BLpEVtq7OOU/TV27078pdQI/AAAAAAAACaM/gv_BWruqu1M/s1600/5-Nano+Yulianto.jpg" />
</div>

</div>
</div>

<p style="text-align:center;"><b>Current Panel:</b> <span id="statusA"></span> <b style="margin-left: 30px">Total Panels:</b> <span id="statusC"></span></p>



Credit : Dynamic Drive

Alhamdulillah

0 comments:


Posting Komentar


Creative Commons License
Gambar Bergantian by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2011/02/gambar-bergantian.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.