2017-08-15 3 views
0

Lightboxをlaravelに実装しようとしていますが、ライトボックスCSSファイルから矢印(左、右...)をロードしません.Fancyboxを使用して、画像上では、サイズが1,2秒間オーバーフローし、画面の中央に通常のサイズで表示されます(下の画像があります)。矢印パスpublic/lightbox/img。事前にLightboxはlaravelアプリケーションでは動作しません

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) 

ありがとう:

以下は私のコード

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 

コンソールでのエラーです! enter image description here

+0

あなたは矢印の画像フォルダがpublic/lightbox/imgだと言っています。 あなたがコンソールでエラーが発生した場合、画像はpublic/imgで検索されるので、lightbox.min.jsでパスを編集するか、public/lightbox/imgフォルダをpublic/imgに移動します –

+0

矢印はcssファイルから呼び出されます、jsファイルはcssクラスを使用します。 –

+0

ライトボックスはうまく動作します。唯一の問題は、上記の画像からわかるように、イメージサイズのオーバーフローです。 –

答えて

1

は、唯一のCSSを使用して作成され

また、fancyBox v3は任意の画像、(ロードアニメーションを含む)すべてのアイコンを使用していない(https://github.com/fancyapps/fancybox/issues/1504を参照)、最新のjQueryのをアップグレードしてください。複数のライトボックススクリプトを混ぜていないことを確認してください。

関連する問題