Laravel-admin uses the Layer album function

Using the Laravel-admin background, Laravel-admin has integrated many front-end components, but there is no plug-in that can display albums in the manual, and I prefer the plug-in of the Layer pop-up window, so I want to use the Layer to display the effect.

After reading the manual, I found that Laravel-admin can define components by itself. But I am not strong enough. can not read it. . . .

Fortunately, in addition to custom components, you can also import front-end resources

About front-end resources
If you need to use your own front-end files, you can introduce them in app /Admin/bootstrap.php :

Admin::css('path/to/your/css');
Admin::js('path/to/your/js');

The above is introduced from the FAQ in the Laravel-admin manual. Click view the link http://laravel-admin.org/docs/#/zh/qa

So download the Layer resource to the local, and then put it in the public directory in Laravel to download my version 3.1

Then introduce it in app/Admin/bootstrap.php

use Encore\Admin\Facades\Admin;
Admin::js('/layer-v3.1.1/layer-v3.1.1/layer/layer.js');

I downloaded the layer-v3.1.1 version, so please modify the directory here according to your own response

Then you can use the layer function directly in the controller

The following is an example of the layer album function I made

First add the pop-up album function button

$grid->actions(function ($action) {
       $action->append('<a href="' . LayerPhoto(url('admin/scenic/get/photo'),1) . '"><i class="fa fa-eye"></i>查看相册</a>');
  });

LayerPhoto in the above code is a custom function

/*
     * LayerPhoto layer album use
     * $url Get the address of the data
     * url address return format:
     * [
     *      'title' => '',
     *      'id' => 1,
     *      'start' => 0
            [
                'alt' => 'picture title 1',
                'src' => 'image address'
            ],
            [
                'alt' => 'picture title 2',
                'src' => 'image address'
            ],
            [
                'alt' => 'image title 3',
                'src' => 'image address'
            ],
        ]
     *
     * $type popup style for albums
     */
function LayerPhoto($url,$type = 1)
{
    $script = "javascript:$.getJSON('{ $url }',function(json){layer.photos({photos: json,anim :{ $type }});});" ; //Not available here There must be no spaces in the line display
     return  $script ;
}

As for the explanation of the custom function function

First create the function PHP file app/custom directory/custom filename.php

Write custom functions in this file
Then add or modify files
 "autoload" in autoload 
in composer.json : {
          ···
        "psr-4": {
            "App\\": "app/"
        },
        "files": [
             "app/custom directory/custom filename.php"
        ]
    },
then execute
    composer dump-autoload即可

After that, the layer album function can be displayed.

The other Layer pop-up functions can be handled in the same way.

The above is my own idea. I can also realize the pop-up window function of the layer. I don’t know if there is a more convenient way to achieve it. If you want to leave a message and let me know, thank you very much.

Laravel-admin uses the Layer album function

Guess you like