PageTalks » slideshow http://pagetalks.com Pure Web Development & Design Ideas Thu, 19 Jan 2012 12:06:33 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 slideView and imgDesc Plugins Updated http://pagetalks.com/2009/07/05/slideview-and-imgdesc-plugins-updated.html http://pagetalks.com/2009/07/05/slideview-and-imgdesc-plugins-updated.html#comments Sun, 05 Jul 2009 08:47:00 +0000 Robin http://pagetalks.com/?p=276 A new version of slideView plugin and imgDesc plugin are avaliable now!
See more detail in http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html
and http://pagetalks.com/2008/08/29/jquery-imgdesc-plugin.html

I Spent a whole day fixing bugs and beautify the UI. They now works much better than the previous versions.

See a demo of slideView at http://pagetalks.com/share/slideView;
A demo of imgDesc is accessible in the original post.

Comments are welcome!

slideview插件的新版本出来了！到这里看更多信息：http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html 以及 http://pagetalks.com/2008/08/29/jquery-imgdesc-plugin.html

我花了一整天时间修补bug以及美化用户界面，这两个插件现在会看起来好很多。

SlideView的演示：http://pagetalks.com/share/slideView
imgDesc的演示在上面的发布链接内
欢迎大家留下意见！

]]> http://pagetalks.com/2009/07/05/slideview-and-imgdesc-plugins-updated.html/feed 2 jQuery slideView Plugin http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html#comments Sun, 08 Mar 2009 22:13:17 +0000 Robin http://pagetalks.com/?p=203

Description

From small-scale commercial public sites to large-scale CMS, there are needs of slideshow. Here is a simple and graceful to implement a slideshow based on a short piece of HTML Code in a both unobstructive and pleasant way.

Demo

Inside dev pack, there are two fully functional demos.
A live demo is also available on http://www.elfvision.com. The slide in portfolio makes use of this script.

描述

小到公司的商业站点，大到文章管理系统，都会有用到幻灯片来展示图片新闻的需求。这里，我提供一种简单、优雅的幻灯片解决方案。在一小段HTML代码的基础上，能够让你无障碍并愉快地实现幻灯片效果。

演示

在dev pack里面有两个可以运行的完整演示。在http://www.elfvision.com也有一个在线的演示，作品展示所用的幻灯片就是使用了该脚本。

Requirements

  • jQuery Libary, just download from jQuery Official Site
  • slideView script file. You can download it from below
  • a little knowledge on xhtml and css

Features

This plugin will generate a slideview within the given container based on the data in the HTML document.

The slideview will consist of a group of thumbs, a navigation tool and of course the original images.

The main image in the slideview will change in response to the mouse movement on the thumbs and the click of navigation buttons.

All you have to do is prepare a set of images in porper size and the thumbnail of thoese images.

Demostration

Click here to see a demo page.

Download

Note: There is a file embedded within this post, please visit this post to download the file.
Note: There is a file embedded within this post, please visit this post to download the file.
Note: There is a file embedded within this post, please visit this post to download the file.

Usage

HTML Preparation
Just a container and an unordered list which has links to the news page or something.

<div id="slideshow">
<ul class="slideView">
<li><a href="#"><img src="lib/slideView/images/1.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/2.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/3.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/4.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/5.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/5.jpg" alt="the description of image 1" /></a></li>
</ul>
</div>
Load jQuery Libary
You can directly add the following code in <head> tag：

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
Load slideView Plugin
<script type=”text/javascript” src=”slideview.js”></script>
Assigning the target object
Use it inside jQuery(document).ready() block:

$("#slideshow").slideView();

You can, of course , apply some change, customizing behaviours and appearance by the means of sending parameters to the method and modifying CSS：

$("#slideshow").slideView({
	thumbPrefix: "thumb_",
	frame: {
		isExist: true,
		color: "#365563"
	},
	speed: 150,
	easeOut: "swing",
	easeIn: "swing",
	easeThumb: "swing"
});

Code aboce will make slideView to load thumbnails of images, whose filenames match the pattern of “thumb_image-file-name.jpg” and so on. And also, the speed of slide is 500ms.

Parameters avaliable in latest versions:

thumb (Boolean)
if thumbnails should be displayed
slideBy (int)
a number that tells the script how many images should pass by at one time
loop (Boolean>
if it should loop automatically
interval (int)
the time interval to every loop
frame (object)
We can define a frame box overlayed on the slide:
frame.isExist (Boolean) : if it exists or not
frame.color (String) : Hex value for a color. if it exists, what color is it?
easeOut (String)
the easing method used when a large image slides downward
easeIn (String)
the easing method used when a large image slides upward
easeThumb (String)
the easing method used when thumbnails slide
CSS Modification
By default, images in the size of 460*300 will work perfectly, however, if you’d like to use images in different size, you need alter some lines in the css. See the description in the slideview.css. You won’t miss it.

Change Log

You can always refer to jQuery Plugin to trace the builds.

What’s new in 1.2.0
  • Support auto loop
  • Fix some problems with arrows
What’s new in 1.1.0
  • Beatify the UI
  • Support easing method in animation
  • Fix some strange behavious during animation
  • 1.1.0 Third Edition
  • 1.1.0 Second Edition
  • 1.0.1 First Edition

需求

功能

该插件会在给定的容器内根据HTML代码生成一个幻灯片。幻灯片将会包含一组缩略图、导航工具以及原始图片。
幻灯片内的主图片将会根据鼠标动作或导航工具的点击来改变。
你需要做的仅仅是准备合适尺寸的图片和他们的缩略图。

演示

点击这里查看演示页面

下载

Note: There is a file embedded within this post, please visit this post to download the file.
Note: There is a file embedded within this post, please visit this post to download the file.
Note: There is a file embedded within this post, please visit this post to download the file.

用法

准备HTML代码
你仅仅需要给出一个DIV容器和一个无序列表，列表内部包含指向文章或其他内容的链接。

<div id="slideshow">
<ul class="slideView">
<li><a href="#"><img src="lib/slideView/images/1.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/2.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/3.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/4.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/5.jpg" alt="the description of image 1" /></a></li>
<li><a href="#"><img src="lib/slideView/images/5.jpg" alt="the description of image 1" /></a></li>
</ul>
</div>
载入jQuery库
在 <head> 标签内部直接添加：

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
加载slideView插件
<script type=”text/javascript” src=”slideview.js”></script>
指定目标，并运行
在 jQuery(document).ready() 模块中写入:

$("#slideshow").slideView();

你也可以通过给该方法传递参数以及修改CSS玩当来改变该插件的外观和行为：

$("#slideshow").slideView({
	thumbPrefix: "thumb_",
	frame: {
		isExist: true,
		color: "#365563"
	},
	speed: 150,
	easeOut: "swing",
	easeIn: "swing",
	easeThumb: "swing"
});

>
上面的代码将会让该插件载入符合”thumb_iamge-filename.jpg”的文件名的缩略图，并一次只滑过一张图片。滑动将在500毫秒中完成。

1.1.0里面的新参数:

frame (object)
slideBy (int)
一次滑过的图片张数
loop (Boolean>
是否需要自动循环
interval (int)
循环时的每次切换图片的时间间隔
我们可以定义一个线条边框:
frame.isExist (Boolean) : 这个边框是否存在？
frame.color (String) : 如果存在，这里给出边框颜色的16进制值
easeOut (String)
当大图片向下滑动时的easing方法
easeIn (String)
当大图片向上滑动时的easing方法
easeThumb (String)
当缩略图滚动时的easing方法
修改CSS
默认情况下，该插件可以与460*300的容器和相应尺寸的图片完美运行。但如果你需要使用更大的图片，你就需要手动修改CSS文件了。打开slideview.css，你就明白了，仅仅是修改三个数值而已。

更改日志

你可以随时到 jQuery插件主页寻找更新或支持 .

1.2.0的新特色
  • 支持自动循环
  • 修改了箭头的一些问题
1.1.0的新特色
  • 美化了用户界面
  • 在动画过程中，支持easing的修改
  • 修改了动画过程中的一些奇怪先行为
  • 1.2.0第三个重要发行
  • 1.1.0第二个重要发行
  • 1.0.1初版
]]> http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html/feed 15