jQuery slideView Plugin

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

slideView 1.2 dev pack (275.4 KiB, 1,064 hits)

slideView 1.1 (283.3 KiB, 186 hits)
You need to be a registered user to download this file.

slideView.rar (271.9 KiB, 159 hits)
You need to be a registered user to download this 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

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

需求

jQuery脚本库，你可以从 jQuery Official官方站点下载
slideView脚本文件
一点点关于xhtml,css,js的知识

功能

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

演示

点击这里查看演示页面

下载

slideView 1.2 dev pack (275.4 KiB, 1,064 hits)

slideView 1.1 (283.3 KiB, 186 hits)
You need to be a registered user to download this file.

slideView.rar (271.9 KiB, 159 hits)
You need to be a registered user to download this 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插件

指定目标，并运行

在 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初版

10 Comments

Ryan

Posted August 29, 2009 at 2:29 pm | Permalink

First of all, really slick plugin. I have noticed what may be a minor bug though. If you use images (list items) in multiples of 3, it will let you slide one extra time to the right, which brings a blank page. It looks like math is off somewhere, but I haven’t been able to determine where in next.click().

–Ryan
nino

Posted February 11, 2010 at 11:29 am | Permalink

cool plug in! I was wondering if there was a way to auto play the slideshow? I want it to auto play and have the controls too
cwilli14

Posted April 5, 2010 at 9:00 am | Permalink

cannot open slideView.1.1.rar
Robin

Posted April 5, 2010 at 9:27 am | Permalink

i really recommend you to use 1.2 instead.
Please download slideView 1.2 dev pack
sony

Posted April 15, 2010 at 6:14 am | Permalink

Very nice plugin
360

Posted May 29, 2010 at 12:56 pm | Permalink

cool plug.

I download it.

Thinks!!
yuki

Posted June 8, 2010 at 11:56 am | Permalink

very nice plugins
Piczmania

Posted July 15, 2010 at 12:35 am | Permalink

very nice plugin indeed..i guess it is one of the best
yingzi

Posted August 9, 2010 at 1:31 pm | Permalink

俺是中国人.
Robin

Posted August 9, 2010 at 2:46 pm | Permalink

哥也是中国人⋯⋯

2 Trackbacks

By jQuery slideView Plugin Updated – PageTalks on July 5, 2009 at 4:47 pm

[...] imgDesc Plugin (3,952)PAGESHOW (2,079)jQuery slideView Plugin (1,718)20 Amazing Photoshop Light Effects (1,709)jQuery webPrejudice Plugin (1,559)ABOUT [...]
By Diaporama jQuery avec SlideView on July 17, 2009 at 1:58 am

[...] Documentation et téléchargement. [...]

PageTalks