Question

我正在尝试在laravel中实现lightbox但它不会从灯箱css文件中加载箭头（左，右......）。当我点击图像时，我有一个问题，大小溢出1,2s，然后它出现在屏幕中心的正常大小（我有下面的图像）。箭头路径public / lightbox / img。

以下是我的代码

default.blade.php

   <title>My personal website</title>
   <link rel="shortcut icon" href="{{ asset('favicon.png') }}" >
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
   <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
   <link rel="stylesheet" href="{{ asset('css/style.css') }}" type="text/css"/>
   <link rel="stylesheet" href="{{ asset('css/lightbox.css') }}" type="text/css"/>

 </head>
 <body>

   <div class="container">
     <header>
       @include('template.partial.nav')
     </header>
      @yield('content')
   </div>

   @include('template.partial.footer')

   <!-- ***Scripts*** -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

   <!-- Add fancyBox -->
   <script type="text/javascript" src="js/lightbox.min.js"></script>

   <!-- Latest compiled and minified JavaScript -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   <script type="text/javascript" src="{{ asset('js/test.js') }}"></script>

 </body>
</html>

portfolio.blade.php

@extends('template.default')

@section('content')
<div id="portfolio">
     <div class="row">
       <p class="heading">Portfolio</p>
     </div>
     <div class="row">
       <div class="col-md-12">
         <p class="subheading">Java application</p>
         <hr>
         <h2 style="text-align:center">Lightbox</h2>
         <a data-lightbox="roadtrip" href="{{ asset('lightbox/img/demopage/rsz_java1.png') }}">
            <img src="{{ asset('lightbox/img/demopage/java1.png') }}" width="150" height="100">
         </a>
         <a data-lightbox="roadtrip" href="{{ asset('lightbox/img/demopage/rsz_java1.png') }}">
            <img src="{{ asset('lightbox/img/demopage/java1.png') }}" width="150" height="100">
         </a>
       </div>
      </div>

@endsection

控制台错误：

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)

提前致谢！

Answer 1

请将jQuery升级到最新版本（请参阅https://github.com/fancyapps/fancybox/issues/1504）

此外，fancyBox v3不使用任何图像，所有图标（包括加载动画）仅使用CSS创建。确保您没有混合多个灯箱脚本。

Lightbox在laravel应用程序中不起作用

1 个答案: