How to use
Usage

Overview

SliderWall is a powerfull and easy to use JQuery slider and header rotator component created entirely with JavaScript. Use SliderWall to create beautiful presentations of your content, whether you need a simple image slideshow or a more complex HTML content rotator.

Note: SliderWall uses eye-catching effects for transitions between slides. The effects are created exclusively with JavaScript and require HTML5 compatible browsers.

SliderWall is fully customizable through CSS and you are able to create and reuse your own skins. SliderWall is easy to integrate into any HTML project, from a lightbox slideshow to a full-fledged website.

Offering support to touch screen devices, SliderWall is a flexible component that helps you present your content for both desktops and mobile devices.

Top

Compatibility

SliderWall was developed to work on any HTML5 and CSS3 browser: latest Chrome, Firefox, Safari, Opera and Internet Explorer 9+.
JavaScript must be enabled in your browser for SliderWall to work.
SliderWall is compatible with jQuery version 1.6+.

Top

How to use

SliderWall comes in the form of an easy to use JavaScript component that uses JQuery to accomplish its tasks. For this, the JQuery and SliderWall JavaScript files must be included in your HTML files.

1. Download the latest JQuery version (or the version compatible with your version of SliderWall) from http://docs.jquery.com/Downloading_jQuery.

2. Download the SliderWall package from www.sliderwall.com.

3. Extract the SliderWall templates and JQuery from their packages.

4. Place the SliderWall JavaScript file within your project's folder structure together with JQuery. For example, if you prefer keeping all your JavaScript files together in one place, you could place them in a folder called javascript, found on your project's root folder (root/javascript/).

Also place the SliderWall template's CSS file into a folder of your choice (for example root/css/).

5. Import JQuery and the SliderWall template into your HTML file, together with the CSS file:

<link rel="stylesheet" type="text/css" href="slider_skin.css"/>
<script type="text/javascript" src="javascript/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="javascript/sliderwall-bullets-1.0.0.js"></script>

5. Within your HTML file's <body> tag specify the content for each of the SliderWall's slides. Within a master <div> tag for the SliderWall component use <div> tags for each slide. SliderWall will use the master <div> tag's unique id to identify and retrieve content.

<div id="mySliderWallID">
  <div rel="slider_content" style="display:none;">
    <div rel="slide">
      <div rel="type">image</div>
      <div rel="title">Slide 1</div>
      <div rel="description">Slide 1 is simply an image (click on the image to open somesite.com)</div>
      <div rel="content">images/1.jpg</div>
      <div rel="thumbnail">thumbnails/1.jpg</div>
      <div rel="target_url">http://www.somesite.com</div>
      <div rel="target_window">_blank</div>
    </div>
    <div rel="slide">
      <div rel="type">html</div>
      <div rel="title">Slide 2</div>
      <div rel="description">Slide 2 is a simple HTML page</div>
      <div rel="content">
        <div class="slideContent">
          <p>This is some HTML content for the second slide.</p>
          <br />
          <p>I can even place an image:</p>
          <img src="images/someImage.jpg" alt="Image" />
        </div>
      </div>
      <div rel="thumbnail">thumbnails/2.jpg</div>
      <div rel="target_url"></div>
      <div rel="target_window">_blank</div>
    </div>
    <div rel="slide">
      <div rel="type">object</div>
      <div rel="title">Slide 3</div>
      <div rel="description">Slide 3 is an Adobe Flash application</div>
      <div rel="content">swf/flashapp.swf</div>
      <div rel="thumbnail">thumbnails/3.jpg</div>
      <div rel="target_url"></div>
      <div rel="target_window">_blank</div>
    </div>
  </div>
</div>

6. Within the <script> tag initialize the SliderWall component for the mySliderWallID div.

<script type="text/javascript">
var err;
$(document).ready(function() {
  try {
    $("#mySliderWallID").sliderWallBullets({
      cssClassSuffix: "",
      domainKeys: "",
      imageAlign: "middleCenter",
      imageScaleMode: "scaleCrop",
      loopContent: true,
      rssFeed: null,
      selectableContent: true,
      autoSlideShow: true,
      slideShowSpeed: 6,
      showTimer: true,
      timerPosition: "belowControlBar",
      autoHideControlBar: true,
      controlsHideDelay: 2,
      controlsShowHideSpeed: 0.2,
      showControlBar: true,
      autoHideNavButtons: true,
      showNavigationButtons: true,
      autoHideText: true,
      useGestures: true,
      useKeyboard: true,
      useMouseScroll: true,
      transitionType: {
          optimizeForIpad: false,
          random: false,
          transitions: [{name: "Slide", direction: "horizontal", duration: 0.75, tweenType: "Expo", easing: "easeInOut"}]
      }
    });
    var slider = $("#mySliderWallID").data("sliderWall");
  } catch(err) { /* handle any errors */ }
})
</script>

7. When reaching this step, if you open the HTML page with a HTML5 compatible browser, the slideshow will be displayed with the default skin. In the last step the skin can be customized by editing the slider's CSS file. You can also set the size of the slider from the CSS file.

For information on how to customize the look of the SliderWall templates please refer to the skinning document.

Top

Specify the slider's content

SliderWall displays slides that contain images, flash clips or even full HTML content. The structure and content for the slider is defined as HTML <div> tags.

The main <div> tag will contain the slider. This must have a unique ID to identify the slider among the elements of the web page. SliderWall's JavaScript initialization function will be applied to the <div> with that unique ID.

<div id="mySliderWallID">
</div>

Each slide will be defined by its own <div> tag. This contains information about the type of the slide, title, description, content, thumbnails, target url and target window. The SliderWall HorizontalList and VerticalList templates require two extra fields that define the title and description displayed within the list items (titles and descriptions displayed within the list items should be shorter than those displayed on the slides). The information for the slides is also specified through <div> tags, with the rel attribute set to the type of information provided: type, title, description, content, thumbnail, target_url, target_window, thumbnail_title and thumbnail_description.

<div rel="slide">
  <div rel="type">image</div>
  <div rel="title">Title for the slide</div>
  <div rel="description">This slide is simply an image (click on the image to open somesite.com)</div>
  <div rel="content">images/myImage.jpg</div>
  <div rel="thumbnail">thumbnails/myThumbnail.jpg</div>
  <div rel="thumbnail_title">Short title</div>
  <div rel="thumbnail_description">Short description</div>
  <div rel="target_url">http://www.somesite.com</div>
  <div rel="target_window">_blank</div>
</div>

The type of the slide can be image (for images), object (for swf files) or html (for full HTML content). The content <div> tag can contain the URL of an image (if the type is set to image), the URL of a SWF file (if the type is set to object) or the HTML content itself (if the type is set to html). The HTML content is defined exactly like any other content by using HTML tags, placed within the content <div> tag.

Images and Flash clips can also be provided as HTML content, each requiring its corresponding tags (<img> for images and <object>/<embed> for Flash content). In this case the type of the slide must be set to html.

Note: For slides that have the type set to object or html only the Alpha and Slide transition effects will work. The rest of the transition effects use the browser canvas (HTML5 compatible browsers) and work only on images. In this case set the slide type to image and the content must be the URL of an image.

Some of the SliderWall templates allow image thumbnails for each slide. If an image slide does not have a thumbnail specified for it, then SliderWall will use the content image and display it as a thumbnail. However, if a wrong thumbnail image URL is provided, the browser will display the usual icon for missing images.

The target_url option is used for attaching a URL to the slide so that when the user clicks on the slide, the target url will be opened automatically in a new tab. This only works for image slides (type set to image), not for HTML slides that may require user interaction.

Finally, the target_window option is used to set the window in which the target URL will be opened. By default, the URL's are opened inside a new browser tab or window (target_window value is _blank by default) but they can be opened inside the same window or even a specific frame. Possible values for this option are _blank, _parent, _self, _top and framename.

Top

Notes

  • SliderWall works only on HTML5 and CSS3 compatible browsers: Chrome, Safari, Firefox, Opera, IE 9+.
  • For SliderWall to work in IE9, the HTML page containing it must be open in IE9 standards mode not in IE9 quirks mode. For this, the HTML page document type must be set to HTML5: <!DOCTYPE HTML>
  • For slides that have the type set to object or html only the Alpha and Slide transition effects will work. The rest of the transition effects work only on images (slide type set to image).
  • To have multiple SliderWall instances on the same HTML page, with individual skins, use different CSS rules. Add suffixes to the default CSS rules, then specify those suffixes to the cssClassSuffix parameter for each SliderWall instance. For more information please consult the API reference document and the corresponding example.
  • When using a second SliderWall instance as content for the slide of a main SliderWall instance (container), the JavaScript code embedding the content SliderWall must be outside the <div> tag of the container SliderWall. However, we recommend placing the JavaScript codes that initialize the SliderWall instances within the <script> tag, inside the <head> tag, for a more organized and maintainable code. Otherwise, the JavaScript code should be placed after the <div> tag of each slider. Please see the corresponding example for code details.
  • Take into consideration that if one of the slides contains JavaScript code, that code will execute even if the slide is hidden.
  • If the HTML content of a slide contains an embedded Flash or video clip (using the <embed> tag), the wmode attribute of the <embed> tag should be set always to transparent.
<div rel="content">
  <p>This is some HTML content for the second slide.</p>
  <br />
  <p>I can even place an image:</p>
  <img src="someImage.jpg" alt="Image" width="300px" height="200px" />
  <embed wmode="transparent" src="http://www.somepage.com/video.mp4" width="400" height="300" autostart="false" />
</div>
Top