Add new comment

Colorbox slideshow with views from multiple images field by first image

This article about colorbox and views: how to display first thumb styled image of the multiple image field and after click on it display all images in colorbox.

First of all install views, libraries, colorbox и colorbox plugin.

$ drush en views libraries colorbox -y

Download colorbox plugin and unpack it in libraries folder.

https://github.com/jackmoore/colorbox/archive/1.x.zip

Steps:

  1. Create views page/block.
  2. Show: Fields.
  3. Add field Image (for thumb)
    1. Exclude from display
    2. Formatter “colorbox”
    3. Content image style: “Thumbnail“
    4. Content image style for first image : no special style
    5. Colorbox image style: “Large”.
    6. Gallery (image grouping) : Per post gallery
    7. Show Multiple field settings:
    8. Display all values in the same row  
    9. Simple separator: leave blank
    10. Display 1 value
  4. Add field Image (for colorbox)
    1. Exclude from display
    2. Formatter “colorbox”
    3. Content image style: Hide (dont display)
    4. Content image style for first image : No special style
    5. Colorbox image style: Large
    6. Gallery (image grouping) : Per post gallery
    7. Show Multiple field settings:
    8. Display all values in the same row  
    9.  Simple separator: leave blank
    10. All values starting from 1.
  5. Add field “Colorbox: Trigger Colorbox“
    1. Trigger field: field_images. (Select your images field name)
    2. Popup: your images field token. Ex: [field_images_1] if your field is field_images.

That's all. Now you can check page or block. There would be only the first image of multiple field and by clickin on it colorbox would be with all images from those field.

UPD: I was so happy to see this manual on drupal.org https://www.drupal.org/node/1419098#comment-8883415