*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2017年7月20日 星期四

完全DIY 快速自製 image gallery






網頁程式寫作
完全DIY
快速隨意的自製出 image gallery



Schneider 老鏡,是我最喜的老鏡頭!
柔和、與世無爭、甜淡、純顏色的一種姿態呈現。
Canon 5D + schneider 50mm f2.8 M42 。click more…▼






123 456 789 101112 範例後的文字



寫作語法範例:

<div style="width: 576px; height: 384px;"
onclick="$(this).myPlugin20170720();" class="idoitimgga20170719">
<img
style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4309/35183964774_76cfb39f64_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4304/35981836736_be0d486a4a_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4323/35183956484_58fc3cd977_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4208/35836631096_60e8ee7fea_o.jpg"><br>
<img style="width: 576px; height: 384px;" alt=""
src="https://farm5.staticflickr.com/4279/35067718253_93b04e03d6_o.jpg"><br>
</div>



發想概念:

一、請設定出想要大小的DIV。並設定寬、高。
二、DIV的大小,一定要和展現的照片之大小,一致。
三、請在DIV內不斷的加入照片,請隨意的加入數量。
四、請在DIV內套入下列的CSS。
五、請copy寫入下列程式碼。
六、請在DIV內,設定 onclick 功能,如下例。


jquery 程式碼:

/* 如果已有使用下列二條設定jquery環境的程式碼,就可不必使用。 */
/* 請copy 到<head> </head>或<body>之後 */

<script src="http://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


這一範例的jquery 碼:

/* 請copy 到<head> </head>或<body>之後 */

<script>

(function( $ ){

var numberca20170720 = 1;

$.fn.myPlugin20170720 = function() {

// 你的Plugin內容寫在這裡面。

var numgapic = $(this).find('>img').size();
var realnum = numgapic - numberca20170720;

if (realnum != 0) {
$(this).find('>img').eq(realnum).hide('slide', {direction: 'left'}, 600);
numberca20170720 = numberca20170720 + 1;
}
else {
$(this).find('>img').show('slide', {direction: 'right'}, 600);
numberca20170720 = 1;
}

};

})(jQuery);

</script>


設定「按下去 的地方」的onclick互動碼:

/* 請設定在DIV裡 */

onclick = ' $(this).myPlugin20170720(); '



CSS語法:

/* 請套入到 div 裡 */

<style>

.idoitimgga20170719 {
position: relative;
border: 1px solid black;
}

.idoitimgga20170719 >img {
position: absolute;
top: 0px;
left: 0px;
}

</style>


教學影音:



沒有留言:

張貼留言