在自己网站中引入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', '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>