jQuery外掛-酷炫ContentFlow相片特效直接套用

分類:Javascript | 2010-11-30
梅問題-javascript教學-ContentFlow相片特效模組
  先前梅干曾分享過ImageFlow相片特效元件,雖然說ImageFlow的功能相當完善,並且切換上也相當的順暢,但它的免費版本只適用於個人使用,若要用於商業行為時,就得花扣扣買,並且只限用單一網域名稱底下,所以梅干最近就一直不斷找尋,是否有免費類似的Coverflow特效, 哈~總算讓梅干給找到囉!功能一點也不輸給ImageFlow,同時還有外掛模組,除了可水平切換外,也可變換成垂直、環型、平移...等,而Coverflow還有個更值得一提的是,Coverflow倒影不用php來產生圖片,並且倒影還是透明滴!

ContentFlow:
特效名稱:ContentFlow
特效版本:1.0.2 (2010/02/19)
特效性質:免費(授權條款)
特效性質:IE8+、Firevox3.0+、Safari4.0+、iPhone/iPod、Oprea10+、Chrome4.0+
官方網站:http://www.jacksasylum.eu/ContentFlow/index.php
官方文件:http://www.jacksasylum.eu/ContentFlow/docu.php
官方特效列表:http://www.jacksasylum.eu/ContentFlow/addons.php
檔案下載:本站下載(梅問題整合版) | 官方下載

基本設定與使用:
下載完畢後解壓縮,開啟html檔並於指定區塊插入相關的語法:
Step1
放在<head>.....</head>之間:
?View Code JAVASCRIPT
1 2 3 4 5 6 7 8 9 10 11 12
<link rel="stylesheet" title="Standard" href="css/styles.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript" src="contentflow.js"></script>
<script tyle="text/javascript">
	var cf = new ContentFlow('contentFlow', {
	reflectionColor: "#000000" 
	,startItem:3 //起始item,預設是中間
	,endOpacity:0.1 //後面item透明度
	,visibleItems:3 //後面顯示item數量
	,maxItemHeight:0 //最大高度
	,relativeItemPosition:"center"
	});
</script>

Step2
放在<body>.....</body>之間:
?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 24 25 26 27
 <div id="contentFlow" class="ContentFlow">
        <!-- should be place before flow so that contained images will be loaded first -->
        <div class="loadIndicator"><div class="indicator"></div></div>
 
        <div class="flow">   
        	<!-- 圖片縮圖區塊 開始 -->        
            <div class="item">
                <img class="content" src="pics/01.jpg" />
                <div class="caption">imgDemo01</div>
            </div>
            <!-- 圖片縮圖區塊 結束 -->
            <!-- 圖片縮圖區塊 開始 --> 
            <div class="item">
                <img class="content" src="pics/02.jpg"/>
                <div class="caption">imgDemo02</div>
            </div>
            <!-- 圖片縮圖區塊 結束 -->
 
            <!-- 依續向下增加 -->
            <!--  ........ -->
        </div>
 
        <div class="globalCaption"></div>
        <div class="scrollbar">
            <div class="slider"><div class="position"></div></div>
        </div>
  </div>

這是最基本的應用,若要更詳盡說明,可至官網:http://www.jacksasylum.eu/ContentFlow/docu.php
加入連結(target):
而它內建的連結,則是直接開啟圖片的原始尺寸,當然它也可以設定為超連結與target。

Step1
在item後面加上href就可囉!由於預設是開本視窗,若要開啟新視窗可用target="_blank",當然也可開在指定的框架名稱中。
<div class="item" href="連結URL" target="_blank">

加入更多的特效模組:
在官網中AddOnes還有很多的特效,都可將喜歡的特效展示元件套上去,現在就來看要如何來套用。 梅問題-javascript教學-ContentFlow相片特效模組
Step1
進到官網的AddOns ,看到喜歡的特效後,在該特效後方有個Download: 並點選.zip,將該特效下載回來。
梅問題-javascript教學-ContentFlow相片特效模組
Step2
下載完畢後,解壓縮並將裡面的東西,全部複製到原本的目錄下。
梅問題-javascript教學-ContentFlow相片特效模組
Step3
用記事本開啟原來的html原始檔,並在<head>.....</head>將剛所下載的特效語法加入,src輸入剛所下載元件的.js完整名稱,load部分輸入剛AddOns中的特效名稱。
<script language="JavaScript" type="text/javascript" src="ContentFlowAddOn_screwdriver.js" load="screwdriver"></script>

梅問題-javascript教學-ContentFlow相片特效模組
  將子就可以用囉!在官網的AddOns裡有各式各樣的特效,都可以自由的下載來使用,而官網中也有很多的參數可使用,梅干只使用自已所需的部分, 各位若有興趣也可自行多加研究,不得不佩服js愈來愈強大,以前這種特效都要用flash,現在只要js就可搞定,也不用擔心瀏覽器的flashplayer版本,並且檔案更加輕巧。
範例預覽:ContentFlow(基本版)
範例預覽:ContentFlow(連結版)
範例預覽:ContentFlow(特別版)




回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 27 梅留言

  • 第27梅
    chyuanyiin 說道:

    梅老師您好:請問您的範例檔怎不能下載了?

    回應:
    感謝告知,檔案已修復好了~
  • 第26梅
    mu 說道:

    請問~~
    要怎麼設定自動播放呢,
    我加載了screwdriver,
    可是搜索auto等字眼都沒看到相關的設定~

  • 第25梅
    ambob 說道:

    请教,有没有支持在ipad上面的这类特效呢