 |
| jQuery.popeye 2.1 可延展大小的圖片展示櫃 |
使用方法：
第一步 載入 jQuery.popeye 2.1 需要用到的 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- jQuery.popeye 2.1 的主程式碼-->
<script type="text/javascript" src="lib/popeye/jquery.popeye-2.1.min.js"></script>
第二步 在 HTML 上寫入圖片展示的位置
<div class="ppy" id="ppy1">
<ul class="ppy-imglist">
<li>
<a href="http://farm4.static.flickr.com/3461/3760102198_0e3de1eec3.jpg">
<img src="http://farm4.static.flickr.com/3461/3760102198_0e3de1eec3_m.jpg" alt="" />
</a>
<span class="ppy-extcaption">
<strong>Eyes of a Holcocephala fusca Robber Fly</strong><br />shot by flickr member Thomas Shahan<br />
<a href="http://www.flickr.com/photos/opoterser/3760102198/">View on flickr.com</a>
</span>
</li>
<li>
<a href="http://farm2.static.flickr.com/1317/908814138_9fa713a687.jpg">
<img src="http://farm2.static.flickr.com/1317/908814138_9fa713a687_m.jpg" alt="" />
</a>
<span class="ppy-extcaption">
<strong>Crocodile's eye</strong><br />shot by flickr member Tambako the Jaguar<br />
<a href="http://www.flickr.com/photos/tambako/908814138/">View on flickr.com</a>
</span>
</li>
<li>
<a href="http://farm4.static.flickr.com/3357/3633927491_d8864d5235.jpg">
<img src="http://farm4.static.flickr.com/3357/3633927491_d8864d5235_m.jpg" alt="" />
</a>
<span class="ppy-extcaption">
<strong>Daipeem</strong><br />shot by flickr member Furryscaly<br />
<a href="http://www.flickr.com/photos/furryscalyman/3633927491">View on flickr.com</a>
</span>
</li>
<li>
<a href="http://farm4.static.flickr.com/3335/3198858060_365ce0ba53.jpg">
<img src="http://farm4.static.flickr.com/3335/3198858060_365ce0ba53_m.jpg" alt="" />
</a>
<span class="ppy-extcaption">
<strong>basiliscus plumifrons</strong><br />shot by flickr member Joachim S. Müller<br />
<a href="http://www.flickr.com/photos/joachim_s_mueller/3198858060/in/set-72157612281941653/">View on flickr.com</a>
</span>
</li>
<li>
<a href="http://farm3.static.flickr.com/2597/4162969117_cbbc452a26.jpg">
<img src="http://farm3.static.flickr.com/2597/4162969117_cbbc452a26_m.jpg" alt="" />
</a>
<span class="ppy-extcaption">
<strong>Eyes of Jumping spider</strong><br />shot by flickr member Lukjonis<br />
<a href="http://www.flickr.com/photos/38628972@N05/4162969117/">View on flickr.com</a>
</span>
</li>
</ul>
<div class="ppy-outer">
<div class="ppy-stage">
<div class="ppy-nav">
<a class="ppy-prev" title="Previous image">Previous image</a>
<a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a>
<a class="ppy-switch-compact" title="Close">Close</a>
<a class="ppy-next" title="Next image">Next image</a>
</div>
</div>
</div>
<div class="ppy-caption">
<div class="ppy-counter">
Image <strong class="ppy-current"></strong> of <strong class="ppy-total"></strong>
</div>
<span class="ppy-text"></span>
</div>
</div>
第三步 設計圖片展示櫃的 CSS 樣式
.ppy-outer {
display: none;
}
.ppy-active .ppy-outer {
display: block;
}
.ppy-stage {
background-repeat: no-repeat !important;
background-position: center center !important;
position: relative;
}
.ppy-placeholder {
position: relative;
}
.ppy-caption,
.ppy-captionwrap {
overflow: hidden;
}
.ppy-hidden {
display: none !important;
}
.ppy-imglist {
width: 100%;
display: block;
overflow: hidden;
}
.ppy-imglist li {
padding: 10px;
border: 1px solid #f0f0f0;
border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
background: #fff;
list-style: none;
float: left;
display: block;
margin: 0 10px 10px 0;
}
.ppy-imglist li a img {
display: block;
border: 0;
}
#ppy1 .ppy-extcaption {
width: 240px;
display: block;
}
#ppy1 .ppy-imglist li {
width: 240px;
height: 270px;
}
#ppy2 .ppy-imglist li,
#ppy2 .ppy-imglist li a {
width: 160px;
height: 160px;
overflow: hidden;
display: block;
}
#ppy1.ppy-active {
width: 262px;
float: left;
margin: 0 20px 10px 0;
}
#ppy1 .ppy-outer {
padding: 10px;
border: 1px solid #e1f1a1;
border-radius: 0 10px 10px 10px;
-moz-border-radius: 0 10px 10px 10px;
-webkit-border-radius: 0 10px 10px 10px;
background: #eff9c7;
}
#ppy1 .ppy-stage {
width: 240px;
height: 173px;
border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
cursor: pointer;
}
#ppy1 .ppy-outer:hover,
#ppy1.ppy-expanded .ppy-outer {
border: 1px solid #d5e68e;
box-shadow: 0 0 7px #ccc;
-moz-box-shadow: 0 0 7px #ccc;
-webkit-box-shadow: 0 0 7px #ccc;
}
#ppy1 .ppy-caption {
margin: 5px 0 0 0;
padding: 10px;
font-size: 0.9em;
line-height: 1.3em;
color: #809f21;
background: #eeffa8;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 7px #ccc;
-moz-box-shadow: 0 0 7px #ccc;
-webkit-box-shadow: 0 0 7px #ccc;
visibility: hidden; /* prevent flash of content before popeye loads */
}
#ppy1 .ppy-caption a {
color: #66bde9;
}
#ppy1 .ppy-caption a:hover {
text-decoration:underline;
}
#ppy1 .ppy-counter {
border-bottom: 1px solid #d5e68e;
color: #b8cf5a;
padding: 0 0 2px 0;
margin: 0 0 5px 0;
font-size: 0.9em;
}
#ppy1 .ppy-stagewrap {
background: #0c3b3d;
border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
}
#ppy1 .ppy-loading {
background: #0c3b3d url(../../gfx/popeye/loading1.gif) no-repeat center !important;
}
#ppy1 .ppy-nav {
background: #0c3b3d;
background: -moz-linear-gradient(
center bottom,
rgb(12,59,61) 0%,
rgb(58,131,133) 100%
);
width: 104px;
height: 32px;
padding: 5px;
position: absolute;
top: 0;
left: 0;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
#ppy1 .ppy-nav a {
display: block;
overflow: hidden;
text-indent: -900em;
height: 22px;
float: left;
padding: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}
#ppy1 .ppy-prev {
width: 22px;
background: url(../../gfx/popeye/prev3.png) no-repeat center;
}
#ppy1 .ppy-next {
width: 22px;
background: url(../../gfx/popeye/next3.png) no-repeat center;
}
#ppy1 .ppy-switch-enlarge {
width: 30px;
background: url(../../gfx/popeye/enlarge3.png) no-repeat center;
}
#ppy1 .ppy-switch-compact {
width: 30px;
background: url(../../gfx/popeye/compact3.png) no-repeat center;
}
#ppy1 .ppy-nav a:hover {
background-color: #a1c436;
cursor: pointer;
}
第四步 寫入 JavaScript 程式片段來啟動 jQuery.popeye 2.1
$(function(){
$('#ppy1').popeye({/*可寫入參數*/});
});
附上 jQuery.popeye 2.1 可修改參數表
參數
|
類型
|
預設
|
說明 |
|---|---|---|---|
navigation
|
字串
|
'hover'
|
導航的顯示狀態可設定為滑鼠移過(hover),永久(permanent),不顯示(false) |
caption
|
字串
|
'hover'
|
文字導航可設定為滑鼠移過(hover),永久(permanent) |
zindex
|
整數
|
10000
|
圖層數值 z-index 設定 |
direction
|
字串
|
'right'
|
展開方向可設定為 right,left |
duration
|
整數
|
240
|
動畫執行時間以毫秒為單位 |
opacity
|
整數
|
0.8
|
透明度設定 |
easing
|
字串
|
'swing'
|
動畫的方式 |
slidespeed
|
整數
|
2000
|
自動撥放的時間間隔以毫秒為單位 |
autoslide
|
布林
|
false
|
是否自動撥放圖片 |
檔案大小：43.6 KB
檔案下載：http://dev.herr-schuessler.de/jquery/popeye/download/jQuery.popeye-2.1.zip
檔案備份：下載
0 意見