jkauflin/jjkgallery

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

v3.3.17 2024-01-14 19:12 UTC

MIT

• John J Kauflin

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 -->