Thread

So I have been trying to get colorbox to work with our install

I got it to the point where it looks that it tries to open the image in the box, but it does not, pretty much nothing happens, then its seems to get stuck and the other links wont do anything anymore.

We want to use it to make some pics on the site be clickable to make them bigger and see more detail.

The developer that we used, is of no help, I feel they should have done this for us, among other things, but that is another story.

I figured linking to my test page is the best way for everyone to see what it is doing

http://aidsresearch.org/news-events/news/test

Ive hard coded the paths to the test pics, I copied/pasted one of their examples

this page is not live on the site, nor is the listing page for this,  the rest of the site is.

any help or pointers are greatly appreciated.

thanks
-bb

Hello bb,

I use colorbox extensively on our site successfully.

It looks like you’ve got some path-file mismatches. Your colorbox script is working fine, but it’s not showing you the result, because it’s looking for the files in the wrong places.

Take a look at this file:

http://aidsresearch.org/colorbox/colorbox.css

All of the references to your images are using “relative” paths (it tries to find the file “relative” to the current location… BUT because ExpressionEngine uses URL segments to load the correct template group and template, the browser tries to find your images in directories that just don’t exist - sorry, if my explanation is confusing… it’s a simple issue, with a complex explanation)

For example, in colorbox.css you have this code:

#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}

Your page is not finding that overlay.png anywhere (I poked around with different paths and couldn’t find it either…)

Each of the images in the css should use paths that are relative to the root of the domain:

#cboxOverlay{background:url(/images/overlay.png) repeat 0 0;}

Or you might organize your files with a little bit of structure to help you out:

webroot -> index.php
           /themes/
           /system/
           /assets/images/colorbox/
           /assets/css/colorbox/
           /assets/js/colorbox/

This way, you can keep things clean and organized - which will save you much heartache down the road (my structure is fine, there are plenty of other ways to organize your files - however you see fit)

....

To start troubleshooting your issue:

1.  Use a browser with some developer tools (Chrome, Firefox+Firebug, Safari)
2.  Watch the developer tool called “console” - which is a useful method of seeing exactly what is going wrong with your page.
3.  Also take a look at the “network” tab of your developer tools - this will show you what was attempted to be downloaded… and (more importantly) what failed to download.  This is the key indicator to check that files are being looked for in the right place and being downloaded.
4.  Ensure your colorbox files are on your server.
5.  Update your colorbox.css to download the files correctly.

Let us know what you find, and if you need any further guidance.

I hope this helps

Hey BB,

Mark has given a lot of great info for you to troubleshoot this.

Once you get your paths updated, let me know if you’re still having issues.

Thanks.

ps) moving this over to the Community Help forum.

thanks for the reply,

I failed to upload the actual images folder, fixed the paths for them as well.

Now what its doing opening the box, but the actual picture and content is not loading

it seems the box is the correct size for the content, but the it just does not load.

this is what I have in there
I see no errors in console,

<!-- colorbox start-->

 <link rel="stylesheet" href="http://aidsresearch.org/colorbox/colorbox.css" />

        [removed][removed]
        [removed][removed]



        [removed]
            jQuery(document).ready(function () {
                jQuery('a.gallery').colorbox({ opacity:0.5 , rel:'group1' });
            });
        [removed]
[removed]
   $(document).ready(function(){
    //Examples of how to assign the ColorBox event to elements
    $(".group1").colorbox({rel:'group1'});
    $(".group2").colorbox({rel:'group2', transition:"fade"});
    $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
    $(".group4").colorbox({rel:'group4', slideshow:true});
    $(".ajax").colorbox();
    $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
    $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
    $(".inline").colorbox({inline:true, width:"50%"});
    $(".callbacks").colorbox({
     onOpen:function(){ alert('onOpen: colorbox is about to open'); },
     onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
     onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
     onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
     onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
    });
    
    //Example of preserving a JavaScript event for inline calls.
    $("#click").click(function(){ 
     $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
     return false;
    });
   });
  [removed]


<!-- colorbox end-->

all the other jquery on the site appears to be working the way it is supposed to.

and if I where to do a page not in EE it works

-bb