Cataloged Autobiography BERKENAAN SAYA  Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca.. | The Readable Journal MENEROKA ARTIKEL  Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini | Astrolab Tool KATEGORI ARTIKEL  Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini |
 BINA IMAGE SCROLLABLE CONTOH 1 |
| May 14, 2011 Posted by: Fauzie |
Dalam siri tutorial ini saya ingin tunjukkan bagaimana membina beberapa “scrollable” dengan menggunakan jQuery/javaScript. Untuk contoh pertama sila klik di sini. Seperti tutorial sebelum ini saya akan tunjukkan “live demo” dengan menggunakan “blog site” yang lain kerana terlau banyak script jQuery boleh mengganggu perjalanan lain-lain contoh yang terdapat di dalam blog saya ini.
Scrollable dalam contoh ini “berkerja” dengan cara mengklik “arrow button” atau butang (butang kiri atau butang kanan).
Saya tidak hendak membincangkan bagaimana scrollable ini dibina secara detail kerana anda perlu memahami kod-kod HTML dan CSS. Contoh ini menggunakan “horizontal CSS”. Seperti biasa jika anda ingin mencuba, sila copy and paste kod-kod bi bawah ini di dalam Notepad. Sila rujuk tutorial sebelum ini bagaimana anda save file, upload di browser dan juga bagaimanan hendak meletakkan di dalam blog.
Jom kita lihat kod-kod HTML, CSS dan javaScript yang digunakan di bawah ini.
<html>
<head>
<style type="text/css">
.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width: 680px;
height:120px;
/* custom decorations */
border:1px solid #ccc;
background:url(http://static.flowplayer.org/img/global/gradient/h300.png) repeat-x;
}
.scrollable .items {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
}
.items div {
float:left;
width:680px;
}
/* single scrollable item */
.scrollable img {
float:left;
margin:20px 5px 20px 21px;
background-color:#fff;
padding:2px;
border:1px solid #ccc;
width:100px;
height:75px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
/* active item */
.scrollable .active {
border:2px solid #000;
position:relative;
cursor:default;
}
.scrollable {
float:left;
}
a.browse {
background:url(http://static.flowplayer.org/tools/img/scrollable/arrow/hori_large.png) no-repeat;
display:block;
width:30px;
height:30px;
float:left;
margin:40px 10px;
cursor:pointer;
font-size:1px;
}
/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }
/* left */
a.left { margin-left: 0px; }
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }
/* up and down */
a.up, a.down {
background:url(http://static.flowplayer.org/tools/img/scrollable/arrow/vert_large.png) no-repeat;
float: none;
margin: 10px 50px;
}
/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }
/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }
/* disabled navigational button */
a.disabled {
visibility:hidden !important;
}
</style>
</head>
<body>
<!-- "previous page" action -->
<a class="prev browse left"></a>
<!-- root element for scrollable -->
<div class="scrollable">
<!-- root element for the items -->
<div class="items"><!-- 1-5 -->
<div><img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
</div>
<!-- gambar 5-10 -->
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
<img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
</div>
<!-- gambar 10-15 -->
<div>
<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
<img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
</div>
</div>
</div>
<!-- "next page" action -->
<a class="next browse right">
</a>
<br clear="all" />
<!-- javascript coding -->
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {
// initialize scrollable
$(".scrollable").scrollable();
});
</script>
</body>
</html>
<head>
<style type="text/css">
.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width: 680px;
height:120px;
/* custom decorations */
border:1px solid #ccc;
background:url(http://static.flowplayer.org/img/global/gradient/h300.png) repeat-x;
}
.scrollable .items {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
}
.items div {
float:left;
width:680px;
}
/* single scrollable item */
.scrollable img {
float:left;
margin:20px 5px 20px 21px;
background-color:#fff;
padding:2px;
border:1px solid #ccc;
width:100px;
height:75px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
/* active item */
.scrollable .active {
border:2px solid #000;
position:relative;
cursor:default;
}
.scrollable {
float:left;
}
a.browse {
background:url(http://static.flowplayer.org/tools/img/scrollable/arrow/hori_large.png) no-repeat;
display:block;
width:30px;
height:30px;
float:left;
margin:40px 10px;
cursor:pointer;
font-size:1px;
}
/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }
/* left */
a.left { margin-left: 0px; }
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }
/* up and down */
a.up, a.down {
background:url(http://static.flowplayer.org/tools/img/scrollable/arrow/vert_large.png) no-repeat;
float: none;
margin: 10px 50px;
}
/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }
/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }
/* disabled navigational button */
a.disabled {
visibility:hidden !important;
}
</style>
</head>
<body>
<!-- "previous page" action -->
<a class="prev browse left"></a>
<!-- root element for scrollable -->
<div class="scrollable">
<!-- root element for the items -->
<div class="items"><!-- 1-5 -->
<div><img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
</div>
<!-- gambar 5-10 -->
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
<img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
</div>
<!-- gambar 10-15 -->
<div>
<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
<img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
</div>
</div>
</div>
<!-- "next page" action -->
<a class="next browse right">
</a>
<br clear="all" />
<!-- javascript coding -->
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {
// initialize scrollable
$(".scrollable").scrollable();
});
</script>
</body>
</html>
Dalam contoh ini "frame" boleh dikurang daripada 5 kepada 3 dengan menukar lebar (width) seperti ini:
Sila pergi ke kod seperti di bawah ini dan tukar "width: 680px;" kepada "width:415px;".
.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width: 680px;
height:120px;
Lihat "Live Demo", di sini.
Kembali kepada | Archives →
Sebarang komen dan pertanyaan, sila klik butang di bawah ini:
