Submit your widget
HomeSlideshow & Scrollermultiple Nice JQuery slideshow

multiple Nice JQuery slideshow

Created 14 years ago   Views 21097   downloads 3760    Author devtrix
multiple Nice JQuery slideshow
View DemoDownload
122
Share |

Sliderman.js is a standalone javascript library for sliding images. The main feature of Sliderman.js is multiple unique effects which can be combined together.

Sliderman.js works in all popular browsers and was properly tested in the following versions:

  • Mozilla Firefox 3.6+
  • Google Chrome 5.0+
  • Apple Safari 5.0+
  • Microsoft Internet Explorer 7.0+
  • Opera 10.63+

Adding Sliderman.js to your page

Firtly you need to add script sliderman.1.1.1.js and stylesheet sliderman.css to <head> section of your page. 

<!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>
  ...
  <script type="text/javascript" src="/js/sliderman.1.1.1.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/sliderman.css" />
  ...
</head>

Then you write some html code, where you want the slider to appear in. 

<div id="slider_container_2">
  <div id="SliderName_2">
    <img src="demos/demo_2/img/1.jpg" width="700" height="450" alt="Demo2 first" title="Demo2 first" />
    <div class="SliderName_2Description">Featured model: <strong>Charlize Theron</strong></div>
    ...
    <img src="demos/demo_2/img/2.jpg" width="700" height="450" alt="Demo2 second" title="Demo2 second" />
    ...
    <a href="http://www.devtrix.net">
      <img src="demos/demo_2/img/2.jpg" width="700" height="450" alt="Demo2 second" title="Demo2 second" />
    </a>
    <div class="SliderName_2Description">Featured model: <strong>Charlize Theron</strong></div>
  </div>
  <div id="SliderNameNavigation_2"></div>
</div>

The <div id="SliderName_2"> is main element which will hold all images and sliding effect.
The <div id="SliderNameNavigation_2"></div> is a placeholder for the navigation bullets.

Links & Image Description (Captions)

If you specify <div class="SliderName_2Description"> <strong>HTML</strong> description here </div> after the image, Sliderman will show the its content as a description for the image (caption). You may rename class of the DIV element may or remove it at all. In our example (demo 2), the class is used only for setting specific CSS properties.

You may also add links to the images by adding <a href=""></a> element around an image. For example, promo slider on your homepage with links to your inner pages on each slides.

Image maps are also supported. All you need is to define the image map itself and add usemap="#mapName" property to your image tag.

 

Loading the Sliderman.js

You need to place the script for starting Sliderman.js after your slider container div.
The init script will looks like this:

<script type="text/javascript">

  var demoSlider = Sliderman.slider({container: 'sName', width: 700, height: 450, effects: sEffects, display: sOptions});

</script>

container string — id of the element which holds the slider.
width integer — width of the container in pixels
height integer — width of the container in pixels
effects mixed — effects to be used. Can be object, string, array of strings, array of objects or any combination of listed.
display object — display options for slides like buttons, autoplay, image captions, navigation etc.

demoSlider is an object which you can later use on the page. For example, creating a custom slides' navigation with preview.

The following code is for Demo 2 

<script type="text/javascript">

  var demoSlider = Sliderman.slider({ container: 'SliderName_2', width: 700, height: 450, effects: effectsDemo2,
    display: {
      autoplay: 3000,
      loading: {background: '#000000', opacity: 0.5, image: 'demos/demo_2/img/loading.gif'},
      buttons: {
        hide: true,
        opacity: 1, 
        prev: {className: 'SliderNamePrev_2', label: ''},
        next: {className: 'SliderNameNext_2', label: ''}
      },
      navigation: {container: 'SliderNameNavigation_2', label: '<img src="img/clear.gif" />'}
    }
  });

</script>

Loading the Sliderman.js with other JS libraries and frameworks

If you're using some popular JS libraries like jQuery, Prototype, Moo Tools, Ext, YUI or other you may add the init to the startup method of these libraries.
The jQuery example is below: 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    // you may put the init code here
    ...
    
  });
</script>

You might also like