Will flexslider support colorbox for original image view in the future?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

controla’s picture

not the best or most elegant solution, but it somehow works:

I'm building the flexslider through views slideshow though it's provided plugin, with image fields using colorbox display, all this gets carried to the node through an EVA (Entity Views Attachment) views display, the view uses the node id contextual filter (argument).... it works, but colorbox js doesn't play well with the rel attribute of the link (Uncaught TypeError: Cannot read property 'rel' of undefined), so I've disabled the slideshow in colorbox, just working with single images.

you can see it here: http://cpuin.resist.cl/es/ci01/crematorio-en-valencia

hope we get native colorbox support soon. :)

JohnnyX’s picture

With views_slideshow und flexslider also colorbox works fine, but the slider isn't "flex" any more *g*
The border adjusts, but without the image within... So it not works how it should be.

Maybe any configuration issue with my view?

Format slideshow type flexslider. At the selected image field used slideshow.

minorOffense’s picture

Status: Active » Needs work

Not sure if this is going to work. Flex Slider is predicated on very simple markup. Any additions that Colorbox makes may break the slide show.

Maybe the Flex Slider 2 library might be better suited. I'm not sure, I haven't had a chance to look at it yet.

But I'll keep this in mind and do some basic testing. If you come across a good solution please post it here.

minorOffense’s picture

Version: 7.x-1.x-dev » 7.x-2.x-dev
Status: Needs work » Postponed

We'll see what's possible in the new API. I see they can embed video in the slideshow. Maybe we can get a lightbox of some sort in there (or at least create the proper theme functions to allow those modules to build integration with FlexSlider).

JohnnyX’s picture

Thanks! :)

zikaelismik’s picture

Tried solution in #1 and it works like a charm to me. Even with slideshow support from colorbox.

das-peter’s picture

Status: Postponed » Needs review
FileSize
15.3 KB

I've extended the existing colorbox integration to support the flexslider picture integration as well.

das-peter’s picture

Status: Needs review » Postponed

Damn, wrong issue queue :D Will move that to the picture module ;)
Crosslink: #1881898-11: Colorbox support

theshanergy’s picture

I decided to do this in a theme override, rather than installing a new module. It seems to work quite well, for my needs.

Basically all I did was replace the call to theme_image_style() with theme_colorbox_imagefield. This method assumes a fixed image style preset (for the colorbox), and will only work when no alternate slide content is passed (ie. for regular image fields). Of course this won't let you customize on a per flexslider instance, it will be site-wide.

/**
 * Overriding flexslider_list theme implementation to output colorbox enabled images
 */
function deckfifty_flexslider_list(&$vars) {
  // Reference configuration variables
  $optionset = &$vars['settings']['optionset'];
  $items = &$vars['items'];
  $attributes = &$vars['settings']['attributes'];
  $type = &$vars['settings']['type'];
  $output = '';

  // Build the list
  if (!empty($items)) {
    $output .= "<$type" . drupal_attributes($attributes) . '>';
    foreach ($items as $i => $item) {
      // If the slide hasn't been set, build the slide using the image
      // attributes given (assumes we're using a multi-image field)
      // @todo need to allow for different types of field and collection fields
      if (!isset($item['slide'])) {
        $image_options = array(
          'style_name' => $optionset->imagestyle_normal,
          'path'       => $item['uri'],
          'height'     => $item['height'],
          'width'      => $item['width'],
          'alt'        => $item['alt'],
          'title'      => $item['title'],
        );

        // Build path to colorbox image style. Replace 'colorbox' with your image style name.
        $colorbox_path = image_style_url('colorbox', $item['uri']);
        
      }

      $caption = '';
      if (!empty($item['title'])) {
        $caption = $item['title'];
      }
      $output .= theme('flexslider_list_item', array(
        // Call theme_colorbox_imagefield if no slide content given
        'item' => isset($item['slide']) ? $item['slide'] : theme('colorbox_imagefield', array('image' => $image_options, 'path' => $colorbox_path)),
        'thumb' => isset($item['thumb']) ? $item['thumb'] : image_style_url($optionset->imagestyle_thumbnail, $item['uri']),
        'optionset' => $optionset,
        'caption' => $caption,
      ));
    }
    $output .= "</$type>";
  }

  return $output;
}
audriusb’s picture

updated deckfifty version to work with flex slider 2.0-alpha3

/**
 * Overriding flexslider_list theme implementation to output colorbox enabled images
 */
function mymodule_flexslider_list(&$vars) {
  // Reference configuration variables
  $optionset = &$vars['settings']['optionset'];
  $items = &$vars['items'];
  $attributes = &$vars['settings']['attributes'];
  $type = &$vars['settings']['type'];
  $output = '';
  $group = $optionset->title;

  // Build the list
  if (!empty($items)) {
    $output .= "<$type" . drupal_attributes($attributes) . '>';
    foreach ($items as $i => $item) {

      $caption = '';
      if (!empty($item['caption'])) {
        $caption = $item['caption'];
      }

      // Build path to colorbox image style. Replace 'colorbox' with your image style name.
      $colorbox_path = image_style_url('original', $item['item']['uri']);
      
      $image_options = array(
        'style_name' => $optionset->imagestyle_normal,
        'path'       => $item['item']['uri'],
        'height'     => $item['item']['height'],
        'width'      => $item['item']['width'],
        'alt'        => $item['item']['alt'],
        'title'      => $item['item']['title'],
      );
      
      $item['slide'] = theme('colorbox_imagefield', array('image' => $image_options, 'path' => $colorbox_path, 'title' => $caption, 'gid' => array('rel' => $group)));

      $output .= theme('flexslider_list_item', array(
        'item' => $item['slide'],
        'settings' => array(
          'optionset' => $optionset,
        ),
        'caption' => $caption,
      ));
    }
    $output .= "</$type>";
  }

  return $output;
}

This code includes image grouping. If you like to have different groups on different sliders in a same page, you have to make flexslider option sets different in content type's those image fields display.

To remove grouping, change
$item['slide'] = theme('colorbox_imagefield', array('image' => $image_options, 'path' => $colorbox_path, 'title' => $caption, 'gid' => array('rel' => $group)));
to
$item['slide'] = theme('colorbox_imagefield', array('image' => $image_options, 'path' => $colorbox_path, 'title' => $caption));

swortis’s picture

Sorry for being a dunce but I don't get "Build path to colorbox image style. Replace 'colorbox' with your image style name."

This is in: $item['slide'] = theme('colorbox_imagefield', array(... ?

jeffschuler’s picture

#10 worked well for me!

@swortis: the author of the example in #10 already replaced colorbox from the example in #9 with original. So, you'll want to replace original, instead, on the line:
$colorbox_path = image_style_url('original', $item['item']['uri']);

Also, the function is a theme override, so I named it mytheme_flexslider_list instead of mymodule_... (as in #10) and put it in template.php.

swortis’s picture

@jeffschuler: thanks the info. Unfortunatly not working. I replaced 'original' with an image style I have on the site ('extra-large') but get an "This image failed to load" error.

That line reads: $colorbox_path = image_style_url('extra-large', $item['item']['uri']);

jeffschuler’s picture

@swortis: does it work with 'original'? Maybe it should be 'extra_large'? Sure about the machine-name?

samerjh’s picture

#10 -Works for me, thanks to Audruusb-
But you have to replace "Original" In $colorbox_path = image_style_url('original', $item['item']['uri']); with a pre defined style (using original will not show you the original image, unless you define new style called original making no change to it). Also don't forget to use (Your theme name) instead of mymodule in function mymodule_flexslider_list(&$vars)

putting this in template.php, clearing the cache worked for me.

It will be great if this can be integrated with flexslider module itself

Thanks

swortis’s picture

I changed the image style to both 'extra_large' and 'extralarge' but to no avail. However using 'flexslider_full' does work. I realize this makes little sense..

minorOffense’s picture

The image styles in the optionset have no affect on the image. Only the settings in Views or the fields manage display can change the style.

I'm removing the images styles from the option set.

samerjh’s picture

Issue summary: View changes

#10 was working fine with me, but when the server php version was upgraded to PHP 5.4.25. it doesn't work now.

any advice

Thank you

audriusb’s picture

try removing & symbol from following lines:

$optionset = &$vars['settings']['optionset'];
$items = &$vars['items'];
$attributes = &$vars['settings']['attributes'];
$type = &$vars['settings']['type'];

not tested but might work

ron_s’s picture

Thank you to deckfifty and audriusb! The code in #10 definitely met the need for us.

philsward’s picture

Programing noob so I have no idea how to fix:

Notice: Undefined property: stdClass::$imagestyle_normal

Doing some digging, it appears that nothing is being set? The code from #9 has if(!isset... where the code from #10 does not:

      if (!isset($item['slide'])) {
        $image_options = array(
          'style_name' => $optionset->imagestyle_normal,
          'path'       => $item['uri'],
          'height'     => $item['height'],
          'width'      => $item['width'],
          'alt'        => $item['alt'],
          'title'      => $item['title'],
        );


        // Build path to colorbox image style. Replace 'colorbox' with your image style name.
        $colorbox_path = image_style_url('colorbox', $item['uri']);
        
      }

Saw something else about "property_exists" as an alternative to isset but I'm clueless in this area... If I add the !isset code, colorbox works but the styles do not. Flexslider also appears to work properly, but the image styling is all kinds of messed up. Any help on this would be awesome!

pikot’s picture

#10 Also worked for me, thank you very much!

agileadam’s picture

Thanks audriusb and deckfifty!

For those looking to use the "original" image without having to create another image style, use this:

$colorbox_path = file_create_url($item['item']['uri']);
dazz.seemeonline’s picture

#10 Also worked for me, but is it possible use the function only for a specific option set?

ron_s’s picture

Of course it is. Just wrap the code in a conditional. One way to do it would be something like...

if ($_GET['q'] == 'node/274') {
....
}

This says to only run the adjustment on page of node 274. But there are many other ways this could be done.

dazz.seemeonline’s picture

Thanks ron_s, that makes sense!

philsward’s picture

#10 never worked for me...

My comment in #21 was never addressed, and 2 years later, I still had the same problem on another site. Figured out a solution though and made it easier to deal with the image style in the process.

// Replace yourmodule with your themes machine name
function yourmodule_flexslider_list(&$vars) {
  // Reference configuration variables
  $optionset = &$vars['settings']['optionset'];
  $items = &$vars['items'];
  $attributes = &$vars['settings']['attributes'];
  $type = &$vars['settings']['type'];
  $output = '';
  $group = $optionset->title;

  // Build the list
  if (!empty($items)) {
    $output .= "<$type" . drupal_attributes($attributes) . '>';
    foreach ($items as $i => $item) {

      $caption = '';
      if (!empty($item['caption'])) {
        $caption = $item['caption'];
      }

      // Build path to colorbox image style. Replace 'colorbox' in "$flexcolor_imagestyle" below, with your image style name.

      $flexcolor_imagestyle = 'colorbox';

      $colorbox_path = image_style_url($flexcolor_imagestyle, $item['item']['uri']);

      $image_options = array(
        'style_name' => $optionset->imagestyle_normal = $flexcolor_imagestyle,
        'path'       => $item['item']['uri'],
        'height'     => $item['item']['height'],
        'width'      => $item['item']['width'],
        'alt'        => $item['item']['alt'],
        'title'      => $item['item']['title'],
      );

      $item['slide'] = theme('colorbox_imagefield', array('image' => $image_options, 'path' => $colorbox_path, 'title' => $caption, 'gid' => array('rel' => $group)));

      $output .= theme('flexslider_list_item', array(
        'item' => $item['slide'],
        'settings' => array(
          'optionset' => $optionset,
        ),
        'caption' => $caption,
      ));
    }
    $output .= "</$type>";
  }

  return $output;
}
mandus.cz’s picture

Thanks, it works, but it has broken the paths to images in flexslider views.
The solution is to set only a certain optionet (which is not used in views):

// Replace yourmodule with your themes machine name
function yourmodule_flexslider_list(&$vars) {
  // Reference configuration variables
  $optionset = &$vars['settings']['optionset'];
  $items = &$vars['items'];
  $attributes = &$vars['settings']['attributes'];
  $type = &$vars['settings']['type'];
  $output = '';
  $group = $optionset->title;

  // Build the list
  if (!empty($items)) {
    $output .= "<$type" . drupal_attributes($attributes) . '>';
    foreach ($items as $i => $item) {

      $caption = '';
      if (!empty($item['caption'])) {
        $caption = $item['caption'];
      }
      if ($optionset->title == "SPECIFIC_FLEXSLIDER_OPTIONSET") {
      // Build path to colorbox image style. Replace 'colorbox' in "$flexcolor_imagestyle" below, with your image style name.

      $flexcolor_imagestyle = 'colorbox';

      $colorbox_path = image_style_url($flexcolor_imagestyle, $item['item']['uri']);

      $image_options = array(
        'style_name' => $optionset->imagestyle_normal = $flexcolor_imagestyle,
        'path'       => $item['item']['uri'],
        'height'     => $item['item']['height'],
        'width'      => $item['item']['width'],
        'alt'        => $item['item']['alt'],
        'title'      => $item['item']['title'],
      );

      $item['slide'] = theme('colorbox_imagefield', array('image' => $image_options, 'path' => $colorbox_path, 'title' => $caption, 'gid' => array('rel' => $group)));
      }
      $output .= theme('flexslider_list_item', array(
        'item' => $item['slide'],
        'settings' => array(
          'optionset' => $optionset,
        ),
        'caption' => $caption,
      ));
    }
    $output .= "</$type>";
  }

  return $output;
}
vibrasphere’s picture

Status: Postponed » Needs work

Can confirm #28 works for specific custom optionsets.

Scenario:
1. Homepage has a views flexslider that does not need colorbox.
2. Random flexslider_fields galleries throughout the website's other pages that needs colorbox.
3. Both sliders use different optionsets.
4. Use #28 code, paste it into your theme's template.php replace 'yourmodule' with your theme name (dir name).
5. Replace 'colorbox' in $flexcolor_imagestyle = 'colorbox'; with your image style, e.g. flexslider_full works.
6. Flush caches.

Everything works.

Initially #10 and #11 works, but dblog is being spammed with errors. #27 solves that, but does not solve the multiple optionset issue which is solved by #28.

Thank you very much @mandus.cz

Maybe someone can commit a working patch, thank you.