Drupal 7 Image Gallery (Without Views) With Field Slideshow

kamal 4
Drupal
Site Building
Image
Drupal 7 Image Gallery (Without Views) With Field Slideshow

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.

Comments

Hi,
I have images in 4 categories. I want to display them separately. For each category category name and images will be displayed. If there are more than 6 images, a slider is needed . On click of image, i want to open it in popup.

and then same repeats for the next category but with different category and their set of images. Please let me know how can i achieve this ??

@satish kindly create a content type as suggested in the tutorial, your content type is category, so you can create gallery with category name and images as suggested

And for popup, use color box module

Add new comment

(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Want to discuss, How Kiluvai Tech Solutions can help you?Get Started