slideshow

Flexslider is a module to create a slideshow in a field of type image.

Flexslider has a library part and a module part.

Install the library:

  • download the library from the FlexSlider pages. On the releases page you find the available releases. I choosed 2.6.0. Download the zip file under "Downloads".
  • Unpack the zip file, for example FlexSlider-2.6.0.zip, and rename the resulting folder to flexslider.
  • Place this folder in sites/all/libraries, and check that the file sites/all/libraries/flexslider/jquery.flexslider.js exists.

Install the module:

  • Libraries: from the libraries page, install and enable libraries as usual.
  • FlexSLider: from the flexslider page, install the module flexslider as usual.
  • Enable modules "FlexSlider", "FlexSlider Fields" and "FlexSlider Views Style".

Example: (see also this nice documentation)

  • Create a content type with "Image" as one of the fields, or add an "Image" field to en existsing content type.
  • Make sure that the number of images for this Image field is larger than one (the field under "Number of values")
  • Still editing the content type, switch to the "manage display" tab, and choose "flexslider" in the "format" column of your Image field. Save the content type.
  • In the row displaying your Image field in the "manage display" screen, at the far right is a gear symbol. Click that and some options are presented to you for the Image field. Choose:
    • Label: hidden
    • Option set: Default
    • Image style: Medium
  • Click "update" and then "save"
  • Create a page using the content type mentioned above, and add some pictures to the Image field.

You will see now a slideshow, but the images are filling all available space and are a bit blurred. How to fix this: put the following in your css:

div[classs~="flexslider"] .slides img{
width: auto; /* undo width: 100%  in flexslider.css*/
max-width:100%;  /* Make sure the image stays inside its surrounding container. */
height: auto; /* keep the aspect ratio */
}

The "Option set" above takes care of speed, mode and more properties of the slideshow. Next to the Default option set, you can create your own option set (admin -> configuration -> flexslider) and use that instead.

Note: if you are using the module "jquery update", make sure that jquery version is not larger than 1.8.

Slideshow embedded in your document, almost as an image.

The "node field embed" feature must be activated for text formats (for example "full html"):

  • admin -> configuration -> text formats
  • Enable the text formats to use this feature:
    • configure a text format (for example "full html")
    • enable "Inser node field"

Assuming that the field of the content type containing the slideshow is called "slides", the text [[field:slides]] in your content will display the slideshow inside the body. If you want more than one slideshow, define a content type with 2 ore more slideshows and use the text [[field:slides1]], assuming that you named the second slideshow "slides1".