Question

I’m attempting to implement a jQuery Lightbox plugin into a portfolio site build on CodeIgniter. I can get the lightbox to load and show up when an image is clicked. However, the images that should show (like close, next, prev, etc) are not loading in the light box.

<script src="<?php echo base_url(); ?>js/libs/jquery-1.6.2.js"></script>
<script src="<?php echo base_url(); ?>js/jquery.lightbox-0.5.min.js"></script>
<script type="text/javascript">
    $(function() {
      $('a.lightbox').lightBox(); // Select all links with lightbox class
    });
</script>

I’ve also tried altering the file path for the images in the .js file but it’s returning broken links. Is there some sort of of url helper that points javascript in the right direction or am I in the wrong folder? I’ve tried root, js folder (same folder as the script), and the views folder.

Answer 1

The easiest way is to run Firebug and look in the Net tab for the images that aren’t being found, then correct the paths either by moving the files there, or changing the paths in the code.

I assume that you have the lightbox CSS file included (I don’t see it in your code above)

You can also specify the locations for the required images when calling the lightbox like so:

<script type="text/javascript">
    $(function() {
      $('a.lightbox').lightBox({
         'imageLoading': "<?php echo site_url(); ?>images/lightbox-ico-loading.gif",
         'imageBtnClose': "<?php echo site_url(); ?>images/lightbox-btn-close.gif",
         'imageBtnPrev': "<?php echo site_url(); ?>images/lightbox-btn-prev.gif",
         'imageBtnNext': "<?php echo site_url(); ?>images/lightbox-btn-next.gif",
         'imageBlank': "<?php echo site_url(); ?>images/lightbox-blank.gif"
      }); // Select all links with lightbox class
    });
</script>

the variables for this are listed here.