I have a gallery page View, with a number of thumbnails that, when clicked, open a colorbox window with the full sized image. Everything works great... except, in my View set up, "exclude from display" on the large image (the one that opens in the colorbox) does not exclude it from loading on the initial page load. So every time the page loads, every single full sized image is loading as well. Makes everything WAY slow.

Ideally, the full sized image would only load when the thumbnail is clicked and the colorbox opens up. Not everyone wants to see every image, so it's a waste of bandwidth to load them all.

Any way to avoid this problem? Am I missing something obvious?

Cheers,
Jesse

CommentFileSizeAuthor
#4 colorbox_trigger.png97.33 KBkopeboy
#4 colorbox_field.png99.23 KBkopeboy
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

frjo’s picture

frjo CreditAttribution: frjo commented
Status: Active » Closed (won't fix)

Closing old issues that doesn't seems to effect a lot of users.

kopeboy’s picture

kopeboy CreditAttribution: kopeboy as a volunteer commented
Version: 6.x-1.1 » 7.x-2.13
Category: Support request » Bug report
Priority: Normal » Major
Issue summary: View changes
Status: Closed (won't fix) » Active

It still does, and yes, I think it affects everyone xD

If I'm not wrong, to use the Colorbox trigger in Views, we have to include 2 fields for the images.

That would be ok if it was just to tell colorbox module with image to load in the popup after clicking the first, but to my big surprise it turns out both images are printed immediately, and the browser will download them, even if the second (bigger) one has a "display: none;" div wrapped around.

Is this the intended behaviour?! How to fix it?

kopeboy’s picture

kopeboy CreditAttribution: kopeboy as a volunteer commented

The big problem comes when you use something like Masonry to arrange the smaller images in the page in fancy columns.
Libraries like that have to wait for images to load before determining their size and position them.

If we have to wait even for the HIDDEN LARGER images that will be only displayed after clicks, we have an unarranged horrible page for seconds :/

So I think this mustn't be the intended behaviour of the module.

kopeboy’s picture

kopeboy CreditAttribution: kopeboy as a volunteer commented
FileSize
colorbox_field.png99.23 KB
colorbox_trigger.png97.33 KB

To confirm it, here is the output when using Colorbox in the field setting of a teaser view mode:

Colorbox field
Page load time: 852 ms

and here is the output when using Colorbox trigger in Views:

Colorbox trigger
Page load time: 7.91 s (ten fold)
You can see there are both images in every list item.

(keep in mind I also have Colorbox inline DISABLED in the module settings page)

kopeboy’s picture

kopeboy CreditAttribution: kopeboy as a volunteer commented

To complete the documentation, here is what I used in Views for the second case:

  1. Node title, excluded from display
  2. Image field, small format, excluded
  3. Global: Custom text field, rewritten to display image and title, excluded
  4. Image field, this time with a bigger format, excluded
  5. Colorbox trigger, using 3) has the Trigger, and 4) in Popup content, not excluded.

First case is just a view of content teasers, where the colorbox field is set in the view mode field settings.

PS: All of this started because I couldn't use an HTML caption in the first case :/

Neslee Canil Pinto’s picture

Neslee Canil Pinto
he/him
Primary language English
CreditAttribution: Neslee Canil Pinto at Specbee commented
Status: Active » Closed (won't fix)