在本身網站中引入CU3ER/Flash 3D幻燈片效果和照片畫框

要求

• 必備知識

  本文要求基本瞭解 JAVASCRIPT 和 XML基礎語法知識。

• 運行環境

  支持Flash Player的瀏覽器/Flash Player11及以上

• 演示地址

  演示地址 下載地址

 

 

來自CU3ER官方的一段介紹:

什麼是CU3ER？

CU3ER ，是一個三維圖像幻燈片和照片畫廊。這是視覺上的吸引力幻燈片和畫廊的理想解決方案，促進產品和服務在您的網站上。

咱們建立了一套工具，讓您的CU3ER的生活更輕鬆。有CU3ER賬戶，您能夠訪問：

• cManager - web應用建立很是好看的CU3ER幻燈片
• wpCU3ER - WordPress的插件在WordPress容易嵌入CU3ER的幻燈片

是什麼讓CU3ER特別？

CU3ER帶來的創造力，你的網頁設計過程，使您的內容眼上口，並提供獨特的視覺體驗提高到您的網站訪問者。

此圖片滑塊配備的功能，加強的觀看幻燈片的用戶體驗的範圍很大。它們能夠組合在一塊兒 - 襯裏轉換，3D視覺加強功能，用戶界面​​和指標。

過渡

3D視覺加強

指標

 

 

CU3ER提供了多套幻燈片模版,並提供了在線製做工具cManager,和完善的文檔和視頻教程。

 

3D模版:

 

 

照片畫廊:

 

 

 

 

適用於觸控面板:

 

 

 

 

 

獨特的相機和陰影效果:

 

 

 

 

 

 

 

帶縮略圖的3D效果:

 

 

 

 

 

 

 

帶Mac框的模版:

 

 

 

在線自做工具:

 

 

 

 

文檔:

 

 

 

 

 

 

下面是我用cManager導出的一個項目:

 

 

 

那麼如何用最簡單方式將幻燈片導入到本身的項目中呢?

 

在要導入的頁面中添加如下幾行代碼:

<style>
 body{ background:#333333;}
 object{ box-shadow:0 0 15px rgba(0,0,0,0.8); margin:80px auto; display:block;}
</style>
<div id="CU3ER" >            
</div>        
        
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/CU3ER.js"></script>
<script type="text/javascript">
// add your FlashVars
var vars = { xml_location : 'CU3ER-config.xml', width:'840', height:'480' };
// add Flash embedding parameters, etc. wmode, bgcolor...
var params = { bgcolor : '#ffffff' };
params.allowScriptAccess = "always";
// Flash object attributes id and name
var attributes = { id:'CU3ER', name:'CU3ER' };
// dynamic embed of Flash, set the location of expressInstall if needed
swfobject.embedSWF('CU3ER.swf', "CU3ER", 840, 480, "10.0.0", 
"js/expressinstall.swf", vars, params, attributes );
// initialize CU3ER class containing Javascript controls and events for CU3ER
var CU3ER_object = new CU3ER("CU3ER");
</script>

 

 

項目導出後能夠經過修改config.xml配置文件來重新自定義幻燈片信息,

關於 config.xml 配置文件的修改官方文檔中提供了詳細的說明:

http://docs.getcu3er.com/xml/settings

 

 

 

 

 

那麼有的人就會說了 XML配置文件要手動修改嗎，那太麻煩了，沒什麼實用價值了啊！

好吧，大家贏了！！

關於 JAVA操做XML和 PHP操做XML將會到後續的文章中介紹，

請你們多多支持。

 

 

下面附上個人導出項目的演示地址和下載地址,固然在文章的開始處已經給出了，我仍是在寫一遍吧:

 

演示地址 下載地址

 

 

 

初來乍到，請你們你們多多支持！！

路過的留下腳印。

 

 

 

 

 

做者: Li-Cheng

出處: http://www.cnblogs.com/Li-Cheng/p/3590111.html

本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。