Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Creating Sliders with Gallery and FlexSlider
02-17-2014, 06:46 AM
Post: #1
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:
Code:
$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:
Code:
<div class="flexslider">
  <ul class="slides">
        [[+images]]
    </ul>
</div>

Create another chunk called sliderItem and set the Chunk (HTML) to:
Code:
<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:
Code:
[[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

clearFusionCMS Lead Developer
Find all posts by this user
Quote this message in a reply
01-10-2017, 01:01 AM
Post: #2
RE: Creating Sliders with Gallery and FlexSlider
Thanks for this tutorial, it's absolutely helpful!
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)