 |
| Ajaxy Photo Gallery (jQuery) with Custom Images Sets 照片展示櫃 |
使用方法：
第一步 載入程式所需要用到的 JavaScript 檔案
<!--使用 Google AJAX API 取得 jQuery 框架 1.8.2 的 min 版本-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
第二步 使用 HTML 畫出照片展示櫃的位置
<div class="example">
<h2>Ajax photo gallery (jQuery) with custom images sets</h2>
<div id="gallery">
<ul id="sets"></ul>
<div id="loading"></div>
<img id="photo" src="images/pic1.jpg" />
<ul id="thumbs"></ul>
</div>
</div>
第三步 為照片展示櫃設計CSS 樣式表
* {
margin:0;
padding:0;
}
body {
background:#eee;
margin:0;
padding:0;
}
.example {
position:relative;
background-color:#fff;
width:850px;
overflow:hidden;
border:1px #000 solid;
margin:20px auto;
padding:20px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* gallery styles */
#gallery {
background-color:#888;
height:630px;
overflow:hidden;
position:relative;
width:800px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#gallery ul#sets {
display:table;
list-style:none outside none;
margin:10px auto;
overflow:hidden;
}
#gallery ul#sets li {
float:left;
margin-right:10px;
}
#gallery ul#sets li a {
background-color:#000;
color:#fff;
cursor:pointer;
display:block;
font-size:14px;
font-weight:normal;
height:26px;
line-height:26px;
padding:10px 20px;
text-decoration:none;
-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px 5px 5px 5px;
background: -moz-linear-gradient(#363636, #010101); /* FF 3.6+ */
background: -ms-linear-gradient(#363636, #010101); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #363636), color-stop(100%, #010101)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(#363636, #010101); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(#363636, #010101); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#363636', endColorstr='#010101'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#363636', endColorstr='#010101')"; /* IE8+ */
background: linear-gradient(#363636, #010101); /* the standard */
}
#gallery ul#sets li a:hover{
background-color:#ff6a11;
background: -moz-linear-gradient(#ff9317, #ff6a11); /* FF 3.6+ */
background: -ms-linear-gradient(#ff9317, #ff6a11); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff9317), color-stop(100%, #ff6a11)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(#ff9317, #ff6a11); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(#ff9317, #ff6a11); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9317', endColorstr='#ff6a11'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9317', endColorstr='#ff6a11')"; /* IE8+ */
background: linear-gradient(#ff9317, #ff6a11); /* the standard */
}
#gallery #loading {
text-align:center;
}
#gallery #photo {
display:block;
margin:10px auto;
}
#gallery ul#thumbs {
bottom:-25px;
left:250px;
list-style:none outside none;
margin:0 auto;
opacity:0.5;
overflow:hidden;
position:absolute;
width:300px;
-moz-transition: bottom 0.5s ease-in-out;
-ms-transition: bottom 0.5s ease-in-out;
-o-transition: bottom 0.5s ease-in-out;
-webkit-transition: bottom 0.5s ease-in-out;
transition: bottom 0.5s ease-in-out;
}
#gallery ul#thumbs:hover {
opacity:1;
bottom:10px;
}
#gallery ul#thumbs li {
border:1px solid #888;
cursor:pointer;
float:left;
height:38px;
width:58px;
}
#gallery ul#thumbs li:hover {
border:1px solid #fff;
}
#gallery ul#thumbs li img {
width:100%;
}
第四步 寫入 JavaScript 的內容
// defining sets of images (galleries)
var images = {
'set 1' : [
'pic1.jpg',
'pic2.jpg',
'pic3.jpg',
'pic4.jpg',
'pic5.jpg',
'pic6.jpg',
'pic7.jpg',
'pic8.jpg',
'pic9.jpg',
'pic10.jpg'
],
'set 2' : [
'pic2.jpg',
'pic3.jpg',
'pic4.jpg',
'pic5.jpg',
'pic6.jpg',
'pic7.jpg',
'pic8.jpg',
'pic9.jpg',
'pic10.jpg',
'pic11.jpg',
'pic12.jpg',
'pic5.jpg',
'pic6.jpg',
'pic7.jpg',
'pic8.jpg'
],
'set 3' : [
'pic1.jpg',
'pic2.jpg',
'pic3.jpg',
'pic4.jpg',
'pic5.jpg',
'pic6.jpg',
'pic7.jpg',
'pic8.jpg',
'pic9.jpg',
'pic10.jpg',
'pic11.jpg',
'pic12.jpg',
'pic4.jpg',
'pic5.jpg',
'pic6.jpg'
]
};
$(document).ready(function(){ // on document ready
$('#gallery').gallery();
});
$.fn.gallery = function() {
var self = this;
var setimgs;
this.each(function() {
var g = this;
g.load_sets = function(el) { // function - load sets of images
$.each(images, function(key, value) {
$(el).append('<li><a id="'+key+'" href="#" title="'+key+'">'+key+'</a></li>');
});
var sets = $(el).find('li a');
$(sets).click(function() { // binding onclick to our sets
var set = $(this).attr('id');
g.setimgs = images[set];
$(g).find('#thumbs').html('');
g.load_thumbs($(g).find('#thumbs')[0], 0);
$(g).find('#loading').html('Loading <strong>1</strong> of '+g.setimgs.length+' images');
});
sets[0].click();
}
g.load_thumbs = function(el, index) { // function - load thumbs of set
$(el).append('<li><img id="' + g.setimgs[index] + '" src="images/thumb_' + g.setimgs[index] + '" /></li>');
var tn = new Image();
$(tn).load(function() {
var a = $($(el).find('li')[index]).find('img')[0];
$(a).append(this);
$(a).click(function() { // binding onclick to thumbs
var i = $(this).attr('id');
$(g).find('#photo').attr('src', 'images/'+i);
return false;
});
if ((index + 1) < g.setimgs.length) {
g.load_thumbs(el, (index + 1));
$(g).find('#loading strong').html(index + 2);
} else {
$(g).find('#loading').html('Finished loading <strong>' + g.setimgs.length + '</strong> images');
$($(g).find('#thumbs li img')[0]).click();
}
});
tn.src = 'images/thumb_' + g.setimgs[index];
}
// oninit - load sets for gallery
g.load_sets($(g).find('#sets')[0]);
});
};
檔案大小：834 KB (包含範例)
檔案下載：http://www.script-tutorials.com/demos/136/source.zip
檔案備份：下載
0 意見