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
あなたは矢印の画像フォルダがpublic/lightbox/imgだと言っています。 あなたがコンソールでエラーが発生した場合、画像はpublic/imgで検索されるので、lightbox.min.jsでパスを編集するか、public/lightbox/imgフォルダをpublic/imgに移動します –
矢印はcssファイルから呼び出されます、jsファイルはcssクラスを使用します。 –
ライトボックスはうまく動作します。唯一の問題は、上記の画像からわかるように、イメージサイズのオーバーフローです。 –