Image Galleries

Image Galleries

You can use simple image galleries in elearn.js. Those need to be written in Html.

Image galleries will always have a zoom button in the top right, to create an window fitting overlay with the current image. The button will be visible, when the gallery is hovered or touched.

Also images can be switching by touch swiping in addition to the arrow buttons.

This is the basic Html structure of galleries

<div class="slider">
  <ul class="img-gallery">
    <li>
        <img src="assets/img/image1.png" alt="My image 1" />
        <p>A <b>description</b> is easy.</p>
    </li>
    <li>
        <img src="assets/img/image2.png" alt="My image 2" />
    </li>
  </ul>
</div>

The outer div.slider and ul.img-gallery define the gallery, so that elearn.js can actually create the correct elements. The ul is a list container. Inside of this are li elements to define the single elements. Each img needs to be in a li. It is not allowed to use anything but img elements as main element and not more than one per li. You can add a p with a description if you want. The description will be displayed below the image and can contain additional Html elements.

Image Preview and Navigation

To add an image preview and navigation you can simply add preview-nav to the div.slider as class.

<div class="slider preview-nav">
  ...
</div>

This will create a preview of four and a half images below the actual gallery. Clicking on one of the images will display it in the gallery.

Image Loop

If you want to get back to the first image after the last one you can add the class loop to the div.slider.

<div class="slider loop">
  ...
</div>

This way the gallery automatically loops and thus links the last and the first image. This loop will be seamless into the direction your gallery is moving.

If you want your gallery to jump back to the first image or to the last, moving through all of the image in between, you can do so by using back-loop instead of loop. This way you will click on the right arrow on the last image and the gallery slides back to the beginning instead of to the right. This might be useful in tutorials or similar use cases, where you want the user to recognize the end of the actual images. The back-jump works from start to end as well as end to start.

The preview-nav will never loop, but it will always display the currently selected image. This might end in a really fast switch animation for a loop of a lot of images.

Display Settings

You can change the size calculations and size adaptions of image galleries.

By default the image gallery's size will adapt to the visible image. This size might change when switching images.

Max-Height

You can cap the height of the images by settings a custom max-height.

<div class="slider" style="max-height: 400px">
  ...
</div>

This way the actual image displayed will never be larger than 400px in height. Smaller images might still shrink the gallery.

Fixed-Size

You can add the fixed-size class to the div.slider so that the gallery will not dynamically adapt to the displayed image. This setting will result in a size calculation once based on the largest image.

<div class="slider fixed-size">
  ...
</div>

or for older versions of elearn.js you need to add the class to the ul:

<div class="slider">
  <ul class="img-gallery fixed-size">
    ...
  </ul>
</div>