# Flexslider

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 <a href="https://github.com/woothemes/FlexSlider" target="_blank">FlexSlider</a> pages. On the <a href="https://github.com/woothemes/FlexSlider/releases" target="_blank">releases page</a> 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 <a href="https://www.drupal.org/project/libraries" target="_blank">libraries</a> page, install and enable libraries as usual.
* FlexSLider: from the <a href="https://www.drupal.org/project/flexslider" target="_blank">flexslider</a> page, install the module flexslider as usual.
* Enable modules "FlexSlider", "FlexSlider Fields" and "FlexSlider Views Style".


### Example: 

see also [this nice documentation](http://coldfrontlabs.ca/blog/using-flex-slider-drupal-7)


* 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%&nbsp; in flexslider.css\*/
    max-width:100%;&nbsp; /* 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 -&gt; configuration -&gt; flexslider) and use that instead.

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

<strong>Slideshow embedded in your document, almost as an image.</strong>

* Install and enable&nbsp; module <a href="https://www.drupal.org/project/node_field_embed" target="_blank">node field embed</a> as usual.

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

* admin -&gt; configuration -&gt; 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".
