burGallery

overview ^

Photo gallery loaded with features. Freedom to be fully functional without writing any code, but with the flexibility to completely customize existing code or write your own. From quick css color adjustments to more advanced interactivity and effects, a javascript callback function, and more.

features ^

• Image and thumbnail dynamic builds
• Use the included html markups
• Create your own custom html markup and/or templates
• Use the included css scripts
• Create custom css via external, internal, inline, or JavaScript HTML DOM
• Vertical and horizontal pagination with optional thumbnails and forward/prev
• Use free Font Awesome interface icons or your own graphics
• Multiple ways to close the slideshow/gallery
• Inline or modal box
• Mobile/touch support with left/right swipe capabilities for gallery image navigation
• Appearance mode to switch between dark/light mode
• Image Captions show or hide
• Html tags in captions: links, img, and iframes - just include in markup via jSon file (don't forget to escape characters when necessary)
• Supports any image size, each displayed up to its respective maximum dimensions
• Reference full screen and full window toggle options
• Populate Gallery from external source, such as the json file used in this example
• Each new Gallery instance can have as many albums as you like
• Call (create) as many new Gallery instances as you like
• In-context, well commented code
• Slideshow funtionality includes:
  • Play/Pause
  • Slideshow speed
  • Thumbnails horizontal or vertical
  • Auto-display with optional auto-play
  • Loop
  • Full window
  • Full screen
  • Counter
  • Progress bar
  • Download image
• Keyboard functionality
  • Arrow Left (previous)
  • Arrow Right (next)
  • Enter/Return (next)
  • Escape (close)
  • Spacebar (play/pause)

usage ^

NO CODE - PLUG AND PLAY:

• Download the Gallery
• Replace the files in the "img/[album]" and "img/[album]/thb" folders with your own images
• Edit the "js/images_database_min.json" text file with your album titles/filenames/captions
• Rename the "img/[album]" folder(s) to match their titles in the jSon file
• Upload to your server to test/view

options ^

• Gallery name (for example: portfolio)
• Relative url to external json database file (for example: js/portfolio_database_min.json)
• [appearance_mode]: set dark/light mode on page load (true/false)
• [display]: Auto display slideshow on page load (true/false)
• [play]: Auto play slideshow on page load (true/false): to be used with auto-display
• [caption]: Auto show/hide captions (true/false)
• [fwindow]: Allow full window display (true/false)
• [slideshow_speed]: Set duration between slides, in milliseconds: 1000 = 1 second
• [fscreen]: Allow fullscreen (true/false):
  • Triggered when a grid thb, or the toggle button, is selected. Cannot be triggered onload when using "display: true" as full screen requires user interaction.
• [loop]: Auto slideshow loop (true/false):
  • When slideshow reaches last image, loop back to beginning

advanced options ^

• [template]: for custom images, thumbnails, and album menu markup, examples included
• [custom_event()]: Callback function:
  • If a custom event/action is dependent on/waiting until after the gallery has been built, examples included
• Create new gallery instances just by calling 'new Gallery', for example:
  • const portfolio = new Gallery("portfolio", "js/portfolio_database_min.json", portfolio_options)
• NOTE: The download files are unmodified, no preprocessing, and not minified (even tho they are named with "_min"
• Not all html markup is required: For example, don't want captions and/or the counter?.Just omit that part from your html markup and everything else will still function fine with no errors. Another method would be to use css display:none
• The only required html tags are for the following containers: ".gallery" (replace ".gallery" with the name of your gallery, for example ".portfolio"), ".images" and ".grid". If you run into any issues, use the method mentioned above of hiding the element in css display:none.
• Then you must pass a name (gallery name, for example "portfolio"), relative url to your gallery content/images
• Add any optional "portfolio_options" if you'd like to customize, such as slideshow speed, loop, or templates, etc
• Any time this documentation references "containers"...those are in the html markup typically using div, p, or span tags with the corresponding class name, such as ".caption" or ".close"

hello ^

If you have any questions just lemme know.

If you use this in any way, I would love to check it out when it's done.

Custom design and implementation is available upon request.

If you notice any errors or changes/additions needed to this documentation, please lemme know.

If you are interested in contributing to the development of this gallery, gimme a shout.