Execute the following steps to set up a photo gallery.

Select the category you wish to create a photo gallery out of (or create a new category), and click the edit button to show the screen below.
<the edit button is in the middle of the page just under the "Short Description" of the category>




Once on this screen, click the link outlined below.  <The text of the link is "Click to show/hide Templates and Full Description">



You should now see the a list of text boxes. Each of these has a specific purpose. They are a part of the new templating system in Chameleon CMS, and can be used for far more than just creating a photo gallery.

Paste the following code into the Category View Panels text box:

<div class="PhotoGallery">
  <div id="{Itemlist,Id}" class="PortfolioListView" style="float:left;margin: 10px 10px 0px 0px;">
    {Itemlist,SmallThumbnail}
  </div>
  <div id="{SingleItem,Id}" class="PortfolioLargeView" style="float:left;">{SingleItem,MediumView}</div>
  <div id="{Hiddenlist,Id}" style="display:none;">
    {Hiddenlist,MediumView}
  </div>
</div>

Paste the following code into the Medium Item Template text box:

{Topics.FullHtml}





Paste the following code into the Small Item Template text box:

<div class="ListItem" onclick="javascript:ShowHiddenItem(HiddenItems_{CategoryId}[{ItemIndex}]); return false;">
  {Topics.FullHtml}
</div>

Once you have done this, click save.




Now go to the page content of the page you wish to place this gallery on. Go to the section where it is to be placed, and create a content item with the type of Category View 2 and set the content title to the name of the category you wish to use.


Congratulations, now your gallery should be working. All that is left to do from this point is style the look and feel using css and the class names in the code above.