Drupal 7 Image Gallery (Without Views) With Field Slideshow

Drupal 7 Image Gallery (Without Views) With Field Slideshow

| 0 views | Aug,12,2013 05:49:44 PM

Image Gallery for Drupal 7 is very easy now with field slideshow module. Normally we use views to show a slideshow in our website. But the field slideshow module made our life so easy for creating a simple image gallery. Still for advance options like commenting for each image, we need to look for other modules like node gallery etc.

Now we are going read steps how to create image gallery in Drupal 7 with field slideshow module.

Before starting to try out this tutorial please make sure you have installed Drupal 7.x and image module is enabled.

Now download the following Drupal modules

http://drupal.org/project/field_slideshow

http://drupal.org/project/libraries

Download the external jquery libraries required to enable the slideshow

Install the above Drupal modules field_slidshow and libraries as usual way.

Here is Good documentation for the libraries, how to install external libraries http://drupal.org/node/1440066

Step – 1 Create Content type

Go to Structure > content types > Add content type

Create a content type “Gallery”

Step – 2 Create Image field in the Gallery Content type

In the manage fields Under “Add New field” add image field information as follows

Label: Gallery Image

Field Type: Image

Widget: Image

Now click “Save Button”

Continue by clicking “Save field Settings”

In the Next Screen, check the Required field Checkbox.

Check Atl and Title field by checking the Check boxes.

Next choose the “unlimited” in the Number of values.

And click “Save Settings” to save.

Step – 3 Handle the display of image

Navigate to “Manage Display”

Created Gallery Image will be shown with default settings to Label : Above and Format: Image

Remove the label by selecting the option <hidden>

Change the Format to Slideshow

Click Save Button.

For Teaser

Hide the body, by moving the body field to Hidden.

For Gallery Image Hide the label by selecting the option <hidden>

click “Save” button.

In the same page click the wheel button

 In the Format colurmn, choose the Image Stylt to “thumbnail” and Link image to choose “content” Click update.

 Now your Gallery is ready, go to “Add Content” to create a gallery for your site.

Upload images for your Gallery

Click “Save” button to view your Gallery.

Hurry! Our Gallery is ready. Uploaded images are sliding one by one.

Now we can customise the way the images slide, add thumbnails etc,

For that we need to Navigate to

Sturcture > Content types > Gallery > manage display.

Click the Configuration link in the Gallery Image row.

You can opt appropriate Image Style as per your requirement. Here i choose medium

Next, checked the Create perv/next controls and create play/pause button.

In pager choose Image

In pager Image Style choose thumbnail

After customising click “update” and “Save”.

Now come back to your posted Gallery page to see the changes we have made in the configuration.

Now, you can notice that navigation controls with pause and play is came. And thumbnails are also shown below the slideshow.

Add new comment

(If you're a human, don't change the following field)
(If you're a human, don't change the following field)
(If you're a human, don't change the following field)
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Back to top
Message us