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.
Below is my code
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
Console errors:
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)
Thanks in advance!
Please, upgrade jQuery to the latest (see https://github.com/fancyapps/fancybox/issues/1504)
Also, fancyBox v3 does not use any images, all icons (including loading animation) are created using CSS only. Make sure you are not mixing multiple lightbox scripts.
Related
This is the structure of the views folder:
/layout
header.blade.php
footer.blade.php
template.blade.php
index.blade.php
header content:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="{{ asset('img/favicon.png') }}">
<link rel="apple-touch-icon" href="{{ asset('img/favicon.png') }}">
<title>#yield('title')</title>
</head>
<body>
footer:
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('js/custom.js') }}"></script>
#stack('scripts')
</body>
</html>
template:
#include('layout.header')
#yield('content')
#include('layout.footer')
index:
#extends('layout.template')
#section('title', 'Title')
#section('content')
<div>Content</div>
#endsection
When I inspect the html that's how the structure looks like:
<html>
<head></head>
<body>
<link rel="icon" href="http://localhost/project/public/img/favicon.png">
<title>testing</title>
<div>Test</div>
<script src="http://localhost/project/public/js/jquery-3.6.0.min.js"></script>
<script src="http://localhost/project/public/js/custom.js"></script>
</body>
</html>
This causes the favicon not to be displayed.
How to fix this issue?
You are making this much more complicated then it needs to be. You can use the #extend method to use a template file. I would make it like this:
/layouts/app.blade.php
index.blade.php
<!-- app.blade.php -->
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="{{ asset('img/favicon.png') }}">
<link rel="apple-touch-icon" href="{{ asset('img/favicon.png') }}">
<title>#yield('title', 'Title')</title>
</head>
<body>
#yield('content')
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('js/custom.js') }}"></script>
</body>
</html>
<!-- index.blade.php -->
#extends('layouts.app')
#section('title, 'My Page Title')
#section('content')
<div>
<!-- Go crazy -->
<!-- Everything in here will take place of the #yield('content') area -->
<!-- in the app.blade.php file -->
</div>
#endsection
I have a table "karyawans" which contains 104 data and i want to display it all in a datatable. i have done all manual from datatable and here is the result
![datatable result][1]
here is my data
![my data][2]
here is the view
#extends('layout.main')
#section('container')
<!-- page content -->
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3><small>Daftar karyawan yang telah ditambahkan</small></h3>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">
<h2>Karyawan <small>Users</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false"><i class="fa fa-wrench"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Settings 1</a>
</div>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="row">
<div class="col-sm-12">
<div class="card-box table-responsive">
<table id="datatable" class="table table-striped table-bordered"
style="width:100%">
<thead>
<tr>
<th>NIK</th>
<th>Nama</th>
<th>Username</th>
<th>Email</th>
<th>Unit</th>
<th>Jabatan</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach ($karyawans as $karyawan)
<tr>
<td>{{ $karyawan->nik }}</td>
<td>{{ $karyawan->nama }}</td>
<td>{{ $karyawan->username }}</td>
<td>{{ $karyawan->email }}</td>
<td>{{ $karyawan->unit }}</td>
<td>{{ $karyawan->jabatan }}</td>
<td>
<div class="row d-flex justify-content-center">
Ubah
Hapus
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
and here is where I store the css and js
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{{ asset('images/rs.png') }}" type="image/png" />
<title>Sistem Manajemen Pekerjaan </title>
<!-- Bootstrap -->
<link href="{{ asset('../vendors/bootstrap/dist/css/bootstrap.min.css') }}" type="text/css"
rel="stylesheet">
<!-- Font Awesome -->
<link href="{{ asset('../vendors/font-awesome/css/font-awesome.min.css') }}" type="text/css"
rel="stylesheet">
<!-- NProgress -->
<link href="{{ asset('../vendors/nprogress/nprogress.css') }}" type="text/css" rel="stylesheet">
<!-- iCheck -->
<link href="{{ asset('../vendors/iCheck/skins/flat/green.css') }}" rel="stylesheet">
<!-- bootstrap-progressbar -->
<link
href="{{ asset('../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css') }}"
type="text/css" rel="stylesheet">
<!-- JQVMap -->
<link href="{{ asset('../vendors/jqvmap/dist/jqvmap.min.css') }}" rel="stylesheet" />
<!-- bootstrap-daterangepicker -->
<link href="{{ asset('../vendors/bootstrap-daterangepicker/daterangepicker.css') }}"
type="text/css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="{{ asset('../build/css/custom.min.css') }}" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="{{ asset('//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css') }}">
{{-- <link rel="stylesheet" type="text/css"
href="{{ asset('https://cdn.datatables.net/v/bs5/dt-1.11.3/af-2.3.7/b-2.0.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.0/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.0/sp-1.4.0/sl-1.3.3/datatables.min.css') }}"> --}}
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
#include('partial.nav_bar')
<!-- top navigation -->
#include('partial.top_nav')
<!-- /top navigation -->
<!-- page content -->
<div class="container">
#yield('container')
</div>
<!-- /page content -->
<!-- footer content -->
#include('partial.footer')
<!-- /footer content -->
</div>
</div>
<!-- jQuery -->
<script type="text/javascript" src="{{ asset('../vendors/jquery/dist/jquery.min.js') }}">
</script>
<!-- Bootstrap -->
<script type="text/javascript"
src="{{ asset('../vendors/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
<!-- FastClick -->
<script type="text/javascript" src="{{ asset('../vendors/fastclick/lib/fastclick.js') }}">
</script>
<!-- NProgress -->
<script type="text/javascript" src="{{ asset('../vendors/nprogress/nprogress.js') }}"></script>
<!-- Chart.js -->
<script type="text/javascript" src="{{ asset('../vendors/Chart.js/dist/Chart.min.js') }}">
</script>
<!-- gauge.js -->
<script type="text/javascript" src="{{ asset('../vendors/gauge.js/dist/gauge.min.js') }}">
</script>
<!-- bootstrap-progressbar -->
<script type="text/javascript"
src="{{ asset('../vendors/bootstrap-progressbar/bootstrap-progressbar.min.js') }}"></script>
<!-- iCheck -->
<script type="text/javascript" src="{{ asset('../vendors/iCheck/icheck.min.js') }}"></script>
<!-- Skycons -->
<script type="text/javascript" src="{{ asset('../vendors/skycons/skycons.js') }}"></script>
<!-- Flot -->
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.pie.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.time.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.stack.js') }}">
</script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.resize.js') }}">
</script>
<!-- Flot plugins -->
<script type="text/javascript"
src="{{ asset('../vendors/flot.orderbars/js/jquery.flot.orderBars.js') }}"></script>
<script type="text/javascript"
src="{{ asset('../vendors/flot-spline/js/jquery.flot.spline.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/flot.curvedlines/curvedLines.js') }}">
</script>
<!-- DateJS -->
<script type="text/javascript" src="{{ asset('../vendors/DateJS/build/date.js') }}"></script>
<!-- JQVMap -->
<script type="text/javascript" src="{{ asset('../vendors/jqvmap/dist/jquery.vmap.js') }}">
</script>
<script type="text/javascript"
src="{{ asset('../vendors/jqvmap/dist/maps/jquery.vmap.world.js') }}"></script>
<script type="text/javascript"
src="{{ asset('../vendors/jqvmap/examples/js/jquery.vmap.sampledata.js') }}"></script>
<!-- bootstrap-daterangepicker -->
<script type="text/javascript" src="{{ asset('../vendors/moment/min/moment.min.js') }}"></script>
<script type="text/javascript"
src="{{ asset('../vendors/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<!-- Custom Theme Scripts -->
<script type="text/javascript" src="{{ asset('../build/js/custom.min.js') }}"></script>
<!-- dataTables -->
<script type="text/javascript"
src="{{ asset('//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js') }}">
$(document).ready(function() {
$('#datatable').DataTable();
});
</script>
{{-- <script type="text/javascript"
src="{{ assset('https://cdn.datatables.net/v/bs5/dt-1.11.3/af-2.3.7/b-2.0.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.0/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.0/sp-1.4.0/sl-1.3.3/datatables.min.js') }}">
</script> --}}
</body>
</html>
here is the KaryawanController
public function daftar_karyawan()
{
return view('karyawans', [
"karyawans" => Karyawan::first()->filter(request(['cari']))->orderBy('id', 'asc')
->paginate(10)->withQueryString()
]);
}
FYI, I try to use the manual paginaton and searching before i know the 'datatables'
and this is the route
Route::get('/daftar_karyawan', [KaryawanController::class, 'daftar_karyawan']);
``
Sorry if there is an mistake in writing my question, because I am new to this forum and this is my first question, thank you
[1]: https://i.stack.imgur.com/GGQID.png
[2]: https://i.stack.imgur.com/R2X22.png
Remove Paginate(10) and replace with get() in KaryawanController
public function daftar_karyawan()
{
return view('karyawans', [
"karyawans" => Karyawan::first()->filter(request(['cari']))->orderBy('id', 'asc')
->get()
]);
}
You can't use Paginate() for the datatable because it will limit to 10 :)
Just use get() and datatable will auto paginate !
ps:
If retrieving more than 1000 rows then there is a high chances system will load slow. Recommended to use AJAX to prevent this issue :)
I have a blade file thanks.blade.php where I put two sessions grand_total and order_id. When I refresh the page session still exists.
I want when I refresh the page the session should be destroyed. I have written the session forget code at the end. Is it correct? I think it's not correct then how to write it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Thanks</title>
<link href="{{ url('css/front_css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/font-awesome.min.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/prettyPhoto.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/price-range.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/animate.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/main.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/responsive.css') }}" rel="stylesheet">
<!--[if lt IE 9]>
<script src="{{ url('js/front_js/html5shiv.js') }}"></script>
<script src="{{ url('js/front_js/respond.min.js') }}"></script>
<![endif]-->
<!-- favicon -->
<link rel="icon" type="image/png" sizes="192x192" href="{{ asset('images/ico/android-icon-192x192.png')}}">
</head>
<!--/head-->
<body>
<!-- Header Part -->
#include('layouts.front_layout.front_header')
<div class="jumbotron text-center">
<h1 class="display-3">Thank You!</h1>
<p class="lead"><strong>Your Order Is Successfully Place</strong></p>
<p class="lead">Your Order number is {{Session::get('order_id')}} and grand total is PK. {{Session::get('grand_total')}}</p>
<hr>
<p>
<strong>Please check your email</strong> for further instruction. Having trouble? Contact us
</p>
<p class="lead">
<a class="btn btn-primary btn-sm" href="{{url('/')}}" role="button">Continue to homepage</a>
</p>
</div>
<!--/Footer-->
#include('layouts.front_layout.front_footer')
<script src="{{ url('js/front_js/jquery.js') }}"></script>
<script src="{{ url('js/front_js/bootstrap.min.js') }}"></script>
<script src="{{ url('js/front_js/main.js') }}"></script>
</body>
</html>
<php Session::forget('grand_total'); Session::forget('order_id'); ?>
You have to use following code below
#php
Illuminate\Support\Facades\Session::forget('grand_total');
Illuminate\Support\Facades\Session::forget('order_id');
#endphp
It is working fine for me. I have just now used in my project.
I'm trying to use the package bootstrap-datetimepicker. I had already followed the installation tutorial. But I couldn't accomplish to get it to work. I imported the files required into app\publicfolder as well.
My Folder Structure
public folder structure
My blade file
<html>
<head>
<title>Laravel Bootstrap Datepicker</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- JS AND CSS -->
<script type="text/javascript" src="{{ URL::asset('js/jquery-3.3.1.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/moment.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('js/bootstrap.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/bootstrap-datetimepicker.js')}}"></script>
<link href="{{ asset('css/bootstrap.css')}}" rel="stylesheet">
<link href="{{ asset('css/bootstrap-datetimepicker.css')}}" rel="stylesheet">
</head>
<body>
<!-- DATATIME PICKER CODE -->
<img src="{{asset('goku.jpg')}}" alt="Mountain View">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<input type='text' class="form-control " />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker5').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
</script>
</div>
</div>
</body>
</html>
My Result
The result I'm getting is this, an import with a fail icon. And nothing showing up while clicking.
I have a fresh installed laravel project with all the components updated.
All I did is tried to add app.js in my welcome.blade.php file, after adding the following I get this error
[Vue warn]: Cannot find element: #app
I followed this thread, but it's not relevant as my script is at the bottom of the page.
https://laracasts.com/discuss/channels/vue/fresh-laravel-setup-and-vue-2-wont-work
Here's my file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{$project}} | {{ $title }}</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet" type="text/css"/>
<style>
...
</style>
</head>
<body class="sticky-nav">
<div id="nav">
<div class="display-sm">
<header class="top-header">
<span class="menu-icon">☰</span>
</header>
</div>
<div class="custom-container">
<div id="logo" class="float-left">
<img alt="xyz" src="/images/xyz.png"/><span> xyz</span>
</div>
<div id="btn-project" class="float-right">
<a title="project" href="#" class="btn btn-project">Project</a>
</div>
</div>
</div>
<div class="sub-container">
<h1 id="header-title">{{ $header_title }}</h1>
<h2 id="meta-data"><i class="fa fa"></i>{{$location}} <span id="category"> <i></i>{{$category}} </span></h2>
<div class="clear"></div>
</div>
<script src="/js/app.js"></script>
<script>
var wrap = $(".sticky-nav");
wrap.on("scroll", function (e) {
if (this.scrollTop > 147) {
wrap.find('#nav').addClass("fix-nav");
} else {
wrap.find('#nav').removeClass("fix-nav");
}
});
</script>
</body>
</html>
Error says it all. Vue can't find #app element, so you need to add it:
<div id='app'></div>
https://v2.vuejs.org/v2/guide/
Sometime everything seems got , but we are still getting same error then you have to copy this code and paste in app. blade.
<head>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
.
.
.
.
.
.
</div>
</body>
Verify that your main design file app.blade.php contains a div with the app id just after the <body> tag just like this:
<body>
<div id="app">
.
.
.
</div>
</body>