定制 jkauflin/jjkgallery 二次开发

按需修改功能、优化性能、对接业务系统,提供一站式技术支持

邮箱:yvsm@zunyunkeji.com | QQ:316430983 | 微信:yvsm316

jkauflin/jjkgallery

Composer 安装命令:

composer create-project jkauflin/jjkgallery

包简介

Web Media Gallery display for photos, videos, music, and docs

README 文档

README

HTML5 Javascript PHP dynamic media gallery for photos, youtube links, MP3 files, and PDF docs

It will dynamically build menus, breadcrumbs, and thumbnails based on the file structure and files

Photo gallery is based on blueimp library

Music is straight HTML5 Audio

Video uses a text file with YouTube links

Currently dependent on Bootstrap 5, and Font Awesome icons being included in the main page

Getting Started

  1. Put your files in a Media folder on the web root with the following folders:
Media
    Docs
    images
    Music
    Photos
    Videos
  1. Add the following dependencies to composer.json to pull in the package from packagist.org
{
    "require": {
        "jkauflin/jjkgallery": "^2.1.0"
    }
}
  1. Add the mediagallery javascript file to the root web page:
    <script src="vendor/jkauflin/jjkgallery/mediagallery.js?ver=1.003"></script>
  1. Add navigation link with data-dir and MediaPage references:
    <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. Add a MediaPage tab-pane with the following DIV sections
	<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 -->

统计信息

  • 总下载量: 167
  • 月度下载量: 0
  • 日度下载量: 0
  • 收藏数: 1
  • 点击次数: 2
  • 依赖项目数: 0
  • 推荐数: 0

GitHub 信息

  • Stars: 1
  • Watchers: 1
  • Forks: 0
  • 开发语言: JavaScript

其他信息

  • 授权协议: MIT
  • 更新时间: 2020-12-12

承接程序开发

PHP开发

VUE

Vue开发

前端开发

小程序开发

公众号开发

系统定制

数据库设计

云部署

网站建设

安全加固