2

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.

4 Answers 4

0

Well, it looks like you're building your URL right. According to your code, JS folder is on the same level of application folder. Make sure it's the right path for you!

  • APPLICATION (<?php echo base_url();?>application/)
  • SYSTEM
  • JS (<?php echo base_url();?>js/);
  • index.php

You might also want to check if an .htaccess is preventing you from accessing that folder (IIRC the package comes with a "Deny from all" .htaccess rule, but inside the application folder. If you have a custom, modified .htaccess that might be preventing the images to show).

And, as noted by Steve Lewis, check in Firebug, or in the Dev Tools of IE or Chrome (usually F12 on the keyboard) if the NET tab, or something analogue, shows you a 404 for the resources.
Did you try viewing the source and clicking on the script links? Did you try accessing your images directly in your browser?

0

Same problem here, found the solution in this forum: http://forums.modx.com/index.php?topic=44367.0

Changing the CSS file did nothing, however I noticed that the "close" GIF that I was missing was not specified in the stock lightbox.css file either. This led me to look at lightbox_lang_en.js, where I discovered that the paths to the images did not have leading slashes, making the browser look for them in the wrong place. I added leading slashes and it started working. Here’s my modified lightbox_lang_en.js:

0

problem is button image paths are broken. solution is edit lightbox.js core file and fix image. fix background-image property for (lb-next,lb-prev,lb-close,lb-load) classes. in my case i cleared one ../

2
  • Editing the core files never actually sounds like a good idea!
    – dferenc
    Dec 29, 2017 at 19:10
  • yes i agree with u. if not overwrite background-image property with javascript will work.
    – Tara
    Dec 31, 2017 at 18:43
-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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.