I would like to load a page from an external site within a lightbox. It seems I should be able to do this in Drupal with colorbox and/or colorbox-load but it doesn't seem to be working.

I'm not exactly sure what the best way to do this is, but documentation on the colorbox project suggests that it can be done by installing colorbox and colorbox-load and adding class="colorbox-load" to the relevant link elements. Then again, there isn't any mention of this method on the project page for colorbox-load itself, so I'm not sure - maybe that documentation is out of date. Is this the right way of achieving this?

I can use colorbox to open a page on my own site in a lightbox by tagging the link element with class="colorbox". When I do the same on an external URL a lightbox opens but its only content is a line of text saying "This content failed to load.". When I try to do it using colorbox-load by adding class="colorbox-load" to the element, no lightbox is opened at all and the link just functions as a normal link, for both internal and external links.

I have put a test page demonstrating the issue here: http://winfordmanor.nfshost.com/colorbox-load-test

Here's the source of that page:

<p><a class="colorbox" href="rooms/?width=500&amp;height=500&amp;iframe=true">colorbox internal link</a></p>

<p><a class="colorbox-load" href="rooms/?width=500&amp;height=500&amp;iframe=true">colorbox-load internal link</a></p>

<p><a class="colorbox" href="http://www.example.com/?width=500&amp;height=500&amp;iframe=true">colorbox external link</a></p>

<p><a class="colorbox-load" href="http://www.example.com/?width=500&amp;height=500&amp;iframe=true">colorbox-load external link</a></p>

The page is in full HTML format.

Colorbox and Colorbox-load are both installed and enabled. I'm using Colorbox 8.x-1.2, Colorbox-load 8.x-1.0-rc2, and Drupal 8.2.6.

Thanks for any help.

Comments

dri_ft created an issue. See original summary.

ajayNimbolkar’s picture

Hi,

Please let me know how to used external url in colorbox?

Thanks,
Ajay

ajayNimbolkar’s picture

Priority: Normal » Major
Sam152’s picture

Category: Bug report » Feature request
Priority: Major » Normal

There is currently no support for external URLs.

kmani’s picture

Priority: Normal » Major
hockey2112’s picture

This method worked for me: https://drupal.stackexchange.com/a/264052/11857

<a href="javascript:void jQuery.colorbox({html:'<iframe width=854 height=480 src=http://maps.google.com/maps/ms?parameters=example frameborder=0 allowfullscreen></iframe>'})">colorbox-load external link</a>
apaderno’s picture

Version: 8.x-1.0-rc2 » 8.x-1.x-dev
Promo-IL’s picture

#6 hockey2112 +1 works for me to

eit2103’s picture

Is there anyway to make it work on views too? Views is stripping the javascript code and I am left with the following.

<a>'})"&gt;colorbox-load external link</a>

NickDickinsonWilde’s picture

Status: Active » Closed (works as designed)

I would suggest trying out Colorbox Inline