Possible to display a single image, then click to bring up Colorbox slideshow?

You will need to hide the extra images with CSS (display: none;). A tip is to make a 1x1 pixel image style for these extra images so they will load fast.

"You will need to hide the extra images with CSS (display: none;)."

Hi guys, help appreciated, bad coding skills here!

What css file?? colorbox_default_style?? in what line??

Thanks in advance.

Nuno

nunob, the best place to add the CSS is in your theme.

I'm in the same boat as the OP. While I can go an add a second image field to get this working, I'm not sure how that really helps. Furthermore, my content publishers (who are non technical, really) have to understand where to upload what, multiple times.

Can we not patch colorbox to emit correct HTML for this, or maybe have it generate better css classes so we can have a single image field?

This is especially important if multiple galleries appear on the same node as we can't just group all images on the page.

Or maybe I am missing the explanation, but looking at firebug I can't see any way to put display:none on all the images but the first one.

S

In D6 I commonly used Views attach to build this kind of functionality (see my blog post http://xdeb.org/node/1303).

http://drupal.org/project/views_attach

Another interesting project is Imagefield multiformat

http://drupal.org/project/imagefield_multiformat

These projects are not D7 ready yet but with time they most likely will be, or other similar solutions will be developed.

I believe that using tools like these is much better than building an solution into the Colorbox module. It's the Drupal way, many solid building blocks that you can combine to build very flexible solutions.

Actually it is bad idea to hide from CSS.

This functionality should be in Colorbox, so we can show all images.

Yes, is there a way to just show one image from an imagefield, with all of them loaded in Colorbox? I don't want to use CSS because there could be 2-30 images per node. The display options in Colorbox don't change anything for me here.

See patch in http://drupal.org/node/1233194

(As a module maintainer, I know it's annoying to re-open an issue marked as a "dup", but I don't think that the patch referenced above actually closes this issue.)

Below is a total hack of a theme override to hide all but the first image in a multi-value image field. It checks the position of an image value and then adds the "hide" class to all but the image with position 0. While a hack, I like this approach better than display:none b/c it doesn't load all the images. Moreover, the only way that I found to apply display:none on all but the first field was to add a field.tpl.php template to add the class based upon a delta value - which also seemed hacky.

If something like this works - I could see it being added as an additional option on the field settings page without too much extra work.

function YOURTHEME_colorbox_image_formatter($variables) {
  $item = $variables['item'];
  $node = $variables['node'];
  $field = $variables['field'];
  $settings = $variables['display_settings'];

  // Adding an ugly hack to get the position of each image field instance.
  // Check uri of image against the image field in the node object to add a image field position value.
  $image_collection = $node->$field['field_name'];
  if (!empty($image_collection)) {
    $image_fields = $image_collection[LANGUAGE_NONE];
    foreach($image_fields as $key => $image_field) {
      if ($image_field['uri'] == $item['uri']) {
        $image_position = $key;
      }
    }
  }
  
  // Apply "hide" style to all but first image.
  if ($image_position == '0') {
    $style_name = $settings['colorbox_node_style'];
  }
  else {
    $style_name = 'hide';
  };

  $image = array(
    'path' => $item['uri'],
    'alt' => $item['alt'],
    'title' => $item['title'],
    'style_name' => $style_name,
  );

  if (isset($item['width']) && isset($item['height'])) {
    $image['width'] = $item['width'];
    $image['height'] = $item['height'];
  }

  switch ($settings['colorbox_caption']) {
     case 'auto':
      // If the title is empty use alt or the node title in that order.
      if (!empty($image['title'])) {
        $caption = $image['title'];
      }
      elseif (!empty($image['alt'])) {
        $caption = $image['alt'];
      }
      elseif (!empty($node->title)) {
        $caption = $node->title;
      }
      else {
        $caption = '';
      }
      break;
    case 'title':
      $caption = $image['title'];
      break;
    case 'alt':
      $caption = $image['alt'];
      break;
    case 'node_title':
      $caption = $node->title;
      break;
    default:
      $caption = '';
  }

  // Shorten the caption for the example styles or when caption shortening is active.
  $colorbox_style = variable_get('colorbox_style', 'default');
  $trim_length = variable_get('colorbox_caption_trim_length', 75);
  if (((strpos($colorbox_style, 'colorbox/example') !== FALSE) || variable_get('colorbox_caption_trim', 0)) && (drupal_strlen($caption) > $trim_length)) {
    $caption = drupal_substr($caption, 0, $trim_length - 5) . '...';
  }

  // Build the gallery id.
  $nid = !empty($node->nid) ? $node->nid : 'nid';
  switch ($settings['colorbox_gallery']) {
    case 'post':
      $gallery_id = 'gallery-' . $nid;
      break;
    case 'page':
      $gallery_id = 'gallery-all';
      break;
    case 'field_post':
      $gallery_id = 'gallery-' . $nid . '-' . $field['field_name'];
      break;
    case 'field_page':
      $gallery_id = 'gallery-' . $field['field_name'];
      break;
    case 'custom':
      $gallery_id = $settings['colorbox_gallery_custom'];
      break;
    default:
      $gallery_id = '';
  }

  if ($style_name = $settings['colorbox_image_style']) {
    $path = image_style_url($style_name, $image['path']);
  }
  else {
    $path = file_create_url($image['path']);
  }

  return theme('colorbox_imagefield', array('image' => $image, 'path' => $path, 'title' => $caption, 'gid' => $gallery_id));
}

@seanberto

How do I get this working, is it added to template.php? What parts of the code above do I have to change to make it work with my own specific gallery?

Thanks

@ seanberto
Thanks for this code. Works great if this multivalue field is in a node.
But I try to display a block, this block is a viewe showing only if a specific content-type is open in the main area.
And in this block I'm not able to configure colorbox so that only the first image is showing up.

Any idea how to solve this?

@Stoltoguzzi, sorry, I don't know specifically how to handle your use case. @Tony, yes, add this to template.php, replacing the YOURTHEME with the name of your theme.

@seanberto: Thanks a lot for your code! It works like a charm! You solved my problem with it.

This code snippet works really well..

I was looking for a way to display ONE main image, linking to the colorbox gallery of all the images in the field, which this does very well.

However, it completely overwrites the image formatter and anywhere you've used colorbox as the display format, now only displays the one image. Is it possible to have 2 seperate formatters instead, so the default colorbox functionality is retained?

What I was really hoping for was to be able to have a thumbnail, which opens colorbox but displays in a 'galleryformatter' type fashion (with thumbnails underneath etc). Can anyone shed some light on this?

I would also really (really, really) appreciate this feature. I switched from shadowbox which has a Compact checkbox in the field display format settings -- perhaps colorbox could do the same?

Thanks for the template.php snippet. I will try this approach as a workaround.

I did this straight threw Views using AJAX (images aren't loaded as they are with display:none until colorbox is opened).

Here's the example:
https://nattosoup.com/selected-works

Simplified process:

1. Create View which displays fields.
2. Add image which supports multiple values to gallery and set it to display all images and to use a Colorbox. Exclude it from display. Rewrite the results->set to exclude all tags except the < a > tag.
3. Add same image which supports multiple values but set it to only display the first image and not to use colorbox. Exclude it from the display.
4. Add a global custom field using your replacement patterns to include both fields surrounded by a wrapper div.
5. Add Javascript to set the wrapper field to call act as though the anchor tag in the wrapperis clicked (I automatically got this functionality from the captioning system I was using)

Please PM me if you need assistance as I spent 3 hours on this and would like to prevent someone else from taking that time. And yes, I could have done this through templates MUCH faster, but now I can do it through views faster than templates :).

I was able to accomplish this pretty easily with a view pane and display suite.

1. Create a new view. I'm using a view pane but this could work with a block. I called mine header_img_colorbox. Set up the following settings:
Format:Unformatted list, Show:Fields, in fields add your image field.
Select colorbox as the formatter. Pick what style you want for Content image style. (If you wanted to render some thumbnails you would set it here - @enap) I'm using 'Hide (do not display image)' which is a new option in the latest colorbox dev. Set all the other colorbox settings and scroll down to 'Multiple field settings' open that fieldset, check 'Display all values in the same row'. I'm using 'Simple separator' for 'Display type' with nothing inside the Separator field since i'm not rendering anything. Set 'starting from' to 1. Now add 'Content: Nid' as a Contextual filters. Set 'Provide default value' and select 'Content ID from URL'. I also set up 'Filter criteria' for my content types that have the image field. Lastly make sure the pager is set to 'Display all items'. Add whatever else you need to the view and save it.

2. Navigate to the 'manage display' page for the content type that has the image field. Mine was the page content type /admin/structure/types/manage/page/display/full
Scroll down click on 'custom fields' and select 'Add a dynamic field'. Fill the needed info out and hit save. Move the new field from the disabled area to a region. Click on the Cog wheel to bring up the settings. Click on 'Edit content' navigate to the views panes or views and attach the pane or block you made in views.

Now all that is rendered is the links so no need to use display:none

Thats pretty much it. I was already using those modules for other things so it worked out. If anyone has any questions find me on IRC.

Lightbox has this functionality solved, maybe code copy from there could be used?

@seanberto You reopened this issue. Do you have a patch that can solve this? Or is it a dupe of #1233194: Colorbox configuration and formatter settings improvement

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.

I cannot seem to get this to work with a trigger as a separate image field (that then adds itself to the gallery).

I had to set up the content type to have a trigger image field in order to get the thumbnail/popup gallery Colorbox behavior on a node itself.

In Views, I cannot seem to get this separate trigger field to trigger Colorbox and add itself to the slideshow, even with a custom gallery setting. It throws blank slides and is buggy. What am I missing?

Also: @TravisJohnston, your comment was really helpful. Though in D7/Views3, the multiple field settings are a little different. I can only get it to work properly if the second image field settings start multiples start at 0, not 1. But thank you so much! I wouldn't have pulled it off at all without your helpful comment.

I'm having the same issue. This is what I want to be able to do:

Attach multiple images to a Node, have them hidden, then insert one or more images into the content. And when the initial image is clicked, start the slideshow.

I think this is more of an Colorbox feature than Drupal. I can either have group by "Per Post Gallery" which only works if the gallery is visible, or use "Per Page Gallery", but then I get duplicates in the slideshow.

Either I need to hack colorbox.js to detect duplicates, or the plugin so I can link to the gallery from the inserted image.

J.

No hacking needed.

My instructions in #27 is referencing the view level, not the node. What I mean by that is in your node/content type you have 1 image field. Since its a gallery you have it set to Unlimited so ppl can upload more than one photo. Now that its done we can move onto the view.

I have GalleryFormatter and Colorbox, which I highly recommend to have these two enabled and working

So create your fields in the View. Note that both Image Fields are the exact same field that you are grabbing from your Node. Just include them twice, set one to a thumbnail and the other to the full image (both should be valid Colorbox ImageCache options). Make sure to also set up the grouping setting as explained in #27.

One thing to be aware of is to not get this confused with Views Slideshow. Using that will break this if you decided to add more than one gallery to a page. Just keep in Unformatted.

And also make sure to configure the Colorbox setting as well to make sure it works.

I'm still confused, this is what I do:

Check: I have both Colorbox and Gallery Formatter loaded.
Colorbox config only shows me "Per page gallery" and "No gallery" in "Insert module settings" admin/config/media/colorbox, checked "Enable Colorbox load".

Image styles has galleryformatter_slide and galleryformattter_thumb styles already.

Now I add 3 fields to my "Story" Content Type for testing.
1. ImageTrigger (Image)
2. ImagePopup (Image)
3. ColorboxTrigger (Image, I assume. I don't see a "Colorbox Trigger" fieldtype, maybe I'm missing something from Colorbox configuration?)

-The first image field, make sure you check Group Multiple Values, and enter Show 1 and starting from 0

Here is where I'm stuck. I can't find "Group Multiple Values", "Show 1" or "starting from 0". Is this supposed to be under "Manage Display"?

Still utterly confused, are you talking about creating a special View for my node type?

I believe he is referring to a View configuration, not a View Mode (two different things).

You may also want to check out Field Multiple Limit, if you are trying to go the View Mode route.

This is my final solution:

1. Hide the Image field
2. Use Custom gallery for image grouping
3. Insert small jquery snippet on page.tpl.php:

$(document).ready(function(){
	var $gallery = $("a[rel=customgallery]").colorbox();
	$('.field-name-body a.colorbox').click(function(e){
	  e.preventDefault();
	  $gallery.eq(0).click();
	  e.stopPropagation();
	});
});

You should insert that with drupal_add_js in the theme either inline or a Drupal.behaviors for content types containing colorbox.

@jonr,

My instructions are for creating a View using the Views Module and making a block or page.

You shouldn't need any custom code to get this to work. As my last post, make sure not to get Content Type confused with Views when it comes to those image fields. You only need ONE image field in the Content Type for this to work.

Then in your Views (Site Building > Views) you would make a block with 3 fields. The first 2 fields are the same exact field, only with some minor changes to the sizing and grouping. You will see the settings I describe in my instructions.

@TravisJohnston — Thank you!! Your instructions helped me with a unique problem I had.

I had a page that would have had several sets of images (at this point, ten). Each set of images had probably 10 images within it. I now just show a thumbnail of the first set. Then, they cycle through the rest of the images with Colorbox.

For those who are still having trouble, I created a view with a block. Like Travis said, it has three fields. The image field twice, then the Colorbox trigger field. Thanks again!

I also finally got this to work thanks to @TravisJohnston. My setup works in a Content Type and in Views. In case anyone finds this helpful, I'll document what I did.

Because I wanted this same single image/Colorbox slideshow behavior in both a Content Type, and in a View of that Content type, I set up a separate trigger image field in the Content Type (@TravisJohnston, you know a way to do this with one field in the Content Type? I couldn't figure out how to get one trigger image and not all images to display without making two fields; maybe you can explain how you did that). So my Views setup is a little different from @TravisJohnston's as a result. The concepts are the same, though. In @TravisJohnston's example, he's loading the same image field twice. The first, he uses multiple field settings to only load the first image to serve as the trigger, and then loads the rest of the images after value 0 in the second field, and implements it all in the third field. So, it can work either way. Anyway... here's what I did:

Content Type:
* Trigger image - single image: This holds the first image in the slideshow/lightbox; It's set in Display Fields to use the Colorbox formatter:
Node image style: thumbnail
Colorbox image style: ps_slideshow
Colorbox gallery type: Custom (custom_name)
Colorbox caption: Automatic

* Slideshow image field: This holds the rest of the images; Colorbox formatter:
Node image style: Hide
Colorbox image style: large
Colorbox gallery type: Custom (custom_name)
Colorbox caption: Title text

Views: As @TravisJohnston explains, this requires 3 fields in Views. The first two need to come first and are excluded from the View; their job is to load the images that get output via the third field.

1. Load Trigger Image: Exclude from display, Colorbox formatter, node image style thumbnail, Colorbox image style large, custom gallery

2. Load Slide Images: Exclude from display, Colorbox formatter, node image style hidden, Colorbox image style large, custom gallery with same name as 1st image

3. Colorbox Trigger Field (this is a special field that Colorbox makes available to be added to a View): This is where the magic happens. This field is displayed. The trigger image is set as the trigger. In the "Popup" box, put the token for your multi-image field (for me, #2 above).

Blammo. Single image that clicks up to a slideshow.

Custom Theming: For the site I was working on, the default colorbox style was *almost* right, but not quite. I followed the instructions in the Colorbox readme file and copied the "default" style folder over to my theme, and then set the Colorbox style to "None", and then Colorbox used the style in my theme instead. I was able to Tweak the jQuery and CSS directly that way. It's working great. (If I remember to link to the live example after launch, I'll try to do that.)

@hanpersand Thanks for providing further direction on this. Note that the Trigger Image Field is not required in the Content Type unless you want complete control over what image that will be. For instance if you want your trigger image to be a completely different image than whats in the gallery.

Otherwise you can just have one field, and in the View, your first excluded field would be the image field and by using the Group options, you can show just the first image so this acts as the trigger.

Yes @TravisJohnston, you don't need a separate image field as a trigger field in Views, because you can use Views to control what of the multiples in the field are loaded and where. I totally got that. But so far, to make this setup work in a node itself (not using Views at all), I think two image fields are required. I couldn't see a way to display a single image on the node itself (we're talking using the "Display Fields" tab in the content type config) as a trigger. There's no way to exclude the other images that are in the multiple-image slideshow field, ya know?

Again, I will try to link to my live example. It should launch in a couple days. It's a upgrade/rebuild from D6, where Lightbox had been used. It seemed like it had been much easier to do this in Lightbox.

And thank you again!

Launched this evening.
View: http://btu.org/whats-working/were-learning-here/current
Node: http://btu.org/whats-working/were-learning-here/new-teacher-institute-2012

hanpersand, thank you for your instructions, they really helped me set up multiple images within my node. I looked at your demos, and I have a question... the View Slideshow link you have on the first photo, is that a part of Colorbox, or is that something you themed yourself? I like it very much and would like to add it to my first image (where ever I am using multiple images.) Can you tell me how to do that?

@sioux, are you talking about the "View Slideshow" arrow overlay that says View Slideshow? That could be custom-themed, but when you're in a hurry and/or on a tight budget, it can be done with this module, and that's how we did it: http://drupal.org/project/imagecache_actions

Very easy. Good luck!

Thank you! It worked like a charm (and I learned something new!)

I was able to get it going using #27 except I had to place the thumbnail image field after the larger or it wouldn't work...

Thanks!

Does anyone have any updated instructions on how to configure this using Drupal 7?

#27 sounds like the perfect solution for my needs, but I've been fudging with the Views configuration for awhile and still can't get it to work correctly.

1) I have a content type with a single multiple-value image field and hide the output from Manage Display.
2) I created a Views block consisting of 2 duplicate image fields (thumbnail and full size respectively) and 1 Colorbox trigger.
3) I enabled "Group Multiple Values" for each image field and configure the first as "Display 1 value(s)
starting from 0 (first item is 0)" and "Display (blank) value(s) starting from 1 (first item is 0)" respectively.
4) I configured the Colorbox trigger field to use the first image field (exp. field_image) and the popup containing the token of the second image field (exp. [field_image_1]).
5) In addition, I added a Contextual filter to use the Content ID from URL. (This makes it easy to display the block on a node page.)

When browsing to a page containing the block, the first image thumbnail appears as expected. When clicking on the image Colorbox opens as expected containing the full size image, but the additional images are not accessible. In other words only the first image is shown, without any navigational controls to view the other images belonging to the same node.

Hey guys, I used jQuery instead of CSS. I rendered the images in a div with a class of .teaser-image and did the follow code.

$("div.teaser-image p a").hide().filter(":first-child").show();

Maybe that will help someone else.

I finally got this working correctly via my comment in this thread. FYI

I am trying to get a thumbnail image to launch a colorbox gallery of images from an image field with multiple images. I have followed all the steps from @bacteriaman and others. I can get as far as getting the thumb to launch a colorbox gallery of my multiple image field, but it always includes the thumbnail too. I don't want the thumbnail to appear in the gallery.

Has anyone figured this out? I have spent so many hours trying to get this to work.

Thank you @TravisJohnston for providing the views answer (#27) and @hanpersand for the node display (#37). Good stuff.

Answer (#27), but in this case other < img > are in code. So browser will loading them when loading page.

Solution:
For second field images, that contain all other images -
use "Strip HTML tags"
and
add "Preserve certain tags" - "<a>"

Trigger will work, but when loading whole page other images will not load, until Colorbox triggered.

Hi,

I managed to achieve results by just having one image field in my view with the following settings:

Formatter: Colorbox
Content image style: Hide (do not display image)
Content image style for first image: Thumbnail
Colorbox image style: None (original image)
Gallery (image grouping): Per post gallery

Under 'multiple field settings' I set it to display 'all', choosing Display type: 'Simple separator' and changing this from ', ' to ' '.

Hi Johanna

Thanks to your post (#50) I was able to fix this issue. This module should has a comment like yours in order to acomplish this.

Thanks again.

Thanks, Johanna, post (#50) fixed this for me... just a change on the options below:
Content image style: Hide
Content image style of first image: Property main image (custom image style)
Colorbox image style: Original image
Colorbox gallery type: Per post gallery

Hi, is all this functional for D8 as well?

@Ayran, it should be, but perhaps you can try and report your findings. :-)

#46 I also got this working correctly via comment #28 in the thread you refer.

Thanks.

Comment #50 is the ideal solution. No playing around with extra fields or css. This works in D8.

#50 I love you! Simple solution and exactly what i needed. Thank Johanna Wallther so much!

I tried to implement the #50 to implement on the display of a contentype. In first it did not work out because I clicked "update" in the field-settings but did not clicked "save" on the content-type.
So update the field-settings with colorbox settings of #50, and don't forget to "save" the changes you made on the field on the level of the content-type !