Tips & Tutorials

Creating Sliders with Gallery and FlexSlider

This assumes that you have Gallery module 1.3.3 installed as in the following example the slides can be clicked.

Adding FlexSlider

If you don't already have a blank template then you will need to go to Elements and create a new template.

  • Name the template blank
  • In the Template (HTML) field put just the place holder [[+content]]

Next create a new Document:

  • Select blank as the Template
  • Select Content Type as .js
  • Disable the WYSIWYG editor
  • Download a copy of FlexSlider from the internet, and copy and paste the contents of jsquery.flexslider-min.js to the Documents Content field
  • Create the document and make a note of the document ID

Now Duplicate the document and change the Content to following which will enable FlexSlider:

$fl(document).ready(function() {
    $('.flexslider').flexslider({
        animation: "fade",
        touch: false,
        controlNav: false,
        directionNav: false
    });
});

Record the ID of this document.

Creating the Gallery Album

Head to the Gallery option on the Dashboard

  • Click new album
  • Set the dimensions of the slider images under the large image options

Make a note of the album ID. Then upload as many images to the album as you want in the slider, for each image you should set the Link address that the user will be taken to if they click the slide.

Formatting

Two chunks are needed to layout the slider.

Under Elements create a new chunk called sliderWrapper and set the Chunk (HTML) to:

<div class="flexslider">

  <ul class="slides">

        [[+images]]

    </ul>

</div>

Create another chunk called sliderItem and set the Chunk (HTML) to:

<li>

    <a href="[[+uri]]"><img src="[[+src]]" alt="[[+title]]" /></a>

</li>

The first chunk provides the formatting for the slider which the second provides the formatting for individual slides.

Putting the Slider on the Page

Edit the template for the page that will holder the slider, then within the <head> section add:

[[javascript &core=`1` &src=`[[~72]]`]]

[[javascript &src=`[[~73]]`]]

Where 72 is the ID of the document holding your copy of jsquery.flexslider-min.js and 73 is the ID of the document holding the JavaScript to enable FlexSlider.

Next edit the Document that will have the slider:

  • Scroll to the bottom of the document and select Container for Gallery Album from the Document Behaviour dropdown and enter the slider album ID you created earlier in the space provided
  • In the Content (HTML) field add:
    [[gallery.album &lightbox=`0` &size=`l` &wrapperTpl=`sliderWrapper` &itemTpl=`sliderItem`]]
  • Save the Document and view the site front end, if all went well you now have a slider running the contents of which can be controlled by editing the contents of the Gallery Album

 

TUTORIALS