I want to use one imagefield field as a trigger to popup another multi-valued imagefield in colorbox.

Hey mollybt,

Wow this issue has been opened for awhile. If this is still an issue for you, I am going through a similar problem. I had your issue first (mines D6) and the reason was that the ImageCache I chose for the trigger image was a type of Colorbox - ImageCache. Change this to an option that is not Colorbox related. You can keep the actual popup field the same.

But once I did this, yeah it worked, but the first image now is a combination of ALL images in the gallery so I am still stuck...

Did any of you find a solution?

Yeah I did eventually.

You need 3 total fields, in this order:

• Image Field (this is the trigger, so usually set to a colorbox - galleryformatter thumbnail imagecache, or some other small colorbox image cache) Exclude from display
• Image Field (this is the pop up, should have a larger colorbox imagecache) Exclude from display
• Colorbox Trigger (set trigger to first image field, set popup token to the second image field.

Now the key is:

• The first image field, make sure you check Group Multiple Values, and enter Show 1 and starting from 0
• Now the second field set to Show "leave blank" and starting from 1

You should also make sure you Colorbox setting are right as well under Site Configuration > Colorbox.

• Image field options (CCK) - Set to Per field gallery
• Extra settings - make sure Enable Colorbox load is set.

@TravisJohnston
That is great, I just tested that on my project where I do display 6 images in a row) but the colorbox will contain even more (all) pictures.

Looks like we should add this to the documentation, it looks like this is still "to do".

I will make a suggestion, would be great you help me review this.

Is it OK when I change the Component to "documentation" ?

What about this : Please help because my English is not the best:

Use the Views Colorbox Trigger field:
------------------------------------
With the Trigger field you can have any other field configured as a
trigger to open a colorbox. You can also display a limited amount of
content/pictures and let the colorbox show all instead.

This is an examlpe how to get one image displayed as trigger to open
a colorbox with all the images.

You need 3 total fields, in this order:
 * Image field as the trigger
   - set format to colorbox
   - select your desired node image style (example: thumbnail)
   - set the colorbox image style (example: large)
   - Exclude from display
   - Configure the amount of displaying images in the "Group Multiple
     Values" (Example: Show 1 starting from 0)

 * Image field which is used to complement the colorbox images
   - set format to colorbox
   - select Hide (do not display image)
   - set the colorbox image style (example: large)
   - Exclude from display
   - Configure the amount of displaying images in the "Group Multiple
     Values" (Example: Show ALL starting from 1)

 * Colorbox Trigger field which will connect the two fields and display it
   - set Trigger-field to the first image field (the trigger)
   - enter the field token of the second image field into the "popup" field
     (example: [field_images_1])

What I am also thinking of is a feature which would enable this behaviour on a field level, instead using views. But I think this should be opened as a feature request (of not yet possible). And yes there are also other issues related to this feature. We should try to connect them.

you should start with what can be achieved using your description. right now the headline and first paragraph is too technical.

Hmm I documented related to the README file, so the title was already given in there...
Currently it says:

Use the Views Colorbox Trigger field:
------------------------------------
TODO

Is this meant to be added somewhere else ? My suggestion to make it less technical would be then:

Limit amount of images linking to Colorbox:
------------------------------------
The goal is to display 1 image linking to a Colorbox which will contain
all images.

....

better ? :)

ah. misunderstood where you wanted to put the text. then maybe you could create a patch

Is there also a other place where documentations of Colorbox are available ?

Here is the patch, changed it again a bit, to have both technical and none technical in it.

Optimizations are any time welcome ;)

Not work... I have followed step by step, but not work... i have colorbox 1.3, but not work... i hqave 3 field, the first is a field preview, only one image, it's my trigger, i hace an other field it's my popup, the field contain 5 images, and the field trigger colorbox... but not work... all images displaying in the popup, not agrouping by gallery...

Hello Cesabal,

Try changing your Colorbox Settings to Per Post Gallery instead of Per Field Gallery.

Travus, coiuld ypu review the patch

I would word the instructions a little differently personally to make them more clear, more like the instructions I included in #3. Granted, I haven't had to do this with only a few images from a gallery and I can't think of a reason that I would only want to load a gallery with a couple of the images to begin with. In this case, if possible, I'd suggest creating another partial gallery node.

Here were my previous instructions
-------------------------------

You need 3 total fields, in this order:

• Image Field (this is the trigger, so usually set to a colorbox - galleryformatter thumbnail imagecache, or
  some other small colorbox image cache) Exclude from display
• Image Field (this is the pop up, should have a larger colorbox imagecache) Exclude from display
• Colorbox Trigger (set trigger to first image field, set popup token to the second image field.

Now the key is:

• The first image field, make sure you check Group Multiple Values, and enter Show 1 and starting from 0
• Now the second field set to Show "leave blank" and starting from 1

You should also make sure you Colorbox setting are right as well under Site Configuration > Colorbox.

• Image field options (CCK) - Set to Per field gallery
• Extra settings - make sure Enable Colorbox load is set.

#5 works for me, thanks!!!

I think that the process of creating / merging multiple fields is a bit onerous in order to achieve this behavior. In D6 the lightbox2 module provided this functionality in the form of the "condensed" slideshow option. When using condensed, only the first img is output to the browser. Additional a tags are output for the additional slides with appropriate href, rel, and class attributes, but in those a tags 2 - n the img is not included, so the a tags are just empty and effectively invisible. Clicking the first image still initiates the full slideshow, but additional trigger images after the first are not displayed in the browser. If I get a chance I will try to put together a patch for this.

Finally! Got it, thank you for the solution and the documentation!

Followed #3 didnt work until I used the formatting from #5 (the key is to have the trigger field set format to colorbox and also the target field format set to colorbox as well).
Just thought I'd pass this on also.

how can i hide the triggerfield when the colorboxpopup shows?
I've set the Group Multiple Values like it's mentioned.

Does anyone know how I can replace the first Image Field (thumbnail) that acts as a trigger with a text link instead?
When I try rewriting the results with text or subbing with a hidden text field, the markup generated does not show the first image because the multiple field settings cannot be used, and the colorbox instead shows all images on the page despite proper image grouping settings.
I'm trying to use CSS/JavaScript to replace the image with the desired text link on the theme side but any css classes I assign to the field through views do not show up in the markup.
Anyone come across this situation and found a solution?

Image description for above comment:

After some trial and error #5 combined with #11 worked for me. Note the "Per Post Gallery" setting is applied to both image fields.

Tip: using the Block Reference module, you can output a Views block in your content.

I'm very new to Drupal and just managed to set up jcarousel + colorbox using a view following #11 and other threads, but I included 4 fields (I also want the caption to show full html so added a field "body")

However, there is no way I can display the full html body. I have colorbox node module also installed. It only displays the full html caption if I use it on the first field (the thumbnail) using the replacement pattern [node:body] But that is not where I need it. I want it to show right beside the original image on the overlay.

Also, whether I leave the pop-up and caption fields on the trigger empty or use the replacement patterns, that doesn't make any difference either.
I looked at the images settings and colorbox settings and apparently everything is fine.

Here is the page I'm working on http://disegno.sytes.net/marti/?q=node/21

Any help would be greatly appreciated.
Thanks!

I had the hardest time with this as well.

For some reason, for the second ImageField (the one with the gallery images), I could not use "ALL" or BLANK for the number of values in the "Multiple Field Settings".

If I use a high number like 1000 it works though.

Hi.
My trigger image appears in colorbox popup...
How do i prevent this?

I had 2 diferent field, one for trigger one for images gallery.

#5 works..

Thanks to Cyclodex. You have saved my hours of struggling.

Others, follow his procedures point by point, even the numbers...

#5 works for me too with one exception. If the Gallery only has one image the trigger disappears.

This is because the second image field is set to start at the second image.

To get round this I added in a third image field, excluded from view, set to show all results in a single row but just show number 0 (the first image)

I used this is as the 'no results' rewriting field in the second image field (the one that pops up)

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

Integration 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.

#27 Is a great solution that works with either 1 or multiple images. Thanks a lot.

So the order should be:

1. Fallback Image, Formatter Image, Multiple Field Settings: Display all Starting from 0
2. Trigger Image, Formatter Colorbox, Per Post Gallery, Multiple Image Settings: Display 1 value starting from 0.
3. Gallery Images, Formatter Colorbox, Per Post Gallery, Multiple Image Settings: Display all values starting from 1. No Results Behaviour:[FALLBACK_IMAGE]
4. Colorbox Trigger, Trigger Field: Trigger Image, Popup: Gallery Images

#28 it worked for me well ! Thanks.

There is a great solution at https://www.drupal.org/project/colorbox/issues/1026112#comment-10736258 (comment #50). It doesn't require multiple fields or css, and it works with d8 as well.