LightBox效果的3D旋转图片Carousel

LightBox效果的3D旋转图片Carousel
 点击预览  点击下载

Carousel and LightBox 2.0是一款3D旋转图片展示特效,支持键盘/鼠标操控方式,支持图片格式和swf文件格式,可通过XML文件对效果进行订制,大图的显示结合了流行的LightBox灯箱效果,颇有创意。

使用教程:

1.在<head>区加入以下代码

  1. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> 
  2.   <script type="text/javascript" src="js/prototype.js"></script> 
  3.   <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> 
  4.   <script type="text/javascript" src="js/lightbox.js"></script> 
  5.   <script type="text/javascript" src="swfobject.js"></script> 

2.在<body>区依次加入以下代码

  1. <script type="text/javascript"> 
  2. function aclick(anchor_id) { 
  3.  var a = document.getElementById(anchor_id); 
  4.  mainLightbox.start(a); 
  5. </script> 
  6. <div style="display: none"> <!-- This is and hidden div --> 
  7.  <a id="anchor1_id" href="photos/01.jpg" rel="lightbox[set1]">a</a> 
  8.  <a id="anchor2_id" href="photos/02.jpg" rel="lightbox[set1]">b</a> 
  9.  <a id="anchor3_id" href="photos/03.jpg" rel="lightbox[set1]">c</a> 
  10.     <a id="anchor4_id" href="photos/04.jpg" rel="lightbox[set1]">d</a> 
  11.     <a id="anchor5_id" href="photos/05.jpg" rel="lightbox[set1]">e</a> 
  12.     <a id="anchor6_id" href="photos/06.jpg" rel="lightbox[set1]">f</a> 
  13.     <a id="anchor7_id" href="photos/07.jpg" rel="lightbox[set1]">g</a> 
  14. </div> 

 以上的ID必须跟lightboxedcarousel.xml的ID名称一样,才能开启LightBox效果。

  1. <div class="movie"> 
  2.  <div id="carouseldiv"> 
  3.   <p>This slideshow requires <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player 9.0</a> (or higher). JavaScript must be enabled.</p> 
  4.  </div> 
  5. </div> 
  6. <script type="text/javascript"> 
  7.  swfobject.embedSWF("Carousel.swf", "carouseldiv", "100%", "100%", "9.0.0", false, {xmlfile:"lightboxedcarousel.xml"}, {wmode: "opaque", allowScriptAccess: "always"}); 
  8. </script> 

3.修改lightboxedcarousel.xml文件里头的图片地址。

转载请注明:代码家园 » LightBox效果的3D旋转图片Carousel

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)