Thanks! Please check the following:
System requirements
This stack requires RapidWeaver and the Stacks plugin. It will not work with other platforms (like Wordpress). We recommend you aim towards installing the latest version of RapidWeaver and Stacks that your computer is compatible with.

License agreement
You may use this purchased stack an unlimited number of times in personal or commercial projects, request technical support and receive free updates in future.

This stack can be installed or synced onto all computers that you own. You are permitted to make archival backup copies of the stack.

You may not resell or make this stack available for download, remove copyright credits or license information.

The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.

Refund policy
By purchasing this stack, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.

All purchases are final and refunds will not be provided (we physically cannot un-download or remove stacks from your computer).

You are reminded to make use of the free demo versions already provided on the website, to fully evaluate stacks for compatibility and suitability before purchase.

Customer support
If you have questions that relate specifically to this stack, you should make contact via the contact page. We aim to answer all messages within 12 hours, Monday to Friday.

If you require a faster response at weekends or during public holidays, please post your question(s) to the RapidWeaver forums, where a support volunteer may be able to assist you quicker.
Checkout  
ProGallery is ideal in situations where you need a lightbox gallery solution that is more sophisticated than LiteBox, FancyViewer, TopBox or SwipeGallery, but in instances where you are okay to compromise on some of the finite style and colour customisability (or you're willing to experiment with CSS yourself). ProGallery is aimed very much towards professional photographers, graphic designers and film makers who need to get large showcases of quality, high-resolution work online quickly. And the warehousing options in ProGallery will very much appeal towards people who are on-the-road or have clients who want to update galleries remotely outside of RapidWeaver. ProGallery is far-beyond your average lightbox stack.

This new stack could possibly offer a replacement for UltimateGallery stacks for some users. ProGallery uses a fraction of the amount of code that UltimateGallery stacks use, and ProGallery has a much more powerful lightbox frontend. A version of ProGallery for WeaverPix is already in development, and will be available as a separate purchase (the WeaverPix version will be perfect for galleries generated from Flickr, Picasa, 500px or Dribbble collections). The lightbox frontend in ProGallery is powered using a modified copy of the opensource lightGallery plugin.

Important ProGallery requires RapidWeaver 6 and Stacks 3. It will not work with older versions of RapidWeaver or Stacks. Galleries generated from Total CMS depots, image directories or CSV files need a web server with PHP support.

Example

This is a working example of ProGallery, with the default settings applied. There are additional features available in ProGallery (like slideshows and pagination) which are not shown here:
 
  • <h4>Autumn Light</h4>A photogenic picture of autumn light shining through some trees

    Autumn Light

    A photogenic picture of autumn light shining through some trees
  • <h4>Bracken</h4>This was growing on top of a hedge bank and was worthy of a photograph in the early morning sunlight

    Bracken

    This was growing on top of a hedge bank and was worthy of a photograph in the early morning sunlight
  • <h4>American Oak</h4>Not a native tree in the UK but it still puts on a fine display of colours in the autumn months

    American Oak

    Not a native tree in the UK but it still puts on a fine display of colours in the autumn months
  • <h4>Monochrome waterfall</h4>This picture was a little over-exposed, however some minor retouching turns it into an attractive piece of art

    Monochrome waterfall

    This picture was a little over-exposed, however some minor retouching turns it into an attractive piece of art
  • <h4>Clapper bridge</h4>Possible several hundred years old and built entirely from stone	slabs with no concrete

    Clapper bridge

    Possible several hundred years old and built entirely from stone slabs with no concrete
  • <h4>River Bank</h4>Gives a sense of motion with the river and the tree branches

    River Bank

    Gives a sense of motion with the river and the tree branches
  • <h4>Attractive View</h4>A view across the valley to beyond

    Attractive View

    A view across the valley to beyond
  • <h4>A Country Lane</h4>Some of these lanes are thousands of years old

    A Country Lane

    Some of these lanes are thousands of years old
  • <h4>Looking into the distance</h4>A pleasant composure with the trees and the distant hill

    Looking into the distance

    A pleasant composure with the trees and the distant hill
  • <h4>Grazing Ponies</h4>These hardy ponies have been used for hundreds of years to control vegetation

    Grazing Ponies

    These hardy ponies have been used for hundreds of years to control vegetation
  • <h4>Ancient Oak Woodland</h4>Home to a phenomenal amount of biodiversity

    Ancient Oak Woodland

    Home to a phenomenal amount of biodiversity
  • <h4>Sepia River</h4>Experimenting with some sepia filters

    Sepia River

    Experimenting with some sepia filters
  • <h4>Stone Bridge</h4>Norsworthy Bridge to be exact on Dartmoor

    Stone Bridge

    Norsworthy Bridge to be exact on Dartmoor
  • <h4>Forest Vista</h4>Beautiful dappled light and greenery

    Forest Vista

    Beautiful dappled light and greenery
  • <h4>Canopy</h4>Looking up into the canopy of some pine trees

    Canopy

    Looking up into the canopy of some pine trees
  • <h4>River</h4>A long-exposure photograph of a river flowing through moss-covered rocks

    River

    A long-exposure photograph of a river flowing through moss-covered rocks
  • <h4>Splash of Autumn Colour</h4>One of my favourite photographs I took during Autumn 2015

    Splash of Autumn Colour

    One of my favourite photographs I took during Autumn 2015
  • <h4>Monochrome Clitter</h4>Clitter is simply rocks that have broken-off and rolled to the bottom of valleys over millions of years

    Monochrome Clitter

    Clitter is simply rocks that have broken-off and rolled to the bottom of valleys over millions of years
  • <h4>Bark Study</h4>A detailed photograph of some bark on a pine tree

    Bark Study

    A detailed photograph of some bark on a pine tree
  • <h4>Path Through the Forest</h4>The lens-flare towards the top adds to the warm and bright feeling of this photograph

    Path Through the Forest

    The lens-flare towards the top adds to the warm and bright feeling of this photograph
All photographs are © copyright of Will Woodgate. This ProGallery stack is configured to use a CSV file of image data, and you may download the original file here to see an example of how it works

Setup

Follow these instructions for getting ProGallery setup in your website
  1. Once installed into Stacks, open your stack library and drag-and-drop a copy of the ProGallery stack into your webpage
  2. Click on the blue '+' button to add sub-stacks to your main ProGallery stack. You can choose to add singular images or video, provide the path to a directory of suitable images, link to a CSV file containing your gallery data or enter the ID of a TotalCMS file depot
  3. Carefully follow the instructions shown in edit mode for configuring your gallery
  4. When you select the main ProGallery stack in edit mode, you can access all the style and behaviour settings for the thumbnail grid and the lightbox gallery
  5. Publish the website when done

Don't forget that galleries generated from image directories, CSV data files or Total CMS depots will only work when your website is published to a live web server. This is because RapidWeaver lacks the server-side software (PHP) necessary to fetch and construct your galleries. Total CMS is developed and supportably separately by Joe Workman, and is not included with the purchase of this stack.

Relative paths for CSV files and directories

If you have configured ProGallery to use images or video from a CSV spreadsheet file or an image directory, it is important that the CSV file or content is stored on the same domain (e.g. example.com) and you link to the file using relative links. Relative links offer improved security and much faster retrieval of the data. Our published example above is using a CSV file stored on the Stacks4Stacks server, to build the image gallery you see. This current page you are reading now is stored in the /progallery/ directory. Our CSV file is stored over in the /resources/ directory. This is what it looks like in FTP:

stacks4stacks.com/
progallery/index.php
resources/imagedata.csv

So in the stack settings we entered ../resources/imagedata.csv as the link to the CSV file. The CSV file can have links to images stored anywhere, including on other domains. It's just the CSV file that has to live on the same domain as the website.

With relative links, a web browser tracks backwards from the location of the present page (e.g. https://stacks4stacks.com/progallery/index.php). You use ../ to determine how many levels the ProGallery page is from the root domain. Then navigate down into the /resources/ directory, where it will find our imagedata.csv file. And sure enough, if you go to https://stacks4stacks.com/resources/imagedata.csv in your web browser address bar, you will reach the same CSV file.

Again, relative paths are very fast and safe. Trying to access CSV files on other domains will often fail and some hosting companies will block it (as a security measure). There are many more explantations and tutorials online about relative links.

In summary, a relative link tells a web browser what the shortest route is to a file, from the current page. You use ../ to navigate out of directories (back to the website root), and then name the directories (e.g. /resources/2016/gallery/ to navigate down into directories. If the CSV file is within the same directory as the page is stored, just enter the filename as the link. For CSV files added as resources to RapidWeaver, no further action is required.

Triggering ProGallery stacks

As well as having ProGallery open when a thumbnail image is clicked, you can also create custom links or buttons in a webpage to trigger (open) ProGallery. Alternatively you can have ProGallery open automatically at a specific slide as the page loads; which is useful if you want to direct users to a specific image or video. The table below outlines the three trigger methods available for you to utilise.
 
Trigger Method Markup Example Special Notes
Trigger the first item in a gallery, from a link or button within the same webpage Give the link or button a class attribute of class="mygalleryTrigger" and replace 'mygallery' with the ID of the ProGallery you want to trigger. Click me! The first gallery item will be opened when the link or button is clicked. If configuring this custom link in the RapidWeaver link dialogue wondow, set the URL to #, open the custom attributes panel. Add a new attribute with a Name of class and a Value of mygalleryTrigger - remembering to substitute 'mygallery' for the ID of the actual ProGallery stack you want to trigger - if it has an ID different to mygallery.
Trigger a specifc gallery item, from a link or button within the same webpage Give the link or button a data- attribute of data-mygallery="7". Replace 'mygallery' with the ID of the ProGallery you want to trigger. Open Image 4! If configuring this custom link in the RapidWeaver link dialogue wondow, set the URL to #, open the custom attributes panel. Add a new attribute with a Name of data-mygallery and a Value of 7 - remembering to substitute 'mygallery' for the ID of the actual ProGallery stack you want to trigger - if it has an ID different to mygallery. The number denotes the exact slide to open at.
Triggering a ProGallery as the page loads Append a URL query hash onto the page URL you are linking to, like this: #lg=mygallery&slide=6. Replace mygallery with the ID of the ProGallery to trigger and 6 with the number of the slide. Click This To trigger the first slide, change 6 in the example code to 0. You can only have a single ProGallery stack tiggered using this method and you cannot have other events run via the URL hash query. Zero-based indexing is used, so slide '0' would be the first slide.
Please note that these links you create are not considered permalinks. That is to mean that if you add or remove media from your gallery, the sequence is likely to change. The same applies if you change the gallery ID. So if for example you create a link to a specific lightbox image or video, you may need to update the link if the sequence of media in ProGallery is changed.

ProGallery Sources

Sources are basically 'sub-stacks' that you add to ProGallery and configure. These different sources offer different methods of embedding or retrieving content to use inside ProGallery. Here's an overview of different sources available and important notes to read. Sources are sorted alphabetically.
 
Source Name Description Special Notes
HTML5 Video Embeds a single HTML5 (MP4 / WebM) video that can be viewed by most web browsers and devices. The video clips can be stored online in a directory or you can attach the video clips as resources in RapidWeaver. Additionally you provide a static image to act as the video thumbnail and poster image (the image displayed while the video is loading). -
HTML5 Video Directory You provide a relative path to a directory containing MP4 video clips on your web server. ProGallery embeds the individual video files within the lightbox. Generates titles from the file names. Only works in newer web browsers. Thumbnail images are not supported. Requires PHP 5.6+
Image Directory You provide a relative path to a directory on your web server containing images. ProGallery finds and embeds the individual image files. Generates titles from the file names. Requires PHP 5.6+
Images Via CSV Works similar to the Image Directory source, except you set a relative path to a CSV file on your web server. This CSV file holds the image links, titles and links for thumbnail images. Requires PHP 5.6+
Single Local Image Embeds an image which you drag and drop directly into Stacks / RapidWeaver. Optionally the thumbnail image can be cropped square. -
Single Warehoused Image Embeds a single image, which has previously been attached to your RapidWeaver project file as a resource or published to an online location already. -
Social Video Lets you embed a single video that has been published to a social networking service like YouTube, or Vimeo. You provide a new high-resolution thumbnail image which can be displayed in the ProGallery thumbnail grid and within the lightbox thumbnails (if enabled). Video content must be marked as public and support embedding. Vimeo video quality is poor, unless you pay for a plus or pro account.
iFramed Content Lets you embed a simple webpage or PDF file in your gallery. Uses a local or warehosued thumbnail image as the trigger. Introduced in 1.5
Total CMS File Depot Can be configured to connect to a Total CMS file depot and embed images that you or a client upload to the Total CMS file depot directory on your web server. Requires PHP 5.6+ and Total CMS*
Total CMS Gallery Can be configured to connect to a Total CMS Gallery, Total CMS Blog Gallery or Total CMS Image List and embed images that you or a client upload to your web server. Requires PHP 5.6+ and Total CMS*
Pulse CMS Can be configured to connect to a Pulse CMS media directory and embed images that you or a client upload to your web server via Pulse CMS. Requires PHP 5.6+ and Pulse CMS**
*Total CMS is a RapidWeaver addon developed by Joe Workman. Total CMS is NOT included with ProGallery and we do not provide technical support for it. If you have questions about Total CMS, you should contact Joe Workman support for assistance.

**Pulse CMS is a content management system developed by Michael Frankland of Pulse CMS. Pulse CMS is NOT included with ProGallery and we do not provide technical support for it. If you have questions about Pulse CMS, you should get in contact via this page.

Masonry grid layouts

A masonry grid (as the name implies) is a group of images arranged on the page like a wall. The Pinterest website provides an excellent example of a masonry grid layout. Earlier versions of ProGallery used Javascript to generate the masonry grid; but this often caused problems in more complex setups where animation effects were in use. Newer versions of ProGallery now use pure CSS3 columns to achieve the masonry grid layout. This revised system is far faster and more reliable. However you will notice your images flow in a different order; like the columns in a newspaper (images are rendered down the page, and from left to right).
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.