I have a views gallery setup, where 50 or so images get shown. I have them setup with a colorbox trigger in the view, so the image shows in a colorbox when clicked on.

Since I dislike the use of a normal pager (1,2,3,back,next) I wanted to use an infinite scroll (http://drupal.org/project/views_infinite_scroll)

When I set the pager to use 12 images, they display fine and colorbox displays the gallery correctly with back / next and image count. When I scroll down past the 12 images, the next 12 show, and when I click on images, colorbox then shows 24 images as expected. Only, when I get to image 13, it shows image 1 in the colorbox instead of image 13.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

WebWalker3D’s picture

Any thoughts on this yet?

lsolesen’s picture

Status: Active » Postponed (maintainer needs more info)

Do you have caching enabled for that particular view? Did you solve your issue?

jmix’s picture

Hi, i have the same problem with a simple infinite-scroll "pager" (this one in #2 > http://drupal.org/node/1643486).
I'm not a drupal expert, but it seems we have to call colorbox script again after new items are loaded. I just don't know how to do that...
Isolesen, are you using D6 or D7 ? Have you found any solution ? thanks !

elaman’s picture

Version: 6.x-1.x-dev » 7.x-2.x-dev
Component: Miscellaneous » Code
Status: Postponed (maintainer needs more info) » Needs review
FileSize
424 bytes

Created patch to which makes Colorbox work with Views Infinite Scroll.
Tested with image fields.

WebWalker3D’s picture

Issue summary: View changes
Status: Needs review » Closed (works as designed)
urashima82’s picture

Version: 7.x-2.x-dev » 7.x-2.12
Priority: Normal » Minor
Status: Closed (works as designed) » Active

I've got the same Isssue with the 7.x-2.12 version.
It is due to the token generated at the end of the colorbox rel (or data-colorbox-gallery) attribute.
I solved my problem by adding this JS code in my custom theme folder.

if (context[0] != "undefined") {
  // 'view-photos-videos' is a class in my infinite scroll view container. You might change by your own.
  if($(context[0]).hasClass('view-photos-videos')) {
    // Just change the rel or data-colorbox-gallery attribute (gallery-all-media in my case).
    $('.view-photos-videos .colorbox').attr('data-colorbox-gallery', 'gallery-all-media');
  }
}
Anonymous’s picture

Status: Active » Needs review

I'm using colorbox 7.x-2.13 and colorbox library 1.5.14.

With this combination, I'm not seeing any issues after the next page is loaded and navigating through the images in the gallery.

Status: Needs review » Needs work

The last submitted patch, 4: views_infinite_scroll_fix-1389722-4.patch, failed testing.

eloivaque’s picture

#6 Work for me.

eloivaque’s picture

#6 it's not work when click first to colorbox image and then click to infinite scroll. this next code works for me.

function bcn_bootstrap_preprocess_views_view(&$vars) {
  // Fixed problem with infinite scroll and colorbox module.
  if ($vars['view']->query->pager->display->handler->options['pager']['type'] == 'infinite_scroll') {
    drupal_add_js("(function ($) {
      Drupal.behaviors.infinite_scroll_colorbox = {
        attach: function (context, settings) {
          if (context[0] != 'undefined') {
            if($(context[0]).hasClass('view')) {
              $('.view .colorbox').attr('data-colorbox-gallery', 'gallery-all-media');
            }
          }
          $('.view .colorbox').click(function() {
            $('.view .colorbox').attr('data-colorbox-gallery', 'gallery-all-media');
          });
        }
      }
    })(jQuery);", 'inline');
  }
}
Neslee Canil Pinto’s picture

Issue tags: +Needs reroll

Patch Failed to apply, needs reroll

Neslee Canil Pinto’s picture

Status: Needs work » Closed (works as designed)
Issue tags: -Needs reroll