Answered Facebook style Gallery

- 217 Posts
kudykam Reply #1, 14 years, 8 months ago

Hi I want to create gallery similar to gallery on facebook.
On main page display all album like:
==========================================================
January 2012 (title text only)
==========================================================
Album 1(thumbnail) Album 2(thumbnail) Album 3(thumbnail)

==========================================================
February 2012 (title text only)
==========================================================
Album 1(thumbnail) Album 2(thumbnail) Album 3(thumbnail)

.....

Where name of month is parent folder containing albums subfolders. Those subfolders are displayed with thumbnail and are linked to new page where all photos are displayed just like from default Gallery.

Dont know how to make it though.....
This question has been answered by kudykam. See the first response.

discuss.answer

217 Posts

kudykam Reply #2, 14 years, 8 months ago

I will answer my own question:
Resource page with list of galleries:

<div class="galArchive">
[[GalleryAlbums? &parent=`0` &showAll=`0` &dir=`ASC` &rowTpl=`gallery-parent-tpl`]]
</div>

Resource page with a gallery:

<h1>[[+gallery.name]]</h1>
<p>[[+gallery.description]]</p>
[[!Gallery? &toPlaceholder=`gallery` ]]
[[+gallery]]

Chunk gallery-parent-tpl:

<h3>[[+name]]</h3>
  <ul>
    [[GalleryAlbums? &parent=`[[+id]]` &showAll=`0` &rowTpl=`gallery-sub-tpl`]]
  </ul>

Chunk gallery-sub-tpl:

<li[[+cls:notempty=` class="[[+cls]]"`]]>
<a href="[[~(id of gallery page)? &[[+albumRequestVar]]=`[[+id]]`]]" title="Album [[+name]]">
  [[+image:notempty=`<span class="frame"><img src="[[+image]]" alt="[[+name]]" /></span>`]]
  [[+showName:notempty=`<span><strong>[[+name]]</strong> [[+description]]</span>`]]

    </a>
</li>

Replace (id of gallery page) with a real ID