Hi

This is a good module, but it really lacks maintenance. That said, I have a request:

I personally think that colorbox is a bad lightbox alternative when it comes to customizing. Much better are fancybox and shadowbox, in my opinion. Now, I know that not everybody will agree with this, so I propose that we should make a dependency-like thing, just as WYSIWYG. This is an alternative text-editor which allows you to type as if it were in Word, but the beauty of it is that you can choose which editor you want to use (ex. tinyMCE)

Maybe we could have it like that: you install media gallery, but you can't use it until you have installed a lightbox (ex. lightbox, colorbox, shadowbox, fancybox) and then you can use that one, if possible with its own presets and features.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

beauz’s picture

Yeah Ive got a project where I'd like to use fancybox style themes, so this would be very handy.

NancyDru’s picture

Priority: Major » Normal
Status: Needs work » Active

There is no patch, so nothing to work on.

BramVanroy’s picture

I'm sorry, what do you mean by 'no patch'? Why would we need a patch?

NancyDru’s picture

A) "Needs work" means that a patch that was submitted had an issue and that needs to be addressed before it can be committed. Since there was no patch attached to the issue, there is nothing that "needs work," therefore the issue is "active."

B) The best way to get a contributed module "fixed" is to do so oneself, by submitting the code changes required (a patch), if one is capable of doing so. Module maintainers do not get paid for doing the work, which can be considerable. Having others help with the coding is what open source is all about. If one is not capable of making the change, then one should not become impatient that others don't share the same sense of priority.

Having tried this module with Colorbox, I share your desire to support other alternatives, since Colorbox doesn't work. However, I am not into javascript (or jQuery), so I am not currently capable of investigating the alternatives and coming up with a flexible way to interface with them. Until this module works with Colorbox, or any other alternative, I have to be patient and not install it on any live sites. That's a shame because this is, so far, the only reasonably viable looking gallery module for D7.

ergophobe’s picture

You can integrate with Lightbox2 quite easily.

I'm currently doing it with just a hack as I'm just playing around to see if this would work. This needs to be moved to the theme layer, but a simple hack to the module makes it Lightbox2-compatible.

If you add these two lines

  $attributes['rel'] = 'lightframe[gallery]';
  $link_path .= '/lightbox2';

at line 437 of media_gallery.theme.inc this will make the pages open in lightbox2.

In context it would look like:
<code>  $attributes['rel'] = 'lightframe[gallery]';
  $link_path .= '/lightbox2';
  // Create a link around the image
  $item .= empty($variables['no_link']) ? l($image, $link_path, array('html' => TRUE, 'attributes' => $attributes)) : $image;

This will open the node in an iframe.

The main issues with this are that
- with the iframe you don't get the lightbox resize functions, which is one of the main things I like about Lightbox2 over Colorbox.
- you have to strip out all the stuff you don't want and this is a bit of a hassle with the theme I'm using (an Omega subtheme) becuase you have to strip things out of zone--node.tpl.php, region--node.tpl.php, page.tpl.php and then still have to strip some stuff out of the $page variable... and I'm still not there yet. There must be a better way. For some reason I can't get it to recognize the page--node--lightbox2.tpl.php file (see #1232318). Not sure why that isn't working.

So that gets you most of the way there. I think you could create an onclick event that would rewrite the URL to add the '/lightbox2' only when a user clicks on it to differentiate between an actual click from a user (open in lightbox) and a spider (open the page)... even though Google does follow some Javascript now, it would be nice to have the descriptions indexed if it's a bot.

kyberman’s picture

If you like Fancybox, there is some fast but dirty solution:

Add this function to the template.php in your theme folder (replace YOUR_THEME with theme name):

/**
 * Override theme_media_gallery_item() - media_gallery/media_gallery.theme.inc
 */
function YOUR_THEME_media_gallery_item($variables) {
  $image = $variables['image'];
  $link_path = $variables['link_path'];
  $attributes = array();
  if (!empty($variables['classes'])) {
    $attributes['class'] = $variables['classes'];
  }
  if (!empty($variables['title'])) {
    $new_image = str_replace(array('title=""', 'alt=""'), array('', ''), $image);
    $image = str_replace('/>', ' title="'.$variables['title'].'" alt="'.$variables['title'].'" />', $new_image);;
  }

  // FANCYBOX HACK
  preg_match('/sites\/default\/files\/styles\/media_gallery_thumbnail\/public\/([^"]*)"/', $image, $matches);
  $link_path = 'sites/default/files/styles/media_gallery_large/public/' . $matches[1];
  $attributes['class'][1] = 'fancybox';
  $attributes['rel'][] = 'gallery';
  // FANCYBOX HACK

  $item = '<div class="media-gallery-item"><div class="top"><div class="top-inset-1"><div class="top-inset-2"></div></div></div><div class="gallery-thumb-outer"><div class="gallery-thumb-inner">';
  $item .= empty($variables['no_link']) ? l($image, $link_path, array('html' => TRUE, 'attributes' => $attributes)) : $image;
  $item .= '</div></div><div class="bottom"><div class="bottom-inset-1"><div class="bottom-inset-2"></div></div></div></div>';
  return $item;
}
lsolesen’s picture

Status: Active » Postponed (maintainer needs more info)

Could any of you provide a patch which leaves the choice of lightbox up to the user, defaulting to the current implementation, so no current sites gets broken?

selinav’s picture

Hello,

I do not understand everything.
I have Colorbox on my website and this module use lightbox. Where can I set params for this lightbox for this module ? How can I do to use colorbox instead? How to adjust the size of the lightbox to the browser size?

Thanks

lsolesen’s picture

kentjames1980’s picture

Status: Postponed (maintainer needs more info) » Active

Would there be any future plans to make other lightboxes available with this module? I have it working fine with the colorbox but I personally much prefer lightbox2 as a display as its cleaner, more reliable and seems to load faster? If there could be an option to select the lightbox built in to the module rather than having such a high dependency on the colorbox module / library then it would be great.

Sorry I cannot help with patches or codes or anything like that as I'm more a user of drupal for my personal site than a developer.

valkum’s picture

Version: 7.x-1.0-beta7 » 7.x-1.0-beta8

With Drupal 7.20 this workaround wouldnt work anymore.

The new security improvements will break this fancybox hack.

Now an image is styled first when it is accessed the first time.
As the media_gallery sends an already renderd a tag, we could'nt replace the url anymore.

I couldn't find any function that resolves somthing like http://example.com/sites/example.com/files/styles/thumb/public/IMAGE.png into the original public://IMAGE.png.

So I wrote a function that resolves the rendered path into an relativ path to the public:// folder.
image_style_url should style the image to large an generate the url for the large view.

/**
* Override theme_media_gallery_item() - media_gallery/media_gallery.theme.inc
*/
function ggp_theme_media_gallery_item($variables) {
  $image = $variables['image'];
  $link_path = $variables['link_path'];
  $attributes = array();

  if (!empty($variables['classes'])) {
    $attributes['class'] = $variables['classes'];
  }
  if (!empty($variables['title'])) {
    $new_image = str_replace(array('title=""', 'alt=""'), array('', ''), $image);
    $image = str_replace('/>', ' title="' . $variables['title'] . '" alt="' . $variables['title'] . '" />', $new_image);;
  }

  // FANCYBOX HACK
  if (!isset($variables['gallery'])) {
    $url = '';
    preg_match('|src="([\S]*)"|', $image, $url);
    $path = ggp_theme_get_file_scheme($url[1]);
    $link_path = image_style_url('media_gallery_large', $path);
    $attributes['class'][] = 'fancybox';
    $attributes['rel'][] = 'gallery';
  }

  $item = '<div class="media-gallery-item"><div class="top"><div class="top-inset-1"><div class="top-inset-2"></div></div></div><div class="gallery-thumb-outer"><div class="gallery-thumb-inner">';
  $item .= empty($variables['no_link']) ? l($image, $link_path, array('html' => TRUE, 'attributes' => $attributes)) : $image;
  $item .= '</div></div><div class="bottom"><div class="bottom-inset-1"><div class="bottom-inset-2"></div></div></div></div>';
  return $item;
}

function ggp_theme_get_file_scheme($uri) {
  $uri = strtok($uri, '?');
  global $base_url;
  $prefix = $base_url . '/' . DrupalPublicStreamWrapper::getDirectoryPath();
  if ( !strncmp( $uri, $prefix, strlen($prefix)) ) {
    $path = substr($uri, strlen($prefix)+1);
    if(!strncmp($path, 'style/', 5)){
        $path = substr($path, 7);
        $path = strstr($path, '/');
        $path = substr($path, 1);
    }
    if(!strncmp($path, 'public/', 6)){
       $path = substr($path, 7);
     }
    return $path;
  }
  return $uri;
}

Would be good if hook_media_gallery_item gets the stream URL of the file and builds the img tag itself

valkum’s picture

Status: Active » Needs work
FileSize
910 bytes

i invested some time to give the independence a hug. :)

In my theme i now use this theme function to include fancybox support (fancybox module)

/**
* Override theme_media_gallery_item() - media_gallery/media_gallery.theme.inc
*/
function ggp_theme_media_gallery_item($variables) {
  $image = $variables['image'];
  if (!empty($variables['title'])) {
    $image[0]['#title'] = $variables['title'];
    $image[0]['#alt'] = $variables['title'];
  }
  debug($image);
  $rendered_image = render($image);
  $link_path = $variables['link_path'];
  $attributes = array();

  if (!empty($variables['classes'])) {
    $attributes['class'] = $variables['classes'];
  }
  
  /*if (!empty($variables['title'])) {
    $new_image = str_replace(array('title=""', 'alt=""'), array('', ''), $image);
    $image = str_replace('/>', ' title="' . $variables['title'] . '" alt="' . $variables['title'] . '" />', $new_image);;
  }*/

  // FANCYBOX HACK
  if (isset($variables['gallery'])) {
    $link_path = image_style_url('media_gallery_large', $image[0]['#file']->uri);
    $attributes['class'][] = 'fancybox';
    $attributes['rel'][] = 'gallery';
  }

  $item = '<div class="media-gallery-item"><div class="top"><div class="top-inset-1"><div class="top-inset-2"></div></div></div><div class="gallery-thumb-outer"><div class="gallery-thumb-inner">';
  $item .= empty($variables['no_link']) ? l($rendered_image, $link_path, array('html' => TRUE, 'attributes' => $attributes)) : $rendered_image;
  $item .= '</div></div><div class="bottom"><div class="bottom-inset-1"><div class="bottom-inset-2"></div></div></div></div>';
  return $item;
}

The patch is a first step into this type of hierarchy
media_gallery => lightbox independent
media_gallery_fancybox => fancybox stuff
media_gallery_colorbox => colorbox stuff

REMEMBER Patch is WIP

mattjacobson’s picture

Valkum,

Could you explain the process of applying your work around? I've been building a responsive website, and thus far, Media Gallery (and more specifically, colorbox) has been the one hold-out component.

My understanding is that the patch will provide the edits to the gallery module itself, and that I should use the above code to incorporate fancybox into my theme?

Thanks so much for your work!

valkum’s picture

i'm not sure if my work will help to make media_gallery responsive.
With the code from #11 you can overwrite the theme function for galleries, to work with the fancybox module.
But here is a little bug in my code posted in #11:

    $link_path = image_style_url('media_gallery_large', $path);

should be

    $link_path = image_style_url('media_gallery_large', 'public://'.$path);

In #12 i rewrote some parts of media_gallery to run lightbox independent. It was supposed to be pulled into the module. But it is just some work, not finished. Hoped that a maintainer would dig into this.

i think the best for your purposes would be my workaround for Drupal 7.21+ (in post #11) .

brydave78’s picture

Any update?

transformative’s picture

Issue summary: View changes

I added the code in #11 to the template.php file in my theme (thank you for that!), and that worked for me.

I made some modifications to it, so that it worked for me for videos as well (with the "enable media helper" box checked in the fancybox settings). This way it displays both image and video thumbnails, and will display both. The code is a bit of a hack, but worked for me, for what I needed at the moment.

/**
 * Override theme_media_gallery_item() - media_gallery/media_gallery.theme.inc
 * To replace colorbox with fancybox.
 */
function theme_media_gallery_item($variables) {
    $image = $variables['image'];
    $link_path = $variables['link_path'];
    $attributes = array();
    
    if (!empty($variables['classes'])) {
        $attributes['class'] = $variables['classes'];
    }
    if (!empty($variables['title'])) {
        $new_image = str_replace(array('title=""', 'alt=""'), array('', ''), $image);
        $image = str_replace('/>', ' title="' . $variables['title'] . '" alt="' . $variables['title'] . '" />', $new_image);;
    }
    
    // FANCYBOX HACK (from https://www.drupal.org/node/1311568)
    if (!isset($variables['gallery'])) {
        $url = '';
        preg_match('|src="([\S]*)"|', $image, $url);
        $path = theme_get_file_scheme($url[1]);
        //get the path of the file from the file id, so that it will display videos and not just images */
        $variables_link_path = $variables['link_path']; //get the link_path (typically looks something like this: media-gallery/detail/30/66, where 30 is the nid and 66 is the fid)
        if (strpos($variables_link_path, "node/") === 0) { //if the link_path starts with "node/" (0 represents the first character), then we are on a gallery collection page, rather than a gallery page, and so we should just link to its node
            $link_path = $variables_link_path;
        }
        else {  //otherwise we should get the media link for that media item
            $fid = substr($variables_link_path, strrpos($variables['link_path'], '/')+1); //get the fid from the end of the string (i.e., the number after the last /)
            $link_path = file_create_url(file_load($fid)->uri); //create a url from the fid's uri
        }
        $attributes['class'][] = 'fancybox';
        $attributes['rel'][] = 'gallery';
    }
    
    $item = '<div class="media-gallery-item"><div class="top"><div class="top-inset-1"><div class="top-inset-2"></div></div></div><div class="gallery-thumb-outer"><div class="gallery-thumb-inner">';
    $item .= empty($variables['no_link']) ? l($image, $link_path, array('html' => TRUE, 'attributes' => $attributes)) : $image;
    $item .= '</div></div><div class="bottom"><div class="bottom-inset-1"><div class="bottom-inset-2"></div></div></div></div>';
    return $item;
}

/**
 * Get the file scheme for the function above
 */

function theme_get_file_scheme($uri) {
    $uri = strtok($uri, '?');
    global $base_url;
    $prefix = $base_url . '/' . variable_get('file_public_path', conf_path() . '/files');
    if ( !strncmp( $uri, $prefix, strlen($prefix)) ) {
        $path = substr($uri, strlen($prefix)+1);
        if(!strncmp($path, 'style/', 5)){
            $path = substr($path, 7);
            $path = strstr($path, '/');
            $path = substr($path, 1);
        }
        if(!strncmp($path, 'public/', 6)){
            $path = substr($path, 7);
        }
        return $path;
    }
    return $uri;
}

For my implementation, I found that I also needed to remove loading of Colorbox in media_gallery.theme.inc and in media_gallery.module.
Below is an additional override I added to my template.php file for media_gallery.theme.inc.

/**
 * Override theme_media_gallery_block_thumbnail() - media_gallery/media_gallery.theme.inc
 * To remove usage of colorbox by the media gallery (so that it doesn't load on top of fancybox).  Note that there is also a similar change in media_gallery/media_gallery.module.
 */
function theme_media_gallery_block_thumbnail($variables) {
    $element = $variables['element'];
    
    /* Don't attach colorbox, because we are using fancybox instead, and colorbox gets in the way.
     
     // Attach the colorbox javascript if the format calls for it.
     $format = $element['#media_gallery_entity']->media_gallery_format[LANGUAGE_NONE][0]['value'];
     $lightbox = is_numeric(strpos($format, 'lightbox')) ? TRUE : FALSE;
     if ($lightbox) {
     $element['file']['#attached']['js'][] = drupal_get_path('module', 'media_gallery') . '/colorbox-display.js';
     $element['file']['#attached']['library'][] = array('media_gallery', 'colorbox');
     }
     
     */
    
    // Get the rendered file without annoying DIV wrappers.
    $element['file'] = array('#theme' => 'media_gallery_file_field_inline', '0' => $element['file']);
    $image = drupal_render($element['file']);
    
    // Create some variables to be added to the main image link
    $classes = $lightbox ? array('media-gallery-thumb', 'cbEnabled') : array('media-gallery-thumb');
    $gallery_id = $element['#media_gallery_entity']->nid;
    $media_id = $element['#file']->fid;
    $link_path = "media-gallery/detail/$gallery_id/$media_id";
    
    // Create a wrapper
    $output = '<div class="media-gallery-item-wrapper">';
    // Style the thumbnail as a link
    $output .= theme('media_gallery_item', array('image' => $image, 'link_path' => $link_path, 'classes' => $classes));
    // Close the wrapper
    $output .= '</div>';
    
    return $output;
}

Then, in media_gallery.module, I commented out the function that loads colorbox:

/**
 * Implements hook_library().
 */
/* Don't use colorbox, because we are using fancybox instead, and colorbox gets in the way.
function media_gallery_library() {
  $colorbox_path = variable_get('media_gallery_library_path', FALSE);
  if ($colorbox_path === FALSE ) {
    $colorbox_path = module_exists('libraries') ? libraries_get_path('colorbox') : 'sites/all/libraries/colorbox';
  }
  else {
    $colorbox_path .= '/colorbox';
  }
  $stylesheet = variable_get('media_gallery_colorbox_stylesheet', 'example1');
  $libraries['colorbox'] = array(
    'title' => 'Colorbox',
    'website' => 'http://colorpowered.com/colorbox/',
    'version' => '1.3.9',
    'js' => array(
      $colorbox_path . '/colorbox/jquery.colorbox-min.js' => array(),
    ),
    'css' => array(
      $colorbox_path . '/' . $stylesheet . '/colorbox.css' => array(
        'type' => 'file',
        'media' => 'screen',
      ),
    ),
  );
  return $libraries;
}
*/

My other notes for changes I made to have Media Gallery work with FancyBox to provide thumbnails, images, videos, responsiveness, and hierarchical gallery collections are here:
https://www.drupal.org/node/2499223#comment-10050898

ivnish’s picture

Status: Needs work » Closed (outdated)