README

HTML5 JavaScript PHP 动态媒体画廊，用于照片、YouTube链接、MP3文件和PDF文档

它将根据文件结构和文件动态构建菜单、导航路径和缩略图

照片画廊基于 blueimp库

音乐为纯HTML5音频

视频使用包含YouTube链接的文本文件

目前依赖于Bootstrap 5，并在主页面中包含Font Awesome图标

入门

1. 将您的文件放在Web根目录的Media文件夹中，包含以下文件夹

Media
    Docs
    images
    Music
    Photos
    Videos

1. 将以下依赖项添加到 composer.json 中，从 packagist.org 拉取包

{
    "require": {
        "jkauflin/jjkgallery": "^2.1.0"
    }
}

1. 将mediagallery JavaScript文件添加到根网页

    <script src="vendor/jkauflin/jjkgallery/mediagallery.js?ver=1.003"></script>

1. 添加带有data-dir和MediaPage引用的导航链接

    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#MediaPage" data-dir="Photos"><i class="fa fa-camera"></i> Photos</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#MediaPage" data-dir="Videos" ><i class="fa fa-video-camera"></i> Videos</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#MediaPage" data-dir="Music"><i class="fa fa-music"></i> Music</a></li>
        </ul>
    </div>

1. 添加包含以下DIV部分的MediaPage标签页

	<div class="tab-pane" id="MediaPage">
        <div class="row">
			<div class="col-sm-5 col-md-3 d-none d-sm-block">
				<h4 id=MediaHeader></h4>
				<div id="MediaMenu" class="panel-group"></div>
			</div>
			<div class="col-sm-7 col-md-9">
                <div id="MediaConfig" class="float-right m-2"></div>
				<ol id="MediaBreadcrumbs" class="breadcrumb mt-2 p-1"></ol>
				<div id="MediaFolders"></div>
                <div id="MediaThumbnails"></div>
            </div>
		</div><!-- row -->	                
	</div><!-- end of Detail -->