MulticolumnGallery

Description
Features
[Gallery Example](#Gallery Example)
Requirements
Setup
Resizing Images
Documentation
License

Description

Dynamic, customizable and responsive image gallery made with PHP and JS.
Show your best pictures to the world with a very minimalistic approach. No picture raiting, nor comments or taggin so your pictures stay in the spotlight!

Features

Lightweight
Responsive
Lazy loading
No database needed
Supports any number of columns
Use picture sizes that suits you best
Position your gallery via a simple config file

Gallery Example

Gallery Demo

Requirements

Webserver with php or if you want to run it on localhost you need a server (like Xampp).

Setup

Clone or download and unzip the repository. Browse the "dist/"-folder and copy those file into your project or website.
Get the following lines into your HTML document. Make sure that the includes are the right order and placed just befor the closing </body> tag! (JQuery has to be loaded befor the javascript files if you already have jquery on your site dont include it twice)

<!-- JQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Gallery core JS file -->
<script src="yourPath/multiColumn.min.js" type="text/javascript"></script>

If you want a Lightbox (see http://dimsemenov.com/plugins/magnific-popup/ for more infos or help) for your images enabled, include the following files into your HTML document: (make sure to have JQuery included befor the script tag)

<head>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="assets/magnific-popup/magnific-popup.css"> 
</head>

<!-- make sure to have JQuery included befor this script tag -->
<!-- Magnific Popup core JS file -->
<script src="assets/magnific-popup/magnific-popup.js"></script> 
</body>
</html>

Add the following div-box into your HTML document

<div id="gallery" class="popup-gallery">

    <script src="assets/magnific-popup/magnific.js"></script>
    
</div><!-- ./popup-gallery -->

Customize your gallery through the config file placed in /config/config.json
See Section: Documentation for more Information on how to use the config file.
Add Images and Thumbnail into the appropriate folders:

Image files dimensions should be 1600*1200 max to increase performance.
Supported image formats are png, jpg.
Thumbnails can be named yourPrefix_imagename, imagename_yourPostfix or a combination of both.
If you want to place your thumbnails in the same folder as your images, make sure they are pre or postfixed
If you place them in an seperat folder they do not need a pre or postfix at all.

Resizing Images

When using a Unix system you can easily resize the images and create thumbnails on the fly with just one simple bash command provided by ImageMagick. Normally Unix comes with ImageMagick already installed you can check this by typing $ identify -version.

Make a backup of your images befor you run this command! If your pictures are in another file format, change *.jpg to the format you like e.g. *.png

$ mkdir images; ls *.jpg | xargs -r -I FILE   convert FILE -auto-orient -unsharp 0x0.5 -resize 1600x1200 -strip images/FILE && mkdir thumbs; ls *.jpg | xargs -r -I FILE   convert FILE -define jpeg:size=760x760 -auto-orient -thumbnail 300 -unsharp 0x0.5 -strip thumbs/thumb_FILE

Documentation

A short documentation for the config.json file:

{
  "your_image_directory_path": "assets/images/",        // Your folder containing your images

  "your_thumbnail_directory_path": "assets/thumbs/",    // Your folder containing the *thumbnails (*smaller
                                                        // versions of your pictures)
                                                        // Thumbnails can be placed in the same folder
                                                        //   then your images if you pre or postfix them

  "thumbnail_prefix": "thumb_",                         // Your prefix e.g thumb_myimage.jpg

  "thumbnail_postfix": "",                              // Your postfix e.g myimage_thumb.jpg

  "number_of_columns": "5",                             // How many columns you would like to have

  "thumbnail_width": "300",                             // The image width of your thumbnails

  "space_between_pictures": "10",                       // The white space between the pictures

  "margin_left": "10",                                  // Spacing to the left border of your screen

  "margin_left_hd": "180",                              // On bigger screens you can set an extra margin to
                                                        //   center the gallery

  "margin_top": "70",                                   // Spacing from top till the beginning of the gallery

  "margin_right": "0",                                  // Margin to right border of the screen

  "center_column": "yes",                               // Yes / No, centeres the gallery if you have 5 columns

  "resize_columns": "yes",                              // Yes / No, disables responsive behavior

  "fade_in_pictures": "yes",                            // On scrolling down the page you get an fade in animation
                                                        // disalbe this option if you have performance issues.

  "shuffle_pictures": "no",                             // Yes / No, Shuffles pictures to always display
                                                        // different ones on page reload or if a user revisits 
                                                        // your site. If value "No" is chosen the pictures are 
                                                        // sorted by their names

  "sort_pictures_after_date_taken": "yes"               // Yes / No If your pictures got metadata you can sort 
                                                        // your pictures by the date you took them.
                                                        // However if you optimized them for the web, your programm
                                                        // might have removed the metadata header and removed those
                                                        // information.
}

License

Released under the MIT License

License

01-Scripts/MulticolumnGallery

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages