jQuery教學－ImageFlow相片特效套件

August 12, 2010, 12:20 am

≫ Next: jQuery教學－jqeury.height滑動展開iframe高度

　　昨天看到梅干嫂很專注的在上網，想說有什麼東西這麼好看，能梅干嫂這麼的靜敲敲，梅干便探頭過去看，原來是在看衣服難怪這麼專心，這時梅干不禁也被吸引了過去，但梅干被吸引的不是衣服，而是網站中衣服的呈現方式，還真是職業病XD~本以為那是Flash作的CoverFlow，結果恍然一看才知道，瞎米～竟然是jQuery作的，這時又勾起梅干的好奇心，趁著夜深人靜時，梅干獨自的研究這個特效到底是怎作的，最後才發現到，原來這是一個套件，只要載入就可直接使用囉！相當的Cool~

ImageFlow套件

套件名稱：ImageFlow
套件版本：1.2.1
官方網站：http://finnrudolph.de/ImageFlow/Introduction
官方下載：http://finnrudolph.de/ImageFlow/Download

放在<head>.....</head>之間：

^?View Code JAVASCRIPT

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<link href="imageflow/imageflow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="imageflow/jquery1.4.2.js"></script> 
<script type="text/javascript" src="imageflow/imageflow.js"></script>	
<script type="text/javascript" defer="defer"> 
domReady(function() {
var instance1 = new ImageFlow();
instance1.init({
ImageFlowID:'minwtImageFlow'              //imageflow的ID名稱
	, startID: 0                          //啟始ID
	, startAnimation: true                //一開始動態效果
	, imageFocusMax: 3                    //左右的顯示張數
	, imageFocusM: 1                      //圖片的顯示比例
	, xStep: 150                          //圖片x軸間距
	, opacity: true                       //透明效果
	, opacityArray: [10,5,3,1]            //透明效果設定0~10
	, buttons: true                       //上下張的按鈕圖示
	, imagesHeight: 0.57                  //圖片高度位置
	, preloadImagesText: '圖片載入中...'  //圖片載入的提示文字
	, reflectionP: 0.3                    //圖片高度縮放比例
	,onClick: function() {window.open(this.url, '_blank');} //連結另開視窗
});
});
</script>

參數設定說明：

aspectRatio:        1.964,          /* ImageFlow的高度 */
buttons:            false,          /* 上下張按鈕 */
captions:           true,           /* 標題顯示 */
imageCursor:        'default',      /* 滑鼠游標圖示 */
ImageFlowID:        'imageflow',    /* ImageFlow 的ID 名稱 */
imageFocusM:        1.0,            /* 圖片的顯示比例 */
imageFocusMax:      4,              /* 二邊照片出現的張數 */
imageScaling:       true,           /* 影像縮放切換 */ 
imagesHeight:       0.67,           /* 影像高度在Div的縮放比例 */
imagesM:            1.0,            /* 所有影像的顯示比例 */
onClick:            function() { document.location = this.url; },   /* 連結視窗設定 */
opacity:            false,          /* 透明效果 */
opacityArray:       [10,8,6,4,2],   /* 透明效果值從　0~10 */
preloadImages:      true,           /* 預載圖片Bar */
preloadImagesText:  'loading images',/* 預載圖片顯示文字 */
reflectionP:        0.5,            /* 圖片高度縮放比例 */
scrollbarP:         0.6,            /* 軸捲寬度比例 */
slider:             true,           /* 顯示捲軸 */
sliderCursor:       'e-resize',     /* 捲軸滑鼠圖示 */
sliderWidth:        14,             /* 捲軸寬度 */
startID:            1,              /* 起始顯示照片的ID */
startAnimation:     false,          /* 起始動畫效果 */
xStep:              150,            /* 圖片x軸間距 */
animationSpeed:     50,             /* 圖片轉換的時間 */
singleItemTag:      'IMG',          /* 設定項目的名稱　*/
slideshow:          false,          /* 幻燈片效果 */
slideshowInterval:  2000,           /* 幻燈片的時間 */
slideshowLeftToRight: true,         /* 幻燈片移動方向，true由左至右，false由右至左 */
cycle:              false           /* 滑鼠第三鍵切換影像 */

放在<body>.....</body>之間：
參數設定說明：

src：圖片路徑
longdesc：連結網址
alt：圖片顯示標題
title：滑鼠滑入出現提示文字

^?View Code HTML

1 2 3 4 5 6 7 8 9 10 11 12

<div id="minwtImageFlow" class="imageflow"> 
    <img src="img/MazingerZ.jpg"       longdesc="http://www.minwt.com/"  alt="梅問題商品攝影-無敵鐵金鋼" title="無敵鐵金鋼" /> 
    <img src="img/MetalTableware.jpg"  longdesc="http://www.minwt.com/"  alt="梅問題商品攝影-雙人牌餐具" title="雙人牌餐具" /> 
    <img src="img/Schick.jpg"          longdesc="http://www.minwt.com/"  alt="梅問題商品攝影-舒適刮鬍刀" title="舒適刮鬍刀" /> 
    <img src="img/Perfume.jpg"         longdesc="http://www.minwt.com/"  alt="梅問題商品攝影-水滴造型香水" title="水滴造型香水" /> 
    <img src="img/MONTBLANC.jpg"       longdesc="http://www.minwt.com/"  alt="梅問題商品攝影-萬寶龍鋼筆" title="萬寶龍鋼筆" /> 
    <img src="img/watch.jpg"           longdesc="http://www.minwt.com/"  alt="梅問題商品攝影-陶瓷錶 " title="陶瓷錶 " />
    <img src="img/GlenTurner.jpg"      longdesc="http://www.minwt.com/"  alt="梅問題商品攝影-金黃威士忌 " title="金黃威士忌" />
    <img src="img/heineken.jpg"      longdesc="http://www.minwt.com/"    alt="梅問題商品攝影-清涼海尼根 " title="清涼海尼根" />  
    <img src="img/BRAUNBUFFEL.jpg"      longdesc="http://www.minwt.com/" alt="梅問題商品攝影-德國小金牛皮夾 " title="德國小金牛皮夾" /> 
    <img src="img/Dior.jpg"           longdesc="http://www.minwt.com/"   alt="梅問題商品攝影-Dior愛心造型耳環 " title="Dior愛心造型耳環" />
</div>

[範例預覽] | [範例下載]

↧

jQuery教學－jqeury.height滑動展開iframe高度

September 4, 2010, 9:59 pm

≫ Next: jQuery外掛－CloudZoom放大鏡+ThickBox燈箱整合包隨即套用

≪ Previous: jQuery教學－ImageFlow相片特效套件

梅問題-jQuery教學-jQuery外掛-jqeury.height.js讓iframe滑動式長高

　　其實讓iframe自動長高已不是什麼新技術，而要讓iframe自動長高的作法其實大同小異，就梅干以前的作法則是在嵌入的頁面中加入script碼，抓到頁面高度後，再把值丟回給上層的iframe，並將上層的iframe撐高，雖然此方法就可讓iframe自動長高，但唯一缺點就是，得在每個嵌入的頁面中加入script碼，所以梅干最近找了一隻jQuery外掛，只要把script碼加在iframe頁面中，就可自動將iframe撐高，為了讓它有些變化，梅干稍稍改了這隻外掛並加入動畫效果，一旦載入的頁面變高或縮短，iframe則會以動畫的方式，將高度自動的縮減，這樣使用者也較容易辨視出，所點選的頁面已改變了。

iframe.html
放在<head>.....</head>之間：

^?View Code JAVASCRIPT

1 2

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="http://photo.minwt.com/download/code/jquery/plugin/jquery.autoheight.js"></script>

放在<body>.....</body>之間：

^?View Code HTML

1 2 3

<a href="main.html" target="ifm">main.html</a><br />
<a href="news.html" target="ifm">news.html</a><br />
<iframe name="ifm" class="autoHeight" frameborder="0" scrolling="no" src="main.html"></iframe>

　　經梅干測試的結果，適用於各個瀏覽器上，唯一比較需注意到的是，Google Chrome瀏覽器需將網頁放在web上，才可正常運作，否則會有撐不開的情況發生，這個夠簡單吧！只要把js載入接著再把iframe的class名稱設為autoHeight就大功告成啦！

[範例預覽] [範例下載]

↧

jQuery外掛－CloudZoom放大鏡+ThickBox燈箱整合包隨即套用

September 24, 2010, 6:23 am

≫ Next: jQuery外掛－「SuperResize打造全螢幕背景」適用各瀏覽器

≪ Previous: jQuery教學－jqeury.height滑動展開iframe高度

梅問題-jQuery教學-cloud-zoom放大鏡thickbox燈箱效果大整合立即可用

　　有在收看梅問教學網的朋友，應該不難發現到，在梅問題的教學文章中，當把滑鼠移到縮圖上時，右邊就會出現放大鏡的效果，這對檢視圖片來說，是個相當方便的方法，而最近梅干又發現到一隻相當不錯的放大鏡套件CloudZoom，這隻外掛與教學網中所使用的效果差不多，但各位會發現到在教學網中單響影像時，圖片則會在另開視窗，所以這時梅干就在想，若單響圖片時能以燈箱的方式作為顯示，那這樣就不會開啟一堆視窗了，於是請教了好友男丁，有沒有辦法把CloudZoom跟TickBox整合在塊，哈～真沒想到，男丁老師終於完成了梅干的夢想，而梅干下午就花了點時間，把它整理一下分享各位，讓各位直接就可套用。

所使用的套件：

套件名稱：cloud-zoom(放大鏡)
套件版本：1.0.2
官方網站：http://www.professorcloud.com/mainsite/cloud-zoom.htm

套件名稱：Thickbox
套件版本：3.1
官方網站： http://jquery.com/demo/thickbox/

放在<head>.....</head>之間：
可由官網中下載套件，下載完畢後二個套件放在同一目錄下，並且引將這二隻外掛引用進來。

^?View Code JAVASCRIPT

1 2 3 4 5 6 7 8 9 10

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="cloud-zoom/cloud-zoom.1.0.2.min.js"></script> 
<link type="text/css" href="cloud-zoom/cloud-zoom.css" rel="stylesheet" media="screen" /> 
<script type="text/javascript" src="thickbox/thickbox-compressed.js"></script> 
<link type="text/css" href="thickbox/thickbox.css" rel="stylesheet" media="screen" /> 
<style type="text/css"> 
body, div, ul, li { margin:0; padding:0;}
.wrapper { width:300px; height:420px; border:4px solid #ccc; background:#ddd;}
.cloud-zoom {display:block; width:300px; height:420px;}
 </style>

放在<body>.....</body>之間：

^?View Code HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<div class="wrapper">
	<script>
		$(function(){
			$('.mousetrap').live('click', function(){
				$('#zoom1').click();
			});
		});
	</script>
    <!-- 第一張截入的影像,這邊的zoom1不可更改，rel是設定Cloud-Zoom的參數 -->
	<a id="zoom1" class="thickbox cloud-zoom" href="image/minwt_demo01.jpg" rel="adjustX:10, adjustY:-4"> 
	<img src="image/minwt_demo01m.jpg" title="梅問題比G尼人像攝影" ></a> 
</div>
<!-- 縮圖的存放位置, 這邊只須指定照片的尺寸大小就可以了,分別要準備大中小,中是上力圖片顯示用,小是下方的縮圖,大是滑鼠滑入的放大效果 -->
<a class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'image/minwt_demo02m.jpg'" href="image/minwt_demo02.jpg"><img src="image/minwt_demo02s.jpg"></a>
<a class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'image/minwt_demo03m.jpg'" href="image/minwt_demo03.jpg"><img src="image/minwt_demo03s.jpg"></a>
<a class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'image/minwt_demo04m.jpg'" href="image/minwt_demo04.jpg"><img src="image/minwt_demo04s.jpg"></a>

cloud-zoom rel可用參數設定：

參數	說明	預設值
zoomWidth	放大鏡的寬度	'auto'
zoomHeight	放大鏡的高度	'auto'
position	放大镜的顯示位置， left 、 right 、 top 、 bottom	'right'
adjustX	放大鏡與圖片顯示的水平距離	0
adjustY	放大鏡與圖片顯示的垂直距離	0
tint	非放大區域的颜色，须用是十六進位的色彩編碼，如 '#00ffff'，不能與 softFocus 一起使用	false
tintOpacity	不透明度，0 透明，1 不透明	0.5
lensOpacity	镜头鼠标指针不透明度，0 是完全透明，1 是完全不透明，在 tint 和 softFocus 模式下始终透明	0.5
softFocus	模糊效果	false
smoothMove	放大鏡圖片移動的順暢度，數字越高越順暢	3
showTitle	顯示圖片標题	true
titleOpacity	標題透明度，0 是透明，1 是不透明	0.5

　　哈～夠簡單吧！只要直接增加html碼，再把三種尺寸的影像指定好，就大功告成啦！而各位可以直接下載梅干的整合包，在整合包中已將ThickBox的關閉鈕，移到右上角這樣更符合平常的使用習慣，同時梅干也將影像的層級調整好了，所以各位只要專心把照片弄好，立即就可套用囉！

[範例預覽] [範例下載]

↧

jQuery外掛－「SuperResize打造全螢幕背景」適用各瀏覽器

October 21, 2012, 7:22 pm

≫ Next: jQuery外掛－jQuery Masonry瀑布流版型套件

≪ Previous: jQuery外掛－CloudZoom放大鏡+ThickBox燈箱整合包隨即套用

　　先前曾分享，透過「CSS3實現自動縮放全螢幕背景」，雖然說很方便，但礙於IE瀏覽器的部分，需IE9.0以上的版本才能正常運作，所以若是使用IE8的朋友，就無法呈現出全螢幕的效果，因此梅干則上網找了好多全螢幕的外掛，雖然說功能相當的強大，但當要客制化成自已所需時，光看到那個原始碼，還真令梅干不知該怎從何下手，因此找了很久，終於找到一款，簡單、好用的全螢幕背景外掛Supersized，可橫掃各個瀏覽器，完全不用擔心使用者的瀏覽器問題，由於已是外掛，因此完全不用寫任何的程式碼，只要簡單設定，就可輕鬆的達到全螢幕的背景啦！

Supersized全螢背景外掛：

適用瀏覽器：IE7.0+、Chrome、Firefox、Safari、Opera
官方網站：http://www.elriks.com/prototypes/index.html
官方展示：http://www.elriks.com/prototypes/lib/scripts/prototypes/_galeries/Supersized/default.htm

Supersized 參數設定：

startwidth: 640 //照片起始長度
startheight: 480 //照片起始寬度
vertical_center: 1 //垂直居中 1居中,0關閉
slideshow: 1 //自動輪播 1開,0關
navigation: 1 //播放控制鈕 1開,0關
transition: 1 //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left //轉場效果
pause_hover: 1 //滑入時停止輪播 1開,0關
slide_counter: 1 //顯示圖片筆數 1開,0關
slide_captions: 1 //圖片名稱
slide_interval: 3000 //轉場時間

Supersized 增加圖片：
加在<div id="supersize">~</div>之間即可，增加圖片img標籤中，可用title來設定圖片名稱。

完成後就可在各平台上運作了。
#IE8.0:
梅問題-jQuery外掛-SuperResize全螢幕背景適用各瀏覽器

#Chrome:

#Firefox:

[範例預覽] [範例下載]

↧

jQuery外掛－jQuery Masonry瀑布流版型套件

December 27, 2012, 12:35 am

≫ Next: jQuery教學－ZeroClipboard 將網頁輸入框值複製到剪貼簿

≪ Previous: jQuery外掛－「SuperResize打造全螢幕背景」適用各瀏覽器

　　前陣子看到有不少的網站，將網站中的Div區塊，隨著Div的高度，自行的向下編排，看起來蠻有雜誌的感覺，而這種編排方式，中文叫作瀑布流版型，原因就在於，它會先取出Div的寬高，再依序的向下排列，就像瀑布一樣，看起來很像是CSS的浮動排版一樣，昨天看到好友哇哇的網站，也將首頁改成這種瀑布流版型，由於哇哇的圖有大有小，整個排起來特別的有fu。　　雖然很有fu，但因為這種曝布流版型，會先取出Div的高度，再去計算出每個Div的位置，所以一旦圖片比較晚載入，而程式已取出Div高度時，就會發生兩個區塊重疊的冏境，雖然這種瀑布流版型，可用CSS3中的column-count來完成，但IE要10.0才有支援XD~，所以只好利用jQuery的Masonry外掛元件來完成，且只要簡單的設定參數，立即就可套用囉！喜歡這效果的朋友參考看看囉!改天梅干再來分享CSS3的版本，更簡單更ez。

jQuery Masonry套件：

外掛元件：jQuery Masonry
外掛版本：v2.1
官方網站：http://masonry.desandro.com/index.html
※需載入jQuery1.7+以上

引用Jquery+jQuery Masonry：
放在<head>.....</head>之間：

^?View Code JAVASCRIPT

1 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://masonry.desandro.com/jquery.masonry.min.js"></script>

HTML：
放在<body>.....</body>之間：

^?View Code HTML

1 2 3 4 5 6 7 8

<div id="_container" style="height:800px; width:728px; overflow:hidden; margin:0 auto;">         
     <div class="content_box">內容1</div>
     <div class="content_box">內容2</div>
     <div class="content_box">內容3</div>
     <div class="content_box">內容4</div>
     <div class="content_box">內容5</div>
     <div class="content_box">內容6</div>
</div>

CSS樣式設定：
放在<head>.....</head>之間：

^?View Code CSS

1 2 3 4 5 6 7 8 9 10

<style>
.content_box{
	display: inline-block;
	border: 1px dotted #4F4F4F;
	padding: 10px;
	margin: 5px 5px 5px 0;
	overflow:hidden;
	width:337px;
}
</style>

啟用Jquery Masonry元件：
放在<script>.....</script>之下：

^?View Code JAVASCRIPT

1 2 3 4 5 6 7 8 9

$(function(){
	$('#_container').imagesLoaded(function () {
        $('#_container').masonry({        
            itemSelector: '.content_box',
            columnWidth: 364,
            animate:true
        });
	});
});

Jquery Masonry參數說明：

imagesLoaded：用來防止計算圖片寬度和高度的錯誤
itemSelector：要套用效果的DIV
columnWidth：欄位寬度，當圖片載入失敗，或是還沒載入時，預設的寬高會以這為主
animate：動態效果

結果預覽：

[範例預覽] [範例下載]

↧

jQuery教學－ZeroClipboard 將網頁輸入框值複製到剪貼簿

June 12, 2013, 6:30 pm

≫ Next: jQuery教學－簡單好用的視差滾動特效 Parallax Effect

≪ Previous: jQuery外掛－jQuery Masonry瀑布流版型套件

　　有用過MediaFire雲端空間的朋友，應該不難發現到，當把檔案上傳到空間後，只要點一下Share Link，就會自動將連結網址，直接複製到剪貼簿中，這看似乎平常的功能，其實一點也不簡單，而有在觀注梅問題的朋友，應該有發現到，在黑莓10使用嘸蝦米的文章中，梅干也有用到此功能，其實需使用zClip外掛的搭配才行喔！同時還需在Web主機中才能運作，因此在本機是無法預覽結果的，所以待回各位在測試時，一定要將網頁丟到Web主機中才行喔！至於怎麼用呢?現在就一塊來看看吧！

zClip外掛：

外掛名稱：zClip
外掛網址：http://www.steamdev.com/zclip/

Javascript：
放在<head>.....</head>之間：

^?View Code JAVASCRIPT

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.zclip.js"></script>
<script>
$(function(){
    $('#copy-btn').zclip({
        path:'js/ZeroClipboard.swf',
        copy:function(){
			return $('#ipt').val();
		}
	}).click(function(){
		$("#ipt").val('');
		alert('已複製到剪貼薄');
	});	
});
 
</script>

Html：
放在<body>.....</body>之間：

^?View Code JAVASCRIPT

1 2	<input style="width:300px; margin-left:15px;" type="text" id="ipt" value="http://www.minwt.com"/> <a href="#" id="copy-btn">複製</a>

[範例預覽] [範例下載]

↧

jQuery教學－簡單好用的視差滾動特效 Parallax Effect

September 9, 2013, 6:30 pm

≫ Next: jQeury外掛「Infinite Scroll」滾動無限載入網頁內容

≪ Previous: jQuery教學－ZeroClipboard 將網頁輸入框值複製到剪貼簿

　　若各位有在注意Firefox OS的朋友，應該會發現到，在台灣的官網中，有一個相當特別的效果，當滾動畫面時，感覺畫面上疊了一層圖層，可在某一個區塊中，把背景固定住，然後內容不斷的更換，當這個單元介紹完後，再向下滾動捲軸時，下個單元的內容則會向上推，把上一個單元的內容給覆蓋上去，是一個相當特別的視覺新感受，而這個酷炫的特效也有專有名稱，就叫作「視差滾動」特效，只需透過CSS、jQuery套件，就可快速的實現出此效果，而這種效果相當適合拿來介紹產品時使用，且這種視差滾動特效的模組也相當多，梅干則挑選了一個較簡單的，來為各位介紹一下囉！讓你也可快速使用此特效。

視差滾動 jQuery Parallax Effect：

外掛名稱：Parallax Effect
外掛版本：1.1.3
外掛下載：本站下載(梅干簡化過) | 官方下載

Step1
將用到的js外掛放到head標籤之間。
梅問題-jQuery簡單好用的視差滾動特效

Step2
將要滾動的DIV區塊，加到body標籤之間。
梅問題-jQuery簡單好用的視差滾動特效

Step3
設定css樣式外，再分別設定div滾動區塊的水平位置、速度。
梅問題-jQuery簡單好用的視差滾動特效

Step4
這樣就完成囉! 當預覽時就會發現到，一種很特別的視覺效果，就像是在滾動圖層一樣。
梅問題-jQuery簡單好用的視差滾動特效

[範例預覽] | [Firefox OS視差滾動特效]

↧

jQeury外掛「Infinite Scroll」滾動無限載入網頁內容

September 21, 2015, 3:00 pm

≫ Next: jQuery外掛-360度旋轉產品照片展示

≪ Previous: jQuery教學－簡單好用的視差滾動特效 Parallax Effect

　　前陣子有不少網站吹起了瀑布流版型，讓網頁看起來相當的豐富，且排序再不用擔心區塊長短腳的問題，同時當向下滾動頁面時，到底部就會不斷的載入，除了用於分頁外，也可將這自動載入用在一般的單一頁面說，比方說有二篇關聯式文章時，就可透過此方式，將可相似的文章給載入進來，就有點像是延伸文章的概念，其實這只要引用jQuery的Infinite Scroll套件，立即就可做到，甚至還可變換網址，這樣才有助於SEO的優化，至於這隻外掛要怎麼作呢?方法很簡單，現在就一塊來看看吧!

Infinite Scroll:

外掛名稱：Infinite Scroll
外掛版本：1.5.100504
外掛網址：http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

Step1
進入外掛網站，點下方的連結，進入下載畫面。
梅問題－jQeury外掛「Infinite Scroll」滾動無限載入網頁內容

Step2
點右下Download ZIP就可下載全部的範例，但一般只需下載jquery.infinitescrollaq.js或jquery.infinitescroll.min.js(min為壓縮過的js)。
梅問題－jQeury外掛「Infinite Scroll」滾動無限載入網頁內容

Step3
下載完畢後，分別將jQuery.js與剛所下載的jquery.infinitescrollaq.js放在你的專案下，並將它們引用到網頁中。

<script src="jquery-1.6.1.js"></script>
<script src="jquery.infinitescroll.js"></script>

Step4
基本HTML網頁結構。

<div id="content">
內容區塊
</div>
........
<a id="next" href="index2.html">next page</a><!-- 放在最底部 -->

Step4
接著分別只要設定載入的區塊名稱(itemSelector)，以及下一頁籤(navSelector)，以及格式(dataType)，這樣就大功告成啦!而官網中有詳盡的設定屬性，如有需可至官網中查看，其本上只要以下這些就可正常的使用啦!

<script>
		$('#content').infinitescroll('binding','unbind');
		$('#content').data('infinitescroll', null);
		$(window).unbind('.infscr');

		$('#content').infinitescroll({
		navSelector : "#next:last",
		nextSelector : "a#next:last",
		itemSelector : "#content",
		dataType : 'html'
		});

		//網址切換
		$(function () {
		    var cont_h = $('.main').height();
		    var pathname = window.location.href;
		    var pathhost  = location.hostname;

	    $(document).scroll(function () {
	          var top = window.pageYOffset;
	          	if(top<cont_h){
	          		window.history.pushState('', '', pathname);

	          	}else{
	          		var nexturl = $('#next').attr("href").replace("http://","").replace(pathhost,"");
	          		window.history.pushState('', '', nexturl);
	          	}
	    	});
		});
	</script>

Step5
立馬來預覽一下，這時看到紅色框框表示為動態載入的第二頁，同時上方的網址也會更著改變。
梅問題－jQeury外掛「Infinite Scroll」滾動無限載入網頁內容

Step6
當要載入多個標籤id時，可在itemSelector :用,來作加選，比方要動態載入二個div，就可div1,div2這樣就可載入二個不同的div區塊，是不是超ez的呀!由於這使用ajax的技術，因此當要預覽結果時，需放在webserver上才能預覽喔!當了解了它的用法後，就可任意的應用各平台下，無論是Wordpress、Opencart、Joomla...皆可，因此有需要的朋友，不妨也可參考看看囉!
梅問題－jQeury外掛「Infinite Scroll」滾動無限載入網頁內容

[範例預覽] [範例下載]

↧

jQuery外掛-360度旋轉產品照片展示

October 7, 2015, 3:00 pm

≫ Next: jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

≪ Previous: jQeury外掛「Infinite Scroll」滾動無限載入網頁內容

　　以前相當流行利用Flash來製作360度的產品展示，讓使用者可以直接按住滑鼠，拖拉產品就可看到360度的產品照片，讓使用者可以在虛擬的頁面中，了解到實體產品的各角度的變化，但自從老賈開始打Flash後，現在Flash已消聲匿跡，因此目前比較好的作法，就是透過jQuery的方式來製作，而最近正好有朋友，想製作360度的產品展示功能，所以梅干就尋找了一下，發現到一款相當簡易且好用的360度產品展示的外掛，且套用還相當的簡單，因此有需要的朋友，也趕快來看看囉!

準備素材：
當要開始製作時，要先將360度的產品照片拍好。
梅問題－jQuery外掛-360度旋轉產品照片展示

Step1
首先，將css放到<head>....</head>間。

Step2
首先，將js放到到</body>前。

Step3
當要使用時，將div的類別名稱加入PIC360，接著把要360度的產品照，一一的加到ul li中。

Step4
當完成後，只要滑鼠游標，在區域內由左向右滑動時，產品照片就會跟著旋轉，而這邊梅干只是簡易拍攝，當要顯示跟細膩時，可用專用的拍攝器，以及張數愈多效果愈好，是不是很簡單呀!有需要的朋友，不妨也可參考看看囉!
梅問題－jQuery外掛-360度旋轉產品照片展示

[範例預覽] [範例下載]

↧

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

April 6, 2016, 3:00 pm

≫ Next: jQuery教學-仿RICOH THETA 360度全景圖顯示外掛

≪ Previous: jQuery外掛-360度旋轉產品照片展示

　　最近在幫好友，設計手機版網頁時，卻發現一個小問題，當選單滑出，再展開子選單，這時捲軸則會出現，在開始滾動選單，當選單滾到底部分時，就會自動跳開，換成底層的區塊進行滾動，本來想說這會是個案嗎?就上網看了幾個網站，發現也有一樣的狀況，除了使用jQuery Mobile或iScroll則沒有出現此問題，但iScroll功能相當的強大，因此只是單純的滾動區塊，所以就沒考慮使用iScroll，而另外找到一套既簡易又好套用的外掛Scroll-Scope，不但手機可用，桌機版也適用，因此身為網設的你，也趕快來看看囉!

Scroll-Scope

外掛名稱：scroll-scope.js
外掛版本：0.1.0.
外掛網址：http://eiskis.net/scroll-scope/

Step1
進到外掛網站後，先將先外掛給下載回來，並放到專案的目錄下。
梅問題－jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

Step2
當要鎖定時，只要在此區塊的DIV標籤內加入data-scroll-scope。
梅問題－jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

Step3
接著在</body>前，分別將jQuery與scroll-scop的js載入到網頁中，再加入$(document).scrollScope();這時只要網頁中有出現 data-scroll-scope就會自動套用此功能。
梅問題－jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

Step4
除此之外，若是動態產生的區塊。
梅問題－jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

Step5
這時比較特別的是，需手動的方式，將scroll-scope加入，因為這是動態產生的，所以它有提供一個參數force，這樣就可使用了。
梅問題－jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

Step6
立即來預覽看看，左上第一個是沒套用，可看到當滾動區塊時，滾到底時，就會跳開，變成外面的區塊捲軸，進行滾動。
梅問題－jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

Step7
當二、三是已套用了scroll-scope，因此當滾動區塊捲軸時，當滾動到時，會自動停住，不會跳開而去滾動外層的捲軸。
梅問題－jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

[範例預覽] [範例下載]

↧

jQuery教學-仿RICOH THETA 360度全景圖顯示外掛

June 21, 2017, 12:00 pm

≫ Next: 「Dowebok 做好網站」免註冊！各種jQuery網頁特效外掛免費下載

≪ Previous: jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

自從RICOH推出360度的相機，讓照片的趣味性變更高，且拍攝更簡易，只需按下快門，就能補捉360度的全景照片，讓照片的視野比眼睛還更寬廣，因此比魚眼來的更有趣，同時再搭配相機內建的軟體，就能將全景的照片，變成小星球或上下左右的滑動觀看，以及放大縮小，讓在一張照片中，可同時看到所有的角度，甚至放大看細節，但這麼酷的影像，只能在他的應用程式中呈現。

↧

「Dowebok 做好網站」免註冊！各種jQuery網頁特效外掛免費下載

June 25, 2017, 9:26 pm

≫ Next: jQuery教學-FitText.js讓網頁中的文字，也支援RWD自適應縮放

≪ Previous: jQuery教學-仿RICOH THETA 360度全景圖顯示外掛

今天梅干要來分享另一個，jQuery外掛集合的平台，裡面與先前分享的jQuery插件庫差不多，也是以jQuery外掛為主，一樣也有瀏覽器支援度清單，以及使用說明和設定的參數，但在這平台中，有一個最大的好處就是，裡面看的到外掛，不但不可註冊為會員，就可將外掛給下載回來，雖然說這個平台裡的外掛不多，但卻相當的實用，同時裡面的外掛，先前在jQuery插件庫也有所不同，因此要讓網頁動起來的朋友，現在也一塊來看看囉！

↧

jQuery教學-FitText.js讓網頁中的文字，也支援RWD自適應縮放

June 14, 2018, 11:00 pm

≪ Previous: 「Dowebok 做好網站」免註冊！各種jQuery網頁特效外掛免費下載

無論是DIV的區塊還是IMG影像，都能自行的縮放比例，唯獨文字的部分，是一個令人比較頭大的部分，雖然說在文字的屬性中，也多了幾個新的單位，但還是無法達到完美的縮放，還是得再手動設定，才能讓文字在各個裝置中，閱讀起來大小合宜，為了解決文字自動縮放的問題，最近梅干發現FitText.js這隻外掛，還真是一個好物，可設定文字的縮放區間，讓文字在各裝置，閱讀起來大小適中，至於要怎來使用FitText.js，現在就一塊來看看吧！

↧