The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
jQuery slideShow 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.
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.
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
