Build a gallery in 5 minutes using jQuickie

Permalink Browser Info Environment
This is just an example of use. Unless you want something out of the ordinary, there are already Fancybox galleries in the marketplace.

First, if you have not already installed it, now is the time to install the jQuickie Resources Bundle1.
http://www.concrete5.org/marketplace/addons/jquickie-resources-bund...

Next, you need to list a file set with the pictures for your gallery. The free addon 'List Files From Set' provides a good starting point.
http://www.concrete5.org/marketplace/addons/list-files-from-set/...

You need the set to display as a list of thumbnails. This is just an alternate view template for 'List Files From Set'. The code and details are posted at:
http://www.concrete5.org/marketplace/addons/list-files-from-set/for...
(also attached to this post).
Install the template at /siteroot/blocks/list_files_from_set/templates/jl_thumbnails_with_links.php

Add a 'List Files From Set' block to your page, select the file set with your pictures in it, save the block and then select the thumbnail list template.

Then you need a bit of jQuery to turn the thumbnail list into a gallery. Add a jQuickie block with the code:
$("a[rel=jl_thumbnails_with_links_image_group]").fancybox({
  'titlePosition':'inside'
});


Finally, you need to include the relevant resources, so on the jQuickie resources tab select:
- jQuery
- Fancybox

Save the jQuickie block. Publish the page.

You now have a fancybox gallery built from scratch.

If you look at the fancybox web site, there are many more options to play with. You can also use a similar development pattern to add other image gallery widgets such as sliders.

1 Attachment

Type: Discussion
Status: Archived
JohntheFish
View Replies:

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.