Colobox module not working on Drupal 8

By halacs on 3 Aug 2016 at 12:03 UTC

Hi,

I have recently installed Drupal 8 and I try to use Colorbox module which doesn't work. Can anybody help me why? I am new with Drupal 8. My last Drupal site was in version 6, so years ago.

What I did by now? I tried to follow this tutorial video which actually means:
1) Installed Colorbox and Colodbox Inline modules
1a) opened /admin/modules/install page and copied and pasted the URL of Colorbox module (.tar.gz file).
1b) again but with Colorbox Inline module's file
1c) enabled these two moduls
2) went to /admin/structure/types/manage/article/display page, and changed format of image field to colorbox and then set properties on the right (Content image style, Colorbox gallery type, etc).
3) went to an article typed content and inserted 5 pictures used by the toolbar.

After the above steps, I cannot click on my pictures in that article and colorbox does not work.

I also tried to install colorbox load module, but it didn't helped (to be honest the relationship among them is not clear yet).

Do anybody have any idea why?

Thanks & br,
Halacs

Comments

=-=

VM commented 3 August 2016 at 13:27

module specific issue should be researched in the issue queue of the problematic module for similar issues. If none, generate one.

https://www.drupal.org/project/issues/colorbox?categories=1

Thanks for the advise! I will

halacs commented 3 August 2016 at 13:33

Thanks for the advise! I will do it as soon as I can.
(I tired it right now, but unfortunately, there was a problem with my form submission there so I have to wait a couple of minutes :( )

done: https://www.drupal.org

halacs commented 3 August 2016 at 14:38

done: https://www.drupal.org/node/2778435

You never mentioned about

onejam commented 3 August 2016 at 13:57

You never mentioned about installing the js library needed for colorbox: https://github.com/jackmoore/colorbox/archive/1.x.zip

so perhaps you are missing this js script to make it work.

Create a libraries directory in your webroot folder call libraries.

Unzip the download into libraries and reaname it to colorbox:

libraries/colorbox/jquery.colorbox-min.js

If installed successfully, you should see it in your status report page: admin path: /admin/reports/status

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

Oh yeah, you are right, I

halacs commented 3 August 2016 at 14:24

Oh yeah, you are right, I missed to mention that.
I checked it and that js file is available that url and on the status page I see this: "Colorbox library Installed"

So the js script is installed

onejam commented 3 August 2016 at 14:31

So the js script is installed in libraries.

Only thing i can think of is that you probably haven't enabled it to be used on your image field. Go to your content type for the image field that you want to used for colourbox. Then click on manage display, check the format column for image feld and see if colorbox is set for the image field.

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

I am afraid it is done.Here

halacs commented 3 August 2016 at 14:35

I am afraid it is done.
Here is a screenshot about it.

Ok, looks like you have done

onejam commented 3 August 2016 at 15:07

Ok, looks like you have done everything required. So i really don't know what the issue is?

I use colorbox on my Drupal 8 site to load videos in a colorbox. As an example: https://duvien.com (click on a video)

and it's working fine. This is all setup as you have described. The only slight difference is that i only use the colorbox module and nothing of the others you have mentioned.

So I think, your best bet now is to create an issue in the colorbox queue. Hopefully, someone might figure out what is wrong or what you are missing?

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

One more question: how do you

halacs commented 3 August 2016 at 16:50

One more question: how do you insert your pictures?
I made a screenshot about a post. I use the button with no. 1. Should this work?

Ah, i think you have found

onejam commented 3 August 2016 at 17:02

Ah, i think you have found the issue? I don't use the editor to embed image, but image field (where colorbox is set to work with). So #2 is the way i handled image and video embed. Then, i just render the image/video field in my theme where i want to display it.

I'm just guessing, if you have installed a module to handle inline image with colorbox, don't you need to add a filter to your text editor to make it work (so the editor knows how to handle the images)?

Go to admin path: /admin/config/content/formats

Click configure button on one of the filter formats and check under 'Enabled filters' and see if there is one for colorbox.

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

You are right: I installed

halacs commented 3 August 2016 at 17:44

You are right: I installed colorbox inline module as well (screenshot).

I checked /admin/config/content/formats/manage/full_html page (I use full HTML editor mode everywhere) and there is no colorbox related filter (screenshot).

That means you will need to

onejam commented 3 August 2016 at 17:51

That means you will need to add the markup yourself.

http://drupal.stackexchange.com/questions/39546/how-do-i-display-inline-...

Make sure you select FULL HTML text format, in case any of the markup gets stripped out.

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

Almost there, but just almost

halacs commented 3 August 2016 at 18:20

Almost there, but just almost. The colorbox popup come up but without content (I mean an empty white square).
This is my current html markup:

<p>
<a data-colorbox-inline=".blackberrydevalphaB">
<img alt="devalphab" data-entity-type="file" data-entity-uuid="ed25b96e-04e2-4282-9c21-c501740e25e7" src="/cms/sites/default/files/inline-images/devalphab.png" /></a>

<a data-colorbox-inline=".blackberrydevalphaB" style="display: none;">
<img alt="devalphab" data-entity-type="" data-entity-uuid="" src="/cms/sites/default/files/inline-images/devalphab1.png" />
</a>

<a data-colorbox-inline=".blackberrydevalphaB" style="display: none;">
<img alt="devalphab"  data-entity-type="" data-entity-uuid="" src="/cms/sites/default/files/inline-images/devalphab2.png" />
</a>

<a data-colorbox-inline=".blackberrydevalphaB" style="display: none;">
<img alt="devalphab" data-entity-type="" data-entity-uuid="" src="/cms/sites/default/files/inline-images/devalphab3.png" />
</a>

<a data-colorbox-inline=".blackberrydevalphaB" style="display: none;">
<img alt="devalphab" data-entity-type="" data-entity-uuid="" src="/cms/sites/default/files/inline-images/devalphab4.png" />
</a>

</p>

Try:

onejam commented 3 August 2016 at 18:44

Try:

<a data-colorbox-inline="#blackberrydevalphaB" data-width="600"><img alt="devalphab" data-entity-type="file" data-entity-uuid="ed25b96e-04e2-4282-9c21-c501740e25e7" src="/cms/sites/default/files/inline-images/devalphab.png" /></a>

<img alt="devalphab" data-entity-type="" data-entity-uuid="" src="/cms/sites/default/files/inline-images/devalphab1.png" id="blackberrydevalphaB" />

I think you hide the content in your css file, not inline:

#blackberrydevalphaB {display:none}

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

wow, great, it works! But you

halacs commented 3 August 2016 at 18:56

wow, great, it works! But you use id attribute at the picture outside of the 'a' tag so how can I add the other pictures?

Earlier, in the Drupal 6 ages, I used shadobox where I had to use that kind of CSS, but seems now it does not work anymore with colorbox.

Not quite sure. Like i said i

onejam commented 3 August 2016 at 19:10

Not quite sure. Like i said i don't use inline method, find it cumbersome having to add the markup each time so better let drupal do all the work on the image field format.

You can try add id to all the images: id="blackberrydevalphaB" or change it to class="blackberrydevalphaB" instead (if you do, make sure your css display:none reflect the changes .blackberrydevalphaB {display:none})?

I better way of handling this is using Paragraph modules (https://www.drupal.org/project/paragraphs). Create an image field and apply colorbox as format. Then you just upload as many images as you want and let the system handle it all for you. And in manage display, you can move the image field to where you want to display it.

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

Well, finally it's working

halacs commented 4 August 2016 at 14:18

Well, finally it's working with colorbox_load module. For others, who may have similar problem, let's here the solution:

<p>
  <a class="colorbox" data-colorbox-gallery="AAA" data-entity-type="file" data-entity-uuid="ab930bd1-3fe6-4d60-8909-a6b6e1cc2dba" href="/cms/sites/default/files/inline-images/devalphab_0.png">
    <img alt="devalphab" data-entity-type="file" data-entity-uuid="ab930bd1-3fe6-4d60-8909-a6b6e1cc2dba"  src="/cms/sites/default/files/inline-images/devalphab_0.png" width="250px" />
  </a>
</p>

<p>
  <a class="colorbox" data-colorbox-gallery="AAA" data-entity-type="file" data-entity-uuid="3ea806ab-d457-4f45-9504-2737c2062c16" href="/cms/sites/default/files/inline-images/1965%20%C3%A1rv%C3%ADz%20r%C3%A9gi%20strand%20.jpg" style="display:none;">
    &nbsp;
  </a>
</p>

It seems I could remove the <a> tag as well if I would like to simplify the code but then the 'hand' cursor should be set in CSS. So this is the shorter version with only one picture (no grouping):


<p>
  <img alt="devalphab" class="colorbox" data-entity-type="file" data-entity-uuid="ab930bd1-3fe6-4d60-8909-a6b6e1cc2dba" href="/cms/sites/default/files/inline-images/devalphab_0.png" src="/cms/sites/default/files/inline-images/devalphab_0.png" width="400px" />
</p>