Question

I am creating a basic CMS website using Alfresco Web Quick Start.

I want to have an image gallery on my site whereby all the images in my galleries folder are displayed like a standard gallery (i.e. click to move smoothly to next image, click on image to enlarge, possibly add a comment).

I currently have my images on a gallery page of the site but you must click on each of the thumbnails to enlarge and return to the main gallery page before you can view another image. It is functional but doesn’t look good so I need to improve this!

I thought this add on may have been a possible solution (http://addons.alfresco.com/addons/gallery-plus-dashlet) but it only displays the images on the site dashboard but I want to have my gallery included within the Gallery page of my site. Any assistance at all with this would be much appreciated! 🙂

Answer 1

One thing to check is what version of Alfresco you are using. DeckShare was designed and built around Alfresco 3.3 (If I remember correctly). It most likely will not work correctly with newer versions of Alfresco, i.e. 4.0, as some code has changed in the core product.

Since you are new to Alfresco, the easiest thing to do would be to install an older version of Alfresco. If you are more ambitious, you could try and update the DeckShare code to work with a newer version.

I think I have accomplished something similar to what you want using Lightbox (SlimBox rather). I did a short presentation on WQS which included a LightBox integration (see page 27) http://www.tribloom.com/content/tale-two-wqs-implementations-pdf for an example. I believe WQS pages already include slimbox.js in which case it is very easy to create a component/web script to display a gallery (mine is called imagebrowser.get.html.ftl):

...
    <div class="interior-content">
        <#if articles.assets?size == 0>
            ${msg('list.none')}
        <#else>
            <#if subTitle??><h3>${msg(subTitle)}</h3></#if>                
            <ul class="portfolio-wrapper"><#list articles.assets as article><li><a href="<@makeurl asset=article />${linkParam!''}" rel="lightbox-img" title="${article.title!''}"><img src="<@makeurl asset=article rendition='rightColumn'/>" alt="${asset.title!''}" class="img-border" /></a></li></#list>
            </ul>
        </#if>
    </div>
...