Search code examples
javascriptjquerycolorbox

Colorbox not working, possibly conflicting with RoyalSlider

I set up the Colorbox plug-in on a test page of this site: http://amatoarchitecture.com/new/oakvale.html

The first three large images are wrapped in an tag with the proper href and class added (copying from the Colorbox demo).

<p>
   <a style="display: block; width: 497px; height: 427px;" class="group1" href="images/28oakvale1.jpg" Title="Testing, testing, 123...">
      <img class="rsImg" data-rsTmb="images/28oakvale1.jpg" src="images/28oakvale1.jpg" width="514" height="435" />
   </a>
</p>

However, when I click the link, no lightbox is launched. Instead, the link just clicks through to the image itself.

I suspect that the two Jquery plug-ins (Colorbox and RoyalSlider) are conflicting. However, I don't know how to tell whether Colorbox is correctly installed either.

Solution

  • Putting the colorbox code later, using $(window).load() should work.

    Replace this code:

    $(document).ready(function(){
  //Examples of how to assign the Colorbox event to elements
  $(".group1").colorbox({rel:'group1'});
  .
  .
  .

    With this:

    $(window).load(function(){
  //Examples of how to assign the Colorbox event to elements
  $(".group1").colorbox({rel:'group1'});
  .
  .
  .

    You can learn more about the difference between the two from this post: window.onload vs $(document).ready() or simply searching the web.