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

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。