Quick Gallery - Instructions

Once you have your gallery index.php you just need to upload that with your photos to a directory on your webserver.

Here's all you need to do:

Step 1: Get the gallery file

Step 2: Upload the file with some photos to your web server

Step 3: Point your browser to it and enjoy your photos!

Changing the options in code

In the beginning of the index.php file there are several options you can set which define how the gallery behaves. Each option explains what it does.

<?php

/*************************************
Gallery Appearance / Themes / Options
**************************************
  There are a few themes included in the gallery by default. One of them is preselected for you in the setting below.
  'selectedTheme' => "black", // white, black, simple, simpledark, photo, polaroid or tiles ...
  This will be the theme shown in the gallery when you first load it - unless you have used the theme selector
  in the top right hand corner. This sets a cookie with your selection and overrides the selection in this config.

* Themes Config Override
  ----------------------
  Some Themes are able to override the cookie selection and this is controlled by hiding the theme selector.
  The themes can have sub arrays in them that will override values in the config and thumbSizes.
  (See the example config array in theme "photo" or "tiles".)
*************************************/

  ##### Theme Options #####
  # theme -> options = (white, black, simple, simpledark, photo, polaroid or tiles)
  'selectedTheme' => 'simpledark', 
  # override the theme selection for any subfolder (e.g. have normal theme in root for albums and have 'photo' theme in subfolder)
  'subFolderTheme' => '',
  # default size of thumbnails (small, medium or large)
  'imgSize' => 'medium', 
  # show image names? (file extensions will be removed and "_" replace by " ")
  # Themes can override this. For example my "photo" theme overrides this setting and sets it to false 
  # because the names would not fit in between the pictures within the layout.
  'displayImgName' => true,
  # add spaces before numbers and camelcase words in file and folder names
  # e.g. "SomeFileFrom2013" => "Some File From 2013"
  'addCamelCaseSpace' => true,
  # force the image name to be shown like the actual file name
  'displayImgNameAsFilename' => false,

  ##### Theme Changer #####
  # Theme changer sets a cookie to select a theme.
  # If you hide the theme selector after using it, the cookie does not get used.
  # Themes you select may already hide the changer for you - have a look if the theme has a "config" array within it.
  # Some themes may be hidden from the visitor view at the top right.
  # By default I do this if the themes are too different from the norm.
  # You can also control which are shown in there yourself.
  'showThemeChanger' => true, 

  # You can decide if you want to show the theme and size change options at the top right or center bottom
  # of the page. Themes may override this setting.
  'showOptionsInFooter' => false, 

  ##### Image Size Changer #####
  # Allow visitor to select the size of thumbs they wish to view (defined options)
  # stored in cookie
  'showImageSizeOptions' => true, 
  

  ##### Navigation #####
  # By default the gallery will show the title of the gallery as well as the path to the current directory.
  # You can change which of these is shown in the config below.
  # show_gallery_title_or_breadcrumbs/true will allow showing both.
  'show_gallery_title_or_breadcrumbs' => true,

  # show links to folders when browsing:
  # show_breadcrumbs/false will hide the path to current folder and leave only title if above is true.
  'show_breadcrumbs' => true,

  # print the breadcrumbs in the footer
  'show_breadbrumbs_in_footer' => false,

  # bread crumb and title path separator #
  'gallery_path_separator' => '»',

  # First item within a subfolder view = back link
  # In some setups you may not want to show the back links. These are the folder icons with an arrow which will take 
  # you back to the parent directory you came from. You can hide it by setting show_backlink to false.
  # For example, you may prefer to use just either the breadcrumbs or the backlinks.
  'show_backlink' => true,
  
  ##### CSS3 Rounded borders and shadows #####
  # You can turn all the css rounded borders and shadows on or off in the config.
  # These are only visible in decent browsers. If you do not see rounded borders and shadows; I suggest you switch browsers.
  # You can control the size and spacing of all these setting within the theme array of your selected theme.

  # use css3 shadows
  'showShadows' => true,
  # use css3 border radius
  'showRoundedBorders' => true,
  # use css3 border radius on viewer
  'showRoundedViewerBorders' => true,

  ##### New Item highlighting #####
  # You can highlight new items if you wish.
  # These are applied as a css class "newItem" for the parent of the image.
  # not all themes have this option ('item-highlight') defined.

  # highlight new items #
  'highlightNewItems' => false,
  # how many days do you want to highlight a new item for #
  'highlightNewItemDays' => 7,


/*************************************
Image Viewer Options
*************************************/
  # If you are using the view image on page instead of javascript option
  # then you can edit function customCodeContentForImagePageView
  # to add your own custom content like social sharing and comment functionality

  # use javascript overlay image viewer
  'useOverlayJsViewer'=> true,

  ##### Javascript image overlay viewer options #####

  # opacity of the overlay
  'opacity'=>'0.8',
  # time in milliseconds for duration of viewer resize
  'resizeSpeed'=>'400',
  # padding around the image in the viewer
  'borderSize'=>'10',
  # Allow the use of the slideshow feature
  'slideshow' => true,
  # auto start the slideshow
  'slideshowAutoStart' => false,
  # time in milliseconds between each slide
  'slideShowDuration' => '6000',
  # show a link for downloading the image - will force browser to give download prompt
  'downloadLink' => false,
  # show link for showing share this options (you can implement any share stuff yourself in function shareThis)
  'share' => false,
  # Show link for showing Image and EXIF info:
  'imageInfo' => false,
  # Show image filename and location in info:
  'imageInfoFileLoc' => true,
  # Show image last modified time in info:
  'imageInfoModTime' => true,
  # The "exif" option controls whether to show a link in the viewer for loading exif data.
  # When clicked, the viewer will send an ajax request to the gallery and load the exif data separately.
  # Your PHP installation must be compatible and have exif installed with it. 
  # This uses the standard exif_read_data() function.
  # If the exif data had geo data (embedded gps coordinates) in it, then the viewer should also show
  # a link to google maps to the spot the photo was taken at.
  'exif' => false,

  # EXPERIMENTAL VIDEO FEATURE
  # ----- this is likely to change further -----
  # This uses CDN hosted video.js (http://videojs.com/)
  # It searches for video files with formats defined in 'accepted_video' (e.g. mp4)
  # You will need to create a thumbnail for the video named the same as the video file.
  # e.g. if you have "My Video.jpg" it will be linked with "My Video.mp4" if it exists.
  'enableVideo' => false,

  ##### Options for viewing image on page #####

  # show folder images in slider under main image
  'showImageSliderInImgView' => true,
  # show image number out of total under image
  'showImageTotalCounter' => true,

  ##### Common options for both viewers #####

  # show image title in viewer
  'displayImgTitle' => true,
  # show author name on imagas - either default, or set per image through admin or config array
  'displayAuthor' => true,



/*************************************
Folder Thumbnails
**************************************
  You have four options for your folder thumbs:
  
  1) Use auto generated thumbs that will use images from the folder and combine them as small thumbs in the image for the folder.
     You can set the number of how many small thumbs you want in them. e.g. 4,9,12...
     The larger the number, the longer it will take to generate these thumbnails. Size of your original files can be an issue as well.
     If the folder does not contain any (or enough) images - it will scan any subfolders in order and use them in order.

  2) Select a single image from the folder to be used as the default folder image.
     You can use the admin interface to select one, or you can create a text file called "folder.txt" within the folder with the 
     filename of the image you want as default in it.
     For this to work you must have "allowDefaultFolderImages" set to "true".
     (This setting will override the auto generated multi image opnes from above)

  3) You can let the gallery pick the first image from the folder and use that as the folder thumbnail.
     To do this, make sure that "useFirstAsFolderImage" is set to "true" and the above options are "false"
     
  4) if you turn all the above options off, then gallery will default to showing a folder icon.
     You can change this folder icon by using a tool found on my website.
  
  Please note that you will need to manually clear the cache when you change thumbnail settings.
  (delete files from cache folder)

*************************************/
  # creates a collage of small images for the folder thumbnail
  'useTinyThumbsForFolders' => true,
  # number of photos to read from the folder and include (e.g. 4,9,12...)
  # big files and big number = a long time for first image to be created - can be cached
  'maxTinyThumbsForFolders' => 4,
  # this makes the gallery read "folder.txt" file in the subfolder. it should only contain the filename you want to use as the folder image
  'allowDefaultFolderImages' => true,
  # this makes the script find the first image in the subfolder and use it as the folder image -overrides the tinyThumbs
  'useFirstAsFolderImage' => false, 
  # background colour to use for collage thumbnails, in case not enough images are there to fill the whole area
  'folderThumbBgColor' => '#333333',


/*************************************
Auto Rotate Images
*************************************/
  # attempt to read EXIF rotation info and rotate any RESIZED image according to that
  # if you want large images roateted, then you must set them to be resized, otherwise they are left untouched 
  'autoRotate' => true,


/*************************************
Crop Thumbnails
*************************************/
  # crops all images to the max width and size 
  # theme can override this. (e.g. theme can set thumbs to be square)
  'cropImages' => false,


/*************************************
Caching and quality
**************************************
  You can turn off the thumbnail caching all together if you wish, but I would not recommend this 
  as it takes a lot longer for all the pages to load. 
  You may change the quality of the thumbnails if you wish - for this to take effect, 
  you may need to clear down the cache folder.
*************************************/
  # save the thumbnails (loads faster after first load - requires write permission to cachefolder)
  'cachethumbs' => true,
  # this is the folder the script will create and save thumbs in
  'cachefolder' => 'thumbs',
  # quality of thumbnails and cached images
  'cachequality' => 75,


/*************************************
Sorting and file names
**************************************
  You can choose whether you want ascending or descending sorting for files and folders...
  
  The default sorting is alphabetical.
  Additionally you can choose if you want to to order folder by their creation time instead.
  For images, you can also choose the creation time or exif date (the date time the photo was taken)
  (in the case of exif sorting, the images fall back to file created time sorting if there are files without exif dates)
  
  For alphabetical ordering...
  The 'ordernumber_separator' and 'ordernumber_separator_img' are something that you can set as you wish.
  By default they are set as two underscrores.
  In this case you can order all your folders and files by naming them like this:
  01__My_Photo.jpg , 02__Another_Photo.jpg , ...
  This would result photos showing as "My Photo" and "Another Photo"
  You can set different separartors for albums and images...
  anything before this will be removed from title.
  So if you have "IMG_6547.jpg" and you set this with just one "_" then your title will be "6547".
*************************************/
  # file sorting asc or desc
  'filesort' => 'asc',
  # folder sorting asc or desc
  'foldersort' => 'asc',
  # sort folders according to file create time
  'sortFolderCreated' => false,
  # sort images according to file create time
  'sortFileCreated' => false,
  # sort images according to exif date time (overrides file create time sorting)
  'sortFileExifDate' => false,  
  # exif field to use for date sorting (DateTime, DateTimeOriginal, DateTimeDigitized)
  'sortFileExifDateField' => 'DateTimeOriginal',
  # add date to the displayed image names
  'addDateToImageName' => false,
  # remove title and just leave the date
  'useDateAsImageName' => false,
  # format of datetime added to the displayed image names (php date format)
  'addDateToImageNameFormat' => 'Y-m-d',
  # separate title and date with this
  'addDateToImageNameSeparator' => ' ',
  # prepend date to the front of the name instead of the default append
  'addDateToImageNamePrepend' => false,
  # when alphabetical, order folders with numbers in front of this (and remove from title)
  'ordernumber_separator' => '__',
  # when alphabetical, order images with numbers in front of this (and remove from title)
  'ordernumber_separator_img' => '__',


/*************************************
Text Options
*************************************/
  # The gallery title shown in the title/breadcrumbs if visible as well as the browser title bar.
  'gallery_page_title' => "Gallery",
  # If you wish to show the author of the images in the viewer, you can set the default here.
  # This can be overridden in the config.php array through the admin interface.
  'defaultAuthor' => "",
  # text shown when nothing found
  'not_found_msg' => "No Images found in this album...",
  # text shown when folder not found
  'not_folder_msg' => "Requested album does not exist...",
  # text shown when folder requires login
  'login_required' => "Viewing this album requires logging in...",
  # displayed for a link to download the image if that is enabled
  'txtDownload' => 'Download',
  # displayed for a link to show exif info if that is enabled
  'txtImageInfo' => 'Image info',
  # displayed for a link to hide exif info if that is enabled
  'txtImageInfoHide' => 'Hide info',
  # displayed for a link to show social sharing options
  'txtShare' => 'Share this',
  # displayed for a link to hide social sharing options
  'txtShareHide' => 'Hide sharing',
  # showed in front of authors name if displayed
  'txtAuthor' => 'by',
  # shown in viewer before image count e.g. (Image 8 of 10)
  'txtImage' => 'Image',
  # shown in viewer between current and total number e.g. (Image 8 of 10)
  'txtOf' => 'of',
  # add description to the top of the album - you can override for specific albums in config file via admin
  'albumDescriptionTop' => '',
  # add description to the bottom of the album - you can override for specific albums in config file via admin
  'albumDescriptionBottom' => '',
  # displayed as links when viewing large images on the page
  'txtNext' => 'Next',
  'txtPrev' => 'Previous',


/*************************************
Paging
*************************************/
  # You can control if paging is on or off and how many images are shown per page.
  # e.g. The "photo" theme overrides these values to ensure an even spread of images that will fit to the layout.
  'paging' => true,
  # limit of items to show per page (10,15,20,25,30...)
  'limit' => 100,
  # show the paging links on top of gallery
  'displayLinksTop' => false,
  # show the paging links on bottom of gallery
  'displayLinksBottom' => true,
  # You can set the number of visible page numbers in the links list (1,3,5,7,9...)
  'showpages' => '5', 
  # let the javascript viewer link to all images in folder...
  # This controls if the viewer is allowed to "go further" than the end of the page.
  # If set to true, the page will load hidden links to the images from all previous and following pages, 
  # so that the viewer is able to slideshow or skip through all the images no matter what page they are on.
  'jsViewerFolderAll' => true, 

  
/*************************************
Image Resizing (Large Photos / Originals)
*************************************/
  # Control if uploaded images should be resized 
  #  - does not save original size on server - it resizes on the fly and saves the smaller version
  #  - use resizeLargeView to keep originals and resize just for viewing
  #  - if this is set to true, you can set resizeLargeView to false. no point to have it on.
  'resizeUploadedImages' => false, 
  # Make smaller copies of the originals in the thumb cache
  # and show them in the  viewer instead of originals 
  # (you can enable download link to give access to the full size)
  'resizeLargeView' => true,
  # Set the jpg quality for the original image resize 0-100
  'resizeQuality' => 90,
  # save the resizedLargeView images to cache - set to false if you just want to do on the fly when needed
  'cacheLargeView' => true,
  # Set the maximum width and height for the resized original image
  # - these are the maximun height and width, to make them fit into a specific area.
  # - aspect ration is always kept - smaller images will not be upscaled
  # - you can set same width and height to control the size in the same aspect ratio for portrait and landscape
  'resizeMaxSize' => array('width'=>1920,'height'=>1080),


/*************************************
Watermarking
**************************************
# Set the path to the image you want to use as a watermark. like your logo, or some text.
# Not all types of images work very well with watermarking.
# I suggest using a black on white JPG with mode '0' for best results 
# - but you are welcome to experiment with different files and modes. (as well just plain transparent PNG)
# - GIFs may not work well with all the "modes". experiment. (or just use a plain JPG / transparent PNG)
# You can also set which corner, and how far from the edge, the watermark will be placed... as well as controlling how visible it is (opacity).
#
# To Test Watermarking:
# While messing around with the watermarking, you should open a image direct in the browser with a URL like this:
# index.php?source=imageName.jpg&size=original
# Then you can make changes and refresh as many times as you wish, without constantly deleting cache etc.
# (You could also create a copy of the gallery just with a couple of images and set caching to false)
# When you are done, make sure you delete the cache and refresh.
#
*************************************/
  # You can add a watermark to any uploaded images if you set this to true
  'watermarkUploadedImages' => false,
  # add a watermark (image or text) to existing images (upload setting should be false)
  'watermarkImages' => false,
  # add a watermark to thumbnails (set to false to only watermark the large one)
  'watermarkThumbnailImages' => false,
  # add a watermark to folder collage thumbnails
  'watermarkFolderImages' => false,

  ##### Image Watermarking #####
  # if you want intelligent light/dark watermark based on image colour, 
  # use black on white image with mode auto and overlayPNG false
  'watermarkImage' => array(
      # relative path to watermark image (transparent PNG works - or also black on white JPG or GIF with various settings)
      # (in this example you could add the 'watermark' folder to the ignore list, so it is not shown in gallery)
      'path' => 'watermark/watermark.jpg',
      # Position: like CSS background position takes 'top','bottom','left','right' and 'center'... e.g. "bottom right"
      # also works with (X,Y) values with 'px' and '%' like "50% 50%", "20px 20px" or "20px 50%"
      'position' => 'bottom right',
      # Position: distance in px from edge of the image
      'margin' => 5,
      # assume PNG files have transparency etc. ignore other settings below (opacity, mode, etc) and just overlay the PNG on top
      'overlayPNG' => false,
      # opacity of watermark (0-100) - control how visible it is
      'opacity' => 40,
      # Watermarking mode - the type of image overlay
      # 0=AUTO 1=BURN 2=DODGE 3=PASTE 4=AVERAGE 5=AVG-FADE-LOGO 6=AVG-FADE-BG 7=LIGHTEN
      # ('auto' switches between 'burn and 'dodge' depending on average image colour)
      'mode' => 0,
      # sets the average color for image bg to be treated as dark or light 0-255 -- (used in the 'auto' mode check)
      'darknessThreshold' => 100,
    ),
  
  ##### Text Watermarking #####
  # use font to create text instead of an image
  'watermarkTextOnly' => false,
  'watermarkText' => array(
      # your copyright text to put on images
      'text' => '© jv2.net',
      # path to a TTF font - copy a TTF font to your server in a folder you can access
      'font' => 'watermark/verdana.ttf',
      # font size for copyright text
      'fontSize' => 30,
      # HEX color of text - leave blank for AUTOMATIC darken or lighten according to background
      'color' => '',
      # Position: like CSS background position takes 'top','bottom','left','right' and 'center'... e.g. "bottom right"
      # also works with (X,Y) values with 'px' and '%' like "50% 50%", "20px 20px" or "20px 50%"
      'position' => 'bottom right',
      # Position: distance in px from edge of the image
      'margin' => 10,
      # Angle of copyright text (range between 0-90 work for all positions, for others you will need to manually position)
      'angle' => 0,
      # Distance of shadow in px - 0 for no shadow
      'shadowDistance' => 0,
      # HEX color of shadow - leave blank for AUTOMATIC darken or lighten according to background
      'shadowColor' => '',
      # sets the average color for image bg to be treated as dark or light 0-255 -- (used in the 'auto' mode check)
      'darknessThreshold' => 100,
      # this sets the amount of auto color change for text  0-255
      'autoColorText' => 100,
      # this sets the amount of auto color change for shadow 0-255
      'autoColorShadow' => 70,
    ),
  # setting specific to a folder collage thumbnail
  'watermarkTextFolder' => array(
      # your copyright text to put on images
      'text' => '© jv2.net',
      # path to a TTF font - copy a TTF font to your server in a folder you can access
      'font' => 'watermark/verdana.ttf',
      # font size for copyright text
      'fontSize' => 10,
      # HEX color of text - leave blank for AUTOMATIC darken or lighten according to background
      'color' => '',
      # Position: like CSS background position takes 'top','bottom','left','right' and 'center'... e.g. "bottom right"
      # also works with (X,Y) values with 'px' and '%' like "50% 50%", "20px 20px" or "20px 50%"
      'position' => 'center center',
      # Position: distance in px from edge of the image
      'margin' => 10,
      # Angle of copyright text (range between 0-90 work for all positions, for others you will need to manually position)
      'angle' => 0,
      # Distance of shadow in px - 0 for no shadow
      'shadowDistance' => 0,
      # HEX color of shadow - leave blank for AUTOMATIC darken or lighten according to background
      'shadowColor' => '',
      # sets the average color for image bg to be treated as dark or light 0-255 -- (used in the 'auto' mode check)
      'darknessThreshold' => 100,
      # this sets the amount of auto color change for text  0-255
      'autoColorText' => 100,
      # this sets the amount of auto color change for shadow 0-255
      'autoColorShadow' => 70,
    ),


/*************************************
Miscellaneous Options
*************************************/
  # These are the image file extensions the gallery scans for.
  # If you want to add others, you will also need to edit the create thumb functionality to add that type.
  'accepted_img' => array( 'jpg', 'jpeg', 'gif', 'png' ),
  # These are the video file extensions the gallery scans for.
  # If you want to add others, you will also need to make sure the video player handles them
  'accepted_video' => array( 'mp4' ),
  # HTML header: charset
  'charset' => 'ISO-8859-1', 
  # HTML header: page language
  'pagelang' => 'en',
  # Often the PHP setups require you to define the time zone you are in - defaulted to 'Europe/London'.
  # For a list of PHP time zones, visit: http://php.net/manual/en/timezones.php
  'timeZone' => 'Europe/London',


/*************************************
Admin Options
*************************************/
  # Control if the user can upload images when logged in the admin interface
  'allowImageUpload' => true, 
  # Control if the user can delete images when logged in the admin interface
  'allowImageDelete' => true, 
  # Control if the user can create folders when logged in the admin interface
  'allowAlbumCreation' => true, 
  # Control if the user can delete folders (and images within them) when logged in the admin interface
  'allowAlbumDelete' => true, 
  # Control if the user can delete the whole gallery when logged in the admin interface
  'allowGalleryDelete' => false,
  # chmod value for setting write permissions for uploaded images and folders created from admin. Set to null to disable.
  'newFileAndDirChmod' => '0777',

);


/*************************************
Gallery Include Mode Setup
-- Standalone Gallery OR in YOUR TEMPLATE as an included php file
*************************************/

##### $includemode #####
# if you wish to use the gallery within an existing website (in the middle of your template) then set this true.
# You should still keep your index.php within the folder you have your images in. (e.g. gallery/index.php) 
# DO NOT rename this file. 
# The folder you set your gallery and index file in should be "below" the directory the page you want it on 
# is in. (e.g. page "pages/photos.php" and then gallery in "pages/gallery/index.php") 
/*# then use
<?php include("gallery/index.php"); ?>
*/# in your own code.
# (Make sure you set all 4 options correctly for the include mode to work in your environment)

$includemode = false;

##### $galleryfolder #####
# Setting for sub directory where images and index are (MUST END IN /)
# You will need to set this correctly if you are using the include mode.
# (for the example setup explained above, this would be set as "gallery/")
# this must be a subfolder you can access from the url where you want to show the gallery

$galleryfolder = 'gallery/';

##### $includeJQuery #####
# If you are using the gallery as an "include" within your own website, and you already use jQuery,
# set this to false, so that we don't load jQuery twice for you.

$includeJQuery = true;

##### $urlinclude #####
# In some cases, you may be loading the gallery via a get paremeter - not just a standalone page.
# e.g. "page.php?view=gallery" instead of "gallery.php"
# In this case (for this example) set this option to: "view=gallery&"
# $urlinclude = "name=value&"

$urlinclude = ''; 

?>

Changing the Options in Admin

If you have the admin login enabled and are logged in, each folder will have a "setup" link at the bottom of the page.

By clicking this you can access the setup for the folder in question.

You can adjust the following setup values via the admin system per folder (these will override the default values setup in the index.php file)

Some od the admin options in the Quick Gallery

You can also set image titles, captions and author names for each image in the selected folder...

Title and caption setup in admin of Quick Gallery

Changing styles and images

The styling is standard CSS, created by simple PHP to control the colour selection.

If you want to edit this, go ahead - have fun...


You may have noticed that there are background images and little icons and arrows etc, magically appearing in the gallery.

You will find that all the images are embedded in the gallery file as base64 encoded strings. The images are stored in an array. Each image name has become the array key for that image.

The URL for each image becomes "?img=name"


You can of course change these images by overwriting existing keys or add new images if you want to modify the code. To do this you will need to base64 encode the images and add them in to the array.

You can download the image encoding tool which I made for creating the lines in the image array