Skip to content

hluk/mkgallery

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

mkgallery
=========
Python script 'mkgallery.py' is used to create galleries automatically. Script
finds all usable items in specified directories and files.

For more information run the script with --help parameter.


Creating gallery manually
=========================
To create new gallery (without using the python script) just copy images,
fonts, audio and video files to subdirectory "items" and edit files "items.js"
and "fonts.js" (see next sections).

The default HTML file ("template.html") can be modified so that gallery doesn't
contain list of items, navigation elements, information label, help or even
viewer.

Specific options can be modified in file "config.js" or overridden in URL hash
(the part after hash sign, e.g.
".../index.html#preload_images=5&zoom_step=0.25").

The gallery appearance can be changed in default CSS files in directory
"files". The gallery elements like viewer, information bar, item list, help or
navigation can be modified or completely removed from HTML file. For further
information see the default commented HTML file "template.html".

Directory "thumbs" contains thumbnails of images in gallery (thumbnail have same filename as the image).

Default directory structure is:
    /:
        index.html
        config.js
        fonts.css
        items.js

    /files:
        bg.png
        bg2.png
        bg3.png
        favicon.png
        gallery.js
        style.css
        style-list-print.css
        style-list-simple.css
        style-print.css

    /items:
        ...
    /thumbs:
        ...


items.js
--------
This file contains array "ls". Each entry of the array can be either string
--- relative path of a file in directory "items" --- or an array containing
two entries:
	- item path and
	- item properties.

The item properties are used to set contents of HTML elements (jQuery syntax).

Following example sets contents of elements with classes 'alias' and 'description'.
	{'.alias':"Nice photo", '.description':"This is my <b>favorite</b>!"}

Thumbnail size can be defined in '.thumbnail_size' property.
For example (thumbnail with width 100 and height 150):
    '.thumbnail_size': [100,150]

The variables "title" sets gallery name and is optional (title of gallery; default value is "default").

Example 'items.js' file for gallery with five PNG:
    var ls = [
        ["face-smile-big.png", {alias:"Smile!", '.thumbnail_size': [256,526]}],
         "face-tired.png",
         "stock_smiley-5.png",
        ["face-uncertain.png", {alias:"Uncertain smiley"}],
         "face-angel.png",
    ];
    var title = "Smilies";



fonts.css
---------
This file contains font definitions.
For example:
    @font-face{font-family:fonts_LinLibertine_Re_otf;src:url('items/fonts/LinLibertine_Re.otf');}

The font name must be same as path to the font relative to "items" directory
with all characters that are not a letter, a digit or space replaced with underscore.


Tags
----
Instead of an item filename in item.js file, you can write HTML elements.

Format is '$(...)' where '...' is HTML code which respects jQuery syntax for
creating new elements.

For example:
	'$(<h1>Title</h1><p>text</p><div class="footer">footer</div>)'

About

Customizable web gallery for browsing images, fonts and other multimedia files

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published