layui圖片顯示


有些東西看文檔可以實現,但當真不如自己寫的實在。所以還是記錄下來吧。

1. 圖片賦值

    <div id="layer-photos-demo" class="layer-photos-demo" style="padding: 10px;">
        @if(empty($classroomSnapShots))
            無數據
        @else
            @foreach($classroomSnapShots as $pictureUrl)
                <img layer-src={{$pictureUrl}} src={{$pictureUrl}}
                     width="400px" height="224px" style="margin: 3px; border: black 2px"  ;/>

            @endforeach
        @endif

    </div>

2. 調用layui.photos

    <script>
        var $;
        var layer;
        layui.use(['element', 'jquery', 'form', 'layer'], function() {
            $ = layui.jquery;
            layer = layui.layer;

            layer.photos({
                photos: '#layer-photos-demo'
                , anim: 5 //0-6的選擇,指定彈出圖片動畫類型,默認隨機(請注意,3.0之前的版本用shift參數)
            });
        });
    </script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM