Panel Sliding Widget

Overview

Widget Panel Sliding (Image Sliding) is designed to present a sequences of images only. Images can have associated captions placed at the bottom of the image.

This is useful when there are a lot of images for some particular subject/topic and you don't want images occupying the whole space. Widget Panel saves screen space, grabs the users attention or concentration, only shows one image at a time and creates a good user experience, especially on tablets.

It is particularly effective when used in a step-by-step learning sequence. We use it in our internal training programs to demonstrate correct software use.

Sliding panel is strictly a fixed size container. The images are sized to the slider and viewport. In AZARDI the images can still be double tapped and enlarged.

The sliding panel can be used anywhere. That means online or in ePubs for reading systems that support Javascript. In print it will present as a stack of images.

Sample Panel Sliding

Panel Sliding Options

There are two options for Panel Sliding block.

1. Direction: Horizontal (default)

2. Direction: Vertical

Direction instruction for telling panel which way you want to slide to, horizontal or vertical. Horizontal is default which slides horizontally left to right. Adjust the CSS to make the default right to left. If you want panel to slide vertically just select the "vertical" option from the content block "direction" options.

Production and Design

Panel Sliding (Image Sliding) comes with default size of 600px X 400px. The size can be customized according to any design requirements. Images should be manipulated to be made same size and aspect ratio as the panel size so images are not distorted when filling the panel viewport.

By default image caption text is over the image but can be customized.

Using in IGP:Digital Publisher

1. To insert Widgets Panel Sliding into the IGP:DP Writer
2. Place your cursor at the insertion point in the text.
3. From the Content Blocks accordion select W01: Widgets
4. Double click on "01 Panel Sliding" block.
5. The Panel Sliding block will insert into the Writer text with five system placeholder images and caption text.

Editing the Placeholder Content

You can now edit (or delete) the captions and replace the placeholder images. Your images must be uploaded in IGP:Media Manager first.

1. To replace placeholder images click once on an image
2. Open Media Manager
3. Under the target image click on the + button (Insert to document option)
4. From the insert options click on the option Select and Replace Image only
5. The placeholder image will immediately be replaced with your selected image. 
6. Repeat this until all required images are inserted.
7. If your images have captions select the placeholder caption text and replace with the appropriate caption text.
8. If your images don't have captions delete the default caption text.

NOTE: Widgets do NOT use standard Media blocks. They have their own controlling container. Only use replace image. 

Adding More Images to the Widget

You can add more images at any time. The images are in a simple unordered list.

Place your cursor at the end of the caption of the last entry. Hit Enter. A new list item will appear. you can see the bullet in the IGP:Writer view.

Tagging Pattern and CSS

The presentation design is simple as possible and can be customized for size, look and feel as needed.

Widgets use the standard IGP:FoundationXHTML tagging pattern syntax where all grammar controlled CSS class values have the -rw suffix. This pattern can be extended with any number of images in a panel.

A01 Widget Panel Tagging Pattern

<div class="widgets-rw panel-sliding-rw slide-horizontal-rw">
<div class="slider-rw">
<ul>
  <li><img alt="" src="/default-graphic.png" />
    <p class="caption-rw>Image 1 caption goes here...</p>
  </li>
  <li><img alt="" src="default-graphic.png" />
    <p class="caption-rw">Image 2 caption goes here...</p>
  </li>
  <li><img alt="" src="/default-graphic.png" />
    <p class="caption-rw">Image 3 caption goes here...</p>
  </li>
  <li><img alt="" src="/default-graphic.png" />
    <p class="caption-rw">Image 4 caption goes here...</p>
  </li>
  <li><img alt="" src="/default-graphic.png" />
    <p class="caption-rw">Image 5 caption goes here...</p>
  </li>
</ul>
</div>
</div>

Default CSS

This widget has three controlling selectors.

.panel-sliding-rw

.panel-sliding-rw .slider-rw

.panel-sliding-rw .slider-rw li

To change the size of the panel (or any other styling),

Open the CSS Editor

Navigate to A03 WIDGETS

Find the selectors and change width: 600px; and height: 400px; to the required size.

All images must be the same size or CSS sized to the same size.

Calculate the .frame-rw as
        image-width X number of images.

For example: if you have 12 images of 300px X 250px.

.panel-sliding-rw will be set to width:300px; height:250px;

.panel-sliding-rw .frame-rw width will be set to 300px X 12 for final size of width:3600px; height:250px.

NOTE: If you are using multiple sliding panels with different sizes or count of images in a document you will have to do the sizing for each panel using an ID reference. Substitute selector .panel-sliding-rw with your ID. Eg:

#panel-sliding-01 {...}

#panel sliding-02 { ...}

A01 Widget Panel Default CSS

.panel-sliding-rw {
    position: relative;
    width: 600px;
    height:400px;
    overflow: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    }
.panel-sliding-rw .slider-rw {
    position: absolute;
    width: 3000px;
    height:400px;
    border-radius: 0;
    }
.panel-sliding-rw.slide-vertical-rw .slider-rw {
    width: auto;
    height: auto;
    }
.panel-sliding-rw .slider-rw ul {
   margin: 0;
   padding: 0;
   }
.panel-sliding-rw .slider-rw li {
    list-style: none;
    width: 600px;
    height: 400px;
    float: left;
    position: relative;
    margin: 0;
    padding: 0;
    }
.panel-sliding-rw .slider-rw li img {
    width: 100%;
    }
.panel-sliding-rw .caption-rw {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 20px 10px 20px;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    }