title: Lightbox doesn't work in laravel app
body: <p>I am trying to implement lightbox in laravel but it doesn't load the arrows(left,right ...) from the lightbox css file.With Fancybox i have an issue when i click on the image, the size overflows for 1,2s and then it appears at the normal size in the center of the screen(I have image below).The arrows path public/lightbox/img.</p>
  
  <p>Below is my code</p>
  
  <p>default.blade.php</p>
  
  <pre><code>   &lt;title&gt;My personal website&lt;/title&gt;
     &lt;link rel="shortcut icon" href="{{ asset('favicon.png') }}" &gt;
     &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
     &lt;link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
     &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;
     &lt;link rel="stylesheet" href="{{ asset('css/style.css') }}" type="text/css"/&gt;
     &lt;link rel="stylesheet" href="{{ asset('css/lightbox.css') }}" type="text/css"/&gt;
  
   &lt;/head&gt;
   &lt;body&gt;
  
     &lt;div class="container"&gt;
       &lt;header&gt;
         @include('template.partial.nav')
       &lt;/header&gt;
        @yield('content')
     &lt;/div&gt;
  
     @include('template.partial.footer')
  
     &lt;!-- ***Scripts*** --&gt;
     &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
     &lt;!-- Add fancyBox --&gt;
     &lt;script type="text/javascript" src="js/lightbox.min.js"&gt;&lt;/script&gt;
  
     &lt;!-- Latest compiled and minified JavaScript --&gt;
     &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
     &lt;script type="text/javascript" src="{{ asset('js/test.js') }}"&gt;&lt;/script&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>portfolio.blade.php</p>
  
  <pre><code>@extends('template.default')
  
  @section('content')
  &lt;div id="portfolio"&gt;
       &lt;div class="row"&gt;
         &lt;p class="heading"&gt;Portfolio&lt;/p&gt;
       &lt;/div&gt;
       &lt;div class="row"&gt;
         &lt;div class="col-md-12"&gt;
           &lt;p class="subheading"&gt;Java application&lt;/p&gt;
           &lt;hr&gt;
           &lt;h2 style="text-align:center"&gt;Lightbox&lt;/h2&gt;
           &lt;a data-lightbox="roadtrip" href="{{ asset('lightbox/img/demopage/rsz_java1.png') }}"&gt;
              &lt;img src="{{ asset('lightbox/img/demopage/java1.png') }}" width="150" height="100"&gt;
           &lt;/a&gt;
           &lt;a data-lightbox="roadtrip" href="{{ asset('lightbox/img/demopage/rsz_java1.png') }}"&gt;
              &lt;img src="{{ asset('lightbox/img/demopage/java1.png') }}" width="150" height="100"&gt;
           &lt;/a&gt;
         &lt;/div&gt;
        &lt;/div&gt;
  
  @endsection
  </code></pre>
  
  <p>Console errors:</p>
  
  <pre><code>portfolio:1 GET http://{projectname}/img/next.png 404 (Not Found)
  portfolio:1 GET http://{projectname}/img/close.png 404 (Not Found)
  portfolio:1 GET http://{projectname}/img/loading.gif 404 (Not Found)
  portfolio:1 GET http://{projectname}/img/prev.png 404 (Not Found)
  </code></pre>
  
  <p>Thanks in advance!
  <a href="https://i.stack.imgur.com/Z3b5p.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z3b5p.jpg" alt="enter image description here"></a></p>