Now when clicking on the image in the lightbox, I get redirected to the full page view with pager of the images instead. It would be great if there was an option for setting that it closes the lightbox in the same way as clicking the close option in the lightbox.

CommentFileSizeAuthor
#11 Schermata.jpg205.73 KBelgandoz
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

camdarley’s picture

I agree with that feature. We may be able to choose between link to original (as it is now), close the lightbox (as tsvenson said), or slide to the next media (as it use to be in many galleries).

DartDev’s picture

+1

elgandoz’s picture

subs! This is a must!, because it's very confusing.
Anybody out there knows where it's possible modifying the code?

camdarley’s picture

I think that's the answere is at line 292 of media_gallery.module but i'm not enough experienced to make modification myself :

foreach ($deltas as $key => $delta) {
      $item = $media[$delta];
      $fid = _media_gallery_get_media_fid($item);
      if ($key < $min_on_page) {
        $pre_links[$key] = array(
          'title' => '',
          'href' => 'media-gallery/detail/' . $node->nid . '/' . $fid,
          'attributes' => array('class' => array('colorbox-supplemental-link pre')),
        );
        unset($media[$delta]);
      }
      elseif ($key > $max_on_page) {
        $post_links[$key] = array(
          'title' => '',
          'href' => 'media-gallery/detail/' . $node->nid . '/' . $fid,
          'attributes' => array('class' => array('colorbox-supplemental-link post')),
        );
        unset($media[$delta]);
      }
    }

    // Field rendering requires sequential deltas, so re-key.
    // @todo Open a Drupal core issue about this.
    
    if ($media) {
      $node->media_gallery_media[LANGUAGE_NONE] = array_values($media);
    }
    else {
      $node->media_gallery_media[LANGUAGE_NONE] = array();  
    }

    // Create a set of dummy links to media items that don't appear on this
    // page, so colorbox can link to them in the slideshow.
    // @todo If the gallery contains 1000 media, then rendering each link takes
    //   extra server-side time, extra network time to transfer the markup, and
    //   extra client-side time to initialize the DOM. Performance can likely be
    //   significantly improved if we only send the fids to Drupal.settings, and
    //   add JavaScript code to make that information usable by Colorbox.
    $node->content['colorbox_links_pre'] = array(
      '#theme' => 'links',
      '#links' => $pre_links,
      '#weight' => -20,
      '#attributes' => array('class' => array('colorbox-supplemental-links')),
    );
    $node->content['colorbox_links_post'] = array(
      '#theme' => 'links',
      '#links' => $post_links,
      '#weight' => 20,
      '#attributes' => array('class' => array('colorbox-supplemental-links')),
    );
    // Finally, display the pager, with a high weight so it appears at the
    // bottom.
    if ($full) {
      $node->content['media_gallery_pager'] = array(
        '#theme' => 'pager',
        '#element' => MEDIA_GALLERY_PAGER_ELEMENT,
        '#weight' => 2000,
      );
    }
camdarley’s picture

Title: Ability to change Colorbox click action behavior » Option to set that a click on the lighbox image returns to the gallery/node
Version: 7.x-1.0-beta4 » 7.x-1.x-dev

I think this issue should be merged with #1053674: Integrate with colorbox module

elgandoz’s picture

OK i found it:
media_gallery.theme.inc
function theme_media_gallery_media_item_lightbox(), line 193;
Replace:

$link_vars['no_link'] = $element['#bundle'] == 'video' ? TRUE : FALSE;

with

$link_vars['no_link'] = $element['#bundle'] == 'video' ? TRUE : FALSE;
$link_vars['no_link'] = TRUE;

so the second line override the first (changing the first breaks the theme).
So the trick is to add an override of $link_vars['no_link'] in admin UI. It's thought for videos, but not as an option for photos.
I'm not a Drupal nor a PHP pro, anyway i will be glad to help (and learn something).

elgandoz’s picture

...mmm i think this option may suit better in "Gallery settings"

elgandoz’s picture

Version: 7.x-1.x-dev » 7.x-1.0-beta4
camdarley’s picture

Title: Option to set that a click on the lighbox image returns to the gallery/node » Ability to change Colorbox click action behavior

change title to fit better with the issue

elgandoz’s picture

Title: Option to set that a click on the lighbox image returns to the gallery/node » Ability to change Colorbox click action behavior
Version: 7.x-1.x-dev » 7.x-1.0-beta4

I noticed the #6 trick behaves in different way between my local copy and the production site. In thge second, scrollbars appear in both vertical and horizontal border. Also i can see another "frame" inside the lightbox. this do not appear in local. any idea?

elgandoz’s picture

FileSize
205.73 KB
stephandale’s picture

To avoid hacking the module code, you can always use Javascript to alter the behaviour of the click action. This example makes a click on the item move to the next item:

$(document).bind('cbox_complete', function(){
  $('.lightbox-stack .gallery-thumb-inner a').click(function(e) {
    e.preventDefault();
    $.colorbox.next();
  });
});
camdarley’s picture

stephandale solution seems great.
I did this to make it working:
in media_gallery.theme.inc, replace

if ($lightbox) {
    $element['file']['#attached']['js'][] = drupal_get_path('module', 'media_gallery') . '/colorbox-display.js';

by

if ($lightbox) {
    $element['file']['#attached']['js'][] = drupal_get_path('module', 'media_gallery') . '/colorbox-display.js';
    $element['file']['#attached']['js'][] = drupal_get_path('module', 'media_gallery') . '/colorbox-behavior.js';

then create colorbox-behavior.js with following code :

(function ($) {

Drupal.behaviors.initColorboxDefaultStyle = {
  attach: function (context, settings) {
    $(document).bind('cbox_complete', function () {
  	  $('.lightbox-stack .gallery-thumb-inner a').click(function(e) {
        e.preventDefault();
        $.colorbox.next();
      });
    });
  }
};

})(jQuery);
Chipie’s picture

Version: 7.x-1.0-beta4 » 7.x-1.0-beta5

+1

Chipie’s picture

Where do I have to put this js code?

camdarley’s picture

In the media-gallery module folder, you have to create colorbox-behavior.js near colorbox-display.js.

TripX’s picture

Version: 7.x-1.0-beta5 » 7.x-1.0-beta6

+1

totap’s picture

thank you. good work

niccolox’s picture

there are two places where this is replace needs to happen, lines 115 and 357

for the Media Gallery blocks and gallery pages

.. not sure if I needed to do this, but I also implemented the Colorbox module integration patch and installed the latest 1.7 version of Prototype JS...

anyway, cheers

greggus-1’s picture

Great! Subscribing...

axe312’s picture

+1 :)

thx for the workaround in #12

bkosborne’s picture

+1, this should be a setting on a per-gallery process.

drupal a11y’s picture

All in all I guess best would be some more options on the admin-pages (admin/config/media/galleries) of media gallery for non-programmers.

drupal a11y’s picture

Does solution #13 still work on the current dev? I can´t get it working.

John Sluder’s picture

To implement the fix from suggestion #12

  1. locate the current themes .info file
  2. open the file for editing and place code near other script called in the .info file, if no other scripts files are referenced then place at the bottom of file
  3. insert this line
  4. scripts[] = js/media_gallery_hack.js

  5. save and close the file
  6. check to see if there is a directory name"js" in the current themes directory, and case matters!
  7. if not create the "js" directory
  8. create a text file in "js" directory -> named "media_gallery_hack.js" and case matters!
  9. in this text file past in the following
  10. /*
    Redirects lightbox image click to advance to next image instead of opening image details.
    Via http://drupal.org/node/1088738#comment-4362570
    code from #12
    Posted by stephandale on April 10, 2011 at 12:26pm
    */
    (function ($) {
    
    Drupal.behaviors.initColorboxDefaultStyle = {
      attach: function (context, settings) {
        $(document).bind('cbox_complete', function () {
      	  $('.lightbox-stack .gallery-thumb-inner a').click(function(e) {
            e.preventDefault();
            $.colorbox.next();
          });
        });
      }
    };
    
    })(jQuery);
    
  11. save file and test!!!
Carlos Miranda Levy’s picture

Solution #6 still works

In 7.x-1.0-beta7, it's on line 209.

Solution #25 does work too.
Keep in mind subdirectories if you are working on a subtheme.

dimitriseng’s picture

Hi. I have tested the solution suggested at #13 and this seems to be working ok, thank you! I prefer this solution over #25 as I would not like to change a theme file for changing the behaviour of module.

Can somebody please confirm if this is going to be commited and in what form? I guess that the best solution would be to make this option available via the admin GUI so that the user can select the required behaviour.

dimitriseng’s picture

... I forgot to mention that I had also applied patch #44 from #1053674: Integrate with colorbox module and they seem to be working ok together, so hopefully both will get commited, although I think that for this we should also have a configurable setting for the behaviour.

dimitriseng’s picture

This seems to be working ok. A few questions to move this forward:
- Do you agree to get this functionality in?
- Do you agree to go with the solution proposed in #13 (requires changes in the module) Vs #29 (which requires changes in theme files)?
- Do you agree to try and make this configurable via the GUI, or should this be left as is for now so that this can be commited faster?
Thank you.

tikiwebsites’s picture

I needed this solution (difficult to find) and I went with #25. In response to dimitriseng, it might depend on how you are utilizing colorbox. In my case, I'm using media gallery, which uses the colorbox plugin, not module, therefore solution #13 is irrelevant to me. Additionally, I'm using Zen as my theme, so I'm a mad theme editor anyways, so editing those files didn't pose a particular concern to me; not to mention I tested it on a dev site first in case something did go wrong, before going live.

The only thing I did different was change the script name to media_gallery_click_next.js (hack was a little too generic for my tastes), but l suppose it would be more accurate to call it colorbox_click_next.js.

The only other consideration you should make, as seen in the Zen theme's js readme file, is that referring to the script in the theme.info file will make the change "sitewide" but if you want to make it conditional, then:

add a JavaScript file depending on a certain condition, you can add it
   using some PHP code in a preprocess function:

     drupal_add_js('js/my-jquery-script.js', array('group' => JS_THEME));

   For the full documentation of drupal_add_js(), see:
     http://api.drupal.org/api/function/drupal_add_js

I agree that this should be an option in the module configuration and I would consider it fixed if the plugin "fix" was documented... But, I'm happy with the current work-around.

Mahalo!

crnjin’s picture

camdarley thank you very much, helped me with # 13

gertderidder’s picture

Thanks tikiwebsites to point out that solution #13 is irrelevant for the media gallery!

Also big thanks to John Sluder and stephandale!

camdarley’s picture

Actually, I forgot to mention that I patched media_gallery with #1053674: Integrate with colorbox module before the modification in #13. So this is the colorbox module which is used.

UrmasZ’s picture

I am using solution #25 also. Working well. Thanks. :)

Much needed fix.

Rob C’s picture

For now, i'm all in favour of implementing this, but...

Can't we implement this as an option somewhere? "Gallery popup click behaviour" sounds a bit long tough... (i'm just thinking out loud here, but i wonder if this would make sense, because something with an editable field where you for example (somewhere in the future) can use tokens to build a url to use for the click action would open some new posibilities.) (but this might be something to look at from a distance and think long n hard about, because in other situations you might also want to add/change default behaviour and wouldn't it be awesome if we can create a view with a thumbnail, set the link for a media field and set the action via something like the styles module. so without to much work, you can get a view (that renders a thumbnail) to create a popup (on click), with colorbox intergration going on now, etc, etc.) (and we already have the linked/unlinked thumbnail option n such.) (running on media 2.x / media gallery dev patched / styles) Install the styles module and then visit admin/structure/file-types/manage/image/file-display/media_gallery_thumbnail for example to see where we could place an option. The media_youtube module also provides options (including js) on such a page.

sumaiyajaved’s picture

#25 worked for me, I am using drupal 7. Thank you

Bernsch’s picture

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

Script-hack in #25 works for me.
Tested with picture-gallery. NOT with (youtube)videos...
Thank you!

edit: I test a gallery with picture and videos (media:youtube module) and it works fine:
Klick on the video --> it starts and stops.
Klick on a picture --> go to next picture.

Richard_1618’s picture

#6 worked perfectly for me!

Valera Tumash’s picture

Comment #25 work for me as well, but with some modification:
I added into my Zen template.php file (sites/default/themes/THEME_NAME/template.php):

function THEME_NAME_preprocess_page(&$variables, $hook) {
	if (isset ($variables['node']) && $variables['node']->type == "media_gallery") {
		drupal_add_js(drupal_get_path('theme', 'THEME_NAME') . '/js/media_gallery_hack.js', array('group' => JS_THEME));
	}
}

So in the result 'media_gallery_hack.js' is added only to Media Gallery pages. And of course, I commented out js link from info file:
;scripts[] = js/media_gallery_hack.js
Hope this can help.

neomax38’s picture

Sorry for my English. Topic Simple Corporate, doing everything according to the instructions of John Sluder, but it does not work. What could be wrong? How can I fix it?

CandieBandit’s picture

If the gallery is PURE images (as in - not using video media) I figured a quick and dirty fix for this is to override the 'next' button's CSS to make it cover the whole image in the lightbox:

#cboxNext {background:none;width:100%;height100%;}

I remove the background image as the user will quickly work out that clicking the image will take them forward, common sense doesnt need a next button imo.
Hope this is helpful to someone.

ivnish’s picture

Issue summary: View changes
Status: Active » Closed (outdated)
ivnish’s picture

Status: Closed (outdated) » Fixed
ivnish’s picture

Status: Fixed » Closed (fixed)