Search code examples
ruby-on-railsasset-pipelinelightbox2

Lightbox2 broken images displaying on every page rails app

I've been having this problem all week and everything I've tried hasn't worked and I'm not even sure why it exists. (It's somewhat of a follow up to this question I posted.

I added lightbox2 js and css files to my rails 3.2.8 project.

I'm currently getting these errors on every page, in my local environment, (even pages I'm not calling lightbox in the markup) in the console-

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/assets/images/close.png

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/assets/images/laoding.gif

And broken image indicators being displayed on every page.

enter image description here

I hardcoded a path change to lightbox.js to appropriately retrieve aforementioned images and they work as they should when lightbox is used. 

  LightboxOptions = (function() {

    function LightboxOptions() {
      + this.fileLoadingImage = '/assets/loading.gif';
      + this.fileCloseImage = '/assets/close.png';
      - this.fileLoadingImage = 'images/loading.gif';
      - this.fileCloseImage = 'images/close.png';
      this.resizeDuration = 700;
      this.fadeDuration = 500;
      this.labelImage = "Image";
      this.labelOf = "of";
    }

I don't understand why I am getting these errors when I can clearly see the images working in my local environment. Another, curious thing is lightbox is still working without having to require it in application.js and application.css

Here is the output from my term-

Started GET "/assets/images/loading.gif" for 127.0.0.1 at 2013-01-06 12:36:31 -0800
Served asset /images/loading.gif - 404 Not Found (11ms)
ActionController::RoutingError (No route matches [GET] "/assets/images/loading.gif"):

and the same for close (but given screenshot it's obviously appearing)

enter image description here

application.js

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.ui.datepicker
//= require justgage
//= require raphael.min
//= require jquery.purr
//= require best_in_place
//= require_tree .

(shouldn't I need lightbox above?)

 *= require jquery.ui.datepicker
 *= require_self
 *= require bootstrap
 *= require_tree .
 */

(shouldn't I need lightbox above?)

Lightbox being used in the view. 

 <div class="row does_description_whole">
    <div class="row offset3">
      <div class="span3 does_description_text">
        <h4>Joe Popular</h4>
        <p>Lorem ipsum hipster bacon.</p>
      </div>
      <div class="span3">
        <a href="https://lh6.googleusercontent.com/picture/joe_does.png" rel="lightbox"><img src="https://lh3.googleusercontent.com/pciture/glance_town.png" class="does_pictures"></a>
      </div>
    </div>  
  </div

Edited lightbox.js for appropriate path

I don't understand why 1. Each page is GET requesting (to error) the images even though they are displaying appropraitely and 2. Why I don't need to require the lightbox files in application.js and application.css.

Thanks for your attention and for taking a look.

Solution

  • If you are about to use the assets pipeline , you should make references to images like this :

    = (link_to image_tag(pic.image_url(:thumb)), pic.image_url, :rel => "group2", :class => "lightbox") if pic.image?

    You could consider using of link_to helper instead of a href . The :rel => is specifying the source of images to browse .

    Normally , the reference to an image is in format : 

    url('yourpng.png')

    About why you should not include the lightbox in your manifests : You should include them , both in .js and .css manifest .

    SOLVED : And at the end of the day , it was as simple as rm -rf public/assets (@Tmacram shared the right solution with us).