Website Creation: Slideshow jQuery Plugin

Web site creation is the main and most fascinating occupation for me. No wonder that one day I’ve decided to become a php developer and to get involved in rapid web site development with popular open source content management system WordPress.

Although today I’m not going to get you through details of my life and developed projects but have an intention to share a new jQuery plugin for a slideshow and photogallery.

When I noticed the growing popularity of JS-Slide and JS-Fade effects I have decided to develop this plugin for jQuery. The presented plugin will help you to add professional JS-Slide and JS-Fade effects to the site easily.

It will look even better if you take time to install mouse wheel plugin on the web site as in this case the JS-slider will also respond to the mouse wheel when scrolling.

Example of the ulSlide jQuery plugin

Download ulSlide jQuery plugin from repository.

If you try it, you could see this one is simple but cute :). For more comprehensive version see software development projects portfolio that is implemented with this plugin. There you can see that it’s working in two axes and allows you to get a full view of the every project that I like the most.

Guess that’s enough for presentation. Now let’s take a look at the list of the main settings to setup ulSlide jQuery plugin and make it work.

SetUp

width (integer) (optional)
Width. You can set it in CSS.

height (string) (optional)
Height. You can set it in CSS. If you set both width and height as ‘auto’ the size of the object will be adjusted to the size of the next frame, when the frame is changed.

effect (string) (optional)
Effect Type. Possible values: ‘slide’ or ‘fade’. By default it is ‘slide’.

axis (string) (optional)
Axis for Slide-effect. It can take values ‘x’ or ‘y’. By default it is ‘x’.

direction (string) (optional)
The order of slides (direction for Slide-effect). The available values are ‘f’ or ‘b’. By default it is ‘f’.

duration (integer) (optional)
Time of sliding in milliseconds. By default it is ’600′.

autoslide (mixed) (optional)
Period between the frames changing in milliseconds. By default it is ‘false’ – auto change is disabled.

navigator (selector) (optional)
Selector of the set of elements that would lead you to the appropriate slides. It lets you create something like Tabs.

bnext (selector) (optional)
Selector of the Next slide button.

bprev (selector) (optional)
Selector of the Previous slide button.

current (integer) (optional)
Frame number to start with. By default the first slide has value ’0′.

padding (integer) (optional)
The distance between frames in pixels for Slide-effect. By default it is ’20′.

statusbar (boolean) (optional)
The status bar will be displayed while images are loading (Inscription “Loading”). Recommend to be customized. By default it is ‘false’.

mousewheel (boolean) (optional)
If the mousewheel plugin is installed on the site the slider will also respond to the mouse wheel.

print_current (selector) (optional)
Element displaying the current slide number.

onAnimate (function(settings, thisEl)) (optional)
Frame changing event.

Code example

Here is a code example of the jQuery plugin. To try all its features, including using mouse wheel, you should download the file above.

</pre>
<ul class="slide1">
	<li><img src="images/image-1.jpg" alt="" /></li>
	<li><img src="images/image-2.jpg" alt="" /></li>
	<li><img src="images/image-3.jpg" alt="" /></li>
</ul>
<pre>
<a id="e1_prev" href="#"> Previous </a> | <a id="e1_next" href="#"> Next </a>

<script type="text/javascript">// <![CDATA[
jQuery(function() {
    jQuery('.slide1').ulslide({
		width: 443,
		height: 'auto',
		bnext: '#e1_next',
		bprev: '#e1_prev',
		axis: 'x',
		autoslide: 2000
	});
});
// ]]></script>

The post is provided by the member of CMS Team. If you’d like to find out more about using jQuery in web development or learn details about our work and development skills please leave a reply or contact NIX Solutions.