查看文章 |
SmoothGallery 2.0使用教程
2007-10-14 00:41
JonDesign's (Javascript) SmoothGallery 2.0 转载自：http://www.hotajax.cn/content/view/88/29/ 让我们现在开始！ 怎样使用它？ 前奏：下载 到下载页下载源文件，下载再完后请回到这里。 1.安装 将以下代码插入到网页的head部分。 加入js
<script src="scripts/mootools.v1.11.js" type="text/javascript"></script> <script src="scripts/jd.gallery.js" type="text/javascript"></script>
加入css
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
2.准备工作 不像老版本的Smooth Slideshow，JonDesign's Smooth Gallery 是以搜索引擎优化为标准的。 因此，用如下类似的代码来定义slideshow 元素，
<div id="myGallery"> <div class="imageElement"> <h3>Item 1 Title</h3> <p>Item 1 Description</p> <a href="mypage1.html" title="open image" class="open"></a> <img src="images/brugges2006/1.jpg" class="full" /> <img src="images/brugges2006/1-mini.jpg" class="thumbnail" /> </div> <!--本文转载自http://www.hotajax.cn --> <div class="imageElement"> <h3>Item 2 Title</h3> <p>Item 2 Description</p> <a href="mypage2.html" title="open image" class="open"></a> <img src="images/brugges2006/2.jpg" class="full" /> <img src="images/brugges2006/2-mini.jpg" class="thumbnail" /> </div> </div>
就像你看到的，所有的元素都被包含到以id为myGallery的容器中，它含有多个"imageElement"。 每一条都包含有4个值： 1.用标记h3来定义title 2.用段落标记<p>来描述元素。 3.图片链接（url是在"href"部分，title在"title"部分）。除非你想在gallery中显示链接。 4.建立thumbnailed image 文件夹，thumbnails预订为高75px宽100px。 元素值的顺序并不重要但重要的是元素的类型。 3.gallery中图片切换形式 这里有几种可供选择，原则你认为最好的插入你的页面。
<script type="text/javascript"> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: false }); } window.addEvent('domready', startGallery); </script>
<script type="text/javascript"> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: true }); } window.addEvent('domready', startGallery); </script>
simple timed slideshow with links:
<script type="text/javascript"> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: true, showArrows: false, showCarousel: false }); } window.addEvent('domready', startGallery); </script>
simple showcase slideshow without links (aka "manually rotated" slideshow):
<script type="text/javascript"> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: false, showArrows: true, showCarousel: false, embedLinks: false }); } window.addEvent('domready', startGallery); </script>
4.设置大小 最后一步，在css中设置slideshow的大小（默认为460×345）
#myGallery { width: 400px !important; height: 200px !important; }
5.注意thumbnails 有以下几种方式生成thumbnails 1.用用php脚本重新设置图片的大小：
useThumbGenerator: true
如果你使用它： 1.不要忘记建立"cache/"文件夹且必须可写，这样php脚本才能存放图片。 2.删除 "thumbnail" 类别的图片。 预览：1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> SmoothGallery 2.0使用教程</title>
<link rel="stylesheet" href="http://www.hotajax.cn/download/mootools/SmoothGallery/css/layout.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="http://www.hotajax.cn/download/mootools/SmoothGallery/css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://www.hotajax.cn/download/mootools/SmoothGallery/scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="http://www.hotajax.cn/download/mootools/SmoothGallery/scripts/jd.gallery.js" type="text/javascript"></script>
<script src="http://www.hotajax.cn/download/mootools/SmoothGallery/scripts/jd.gallery.transitions.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.addEvent('domready',startGallery);
</script>
<div class="content0">
<div id="myGallery">
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="http://www.hotajax.cn/content/view/88/29/#" title="open image" class="open"></a>
<img src="http://www.hotajax.cn/download/mootools/SmoothGallery/images/brugges2006/1.jpg" class="full" />
<img src="http://www.hotajax.cn/download/mootools/SmoothGallery/images/brugges2006/1-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="http://www.hotajax.cn/content/view/88/29/#" title="open image" class="open"></a>
<img src="http://www.hotajax.cn/download/mootools/SmoothGallery/images/brugges2006/2.jpg" class="full" />
<img src="http://www.hotajax.cn/download/mootools/SmoothGallery/images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 3 Title</h3>
<p>Item 3 Description</p>
<a href="http://www.hotajax.cn/content/view/88/29/#" title="open image" class="open"></a>
<img src="http://www.hotajax.cn/download/mootools/SmoothGallery/images/brugges2006/3.jpg" class="full" />
<img src="http://www.hotajax.cn/download/mootools/SmoothGallery/images/brugges2006/3-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 4 Title</h3>
<p>Item 4 Description</p>
<a href="http://www.hotajax.cn/content/view/88/29/#" title="open image" class="open"></a>
<img src="http://www.hotajax.cn/download/mootools/SmoothGallery/images/brugges2006/4.jpg" class="full" />
<img src="http://www.hotajax.cn/download/mootools/SmoothGallery/images/brugges2006/4-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 5 Title</h3>
<p>Item 5 Description</p>
<a href="http://www.hotajax.cn/content/view/88/29/#" title="open image" class="open"></a>
<img src="http://www.hotajax.cn/download/mootools/SmoothGallery/images/brugges2006/5.jpg" class="full" />
<img src="http://www.hotajax.cn/download/mootools/SmoothGallery/images/brugges2006/5-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 6 Title</h3>
<p>Item 6 Description</p>
<a href="http://www.hotajax.cn/content/view/88/29/#" title="open image" class="open"></a>
<img src="http://www.hotajax.cn/download/mootools/SmoothGallery/images/brugges2006/6.jpg" class="full" />
<img src="http://www.hotajax.cn/download/mootools/SmoothGallery/images/brugges2006/6-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 7 Title</h3>
<p>Item 7 Description</p>
<a href="http://www.hotajax.cn/content/view/88/29/#" title="open image" class="open"></a>
<img src="http://www.hotajax.cn/download/mootools/SmoothGallery/images/brugges2006/7.jpg" class="full" />
<img src="http://www.hotajax.cn/download/mootools/SmoothGallery/images/brugges2006/7-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 8 Title</h3>
<p>Item 8 Description</p>
<p><a href="http://www.hotajax.cn/content/view/88/29/#" title="open image" class="open"></a>
<img src="http://www.hotajax.cn/download/mootools/SmoothGallery/images/brugges2006/8.jpg" class="full" />
<img src="http://www.hotajax.cn/download/mootools/SmoothGallery/images/brugges2006/8-mini.jpg" class="thumbnail" /> </p>
<p>更多实例请见下载文件</p>
</div>
</div>
</div>
</body>
</html>
提示：您可以先修改部分代码再运行,打开窗口后如没看见具体效果请刷新页面 |
最近读者：
