How To Display Image Galleries with Thumbnails on Drupal with Flex Slider

| Drupal Development | 57 seen

Drupal Drupal modules FlexSlider

Recently, I faced a challenge while trying to display image galleries on a Drupal-powered website.

While there are a few modules that you can use to build your gallery view, such as the Views Slideshow Gallery module, I recently discovered some Drupal-powered sites using the Flex Slider library.

Excited by this new discovery, I tried to create a gallery with thumbnails, but unfortunately, it didn't work out as expected. However, I eventually found a solution on how to configure Flex Slider to work on Drupal.

Here are the steps required:

  1. Download the Flex Slider module, extract it to sites/all/modules
  2. Enable the Flex Slider and Flex Slider Views Display
  3. Download the FlexSlider library from https://github.com/woothemes/FlexSlider/tree/version/2.2
  4. Unzip the file and rename the folder to "flexslider" (pay attention to the case of the letters)
  5. Put the folder in a libraries directory - Ex: sites/all/libraries
  6. Ensure you have a valid path for all required files: jquery.flexslider-min.js, flexslider.css, and jquery.flexslider.js
  7. Go to admin/config/media/flexslider and create two new types, one for the gallery slider and another for the thumbnail slider.
  8. Create a new view, Gallery (block), to display the gallery slider. Set the format to Flexslider | Settings Option Set - Gallery and add the Images field.
  9. Create another block on the same view, call it Thumbnails. Set the format to Flexslider | Settings Option Set - Thumbnail and add the Images field.
  10. Make sure to remove the checkbox under Multiple Field Settings for the Images field.
  11. Place both blocks under the content region or any other preferred region.
  12. Go back to Flex Slider options, open the Gallery type, and under the Advanced Options tab, find the Sync field and enter "#flexslider-2." This will make both views work together.
  13. Edit the Thumbnail type and make any desired adjustments. Make sure to turn off the pager under Navigation and Controls for the thumbnail type.

With these steps, you should now be able to successfully display image galleries on your Drupal-powered site using Flex Slider.

Hire Reinis Fischer today and experience the difference that a top Drupal specialist can make for your website development project!