[SOLVED] Gallery

128 Posts

evegate94 Reply #1, 14 years, 2 months ago

I'm creating a photo gallery. I have an album with say 3 photos in it an another with 2. I'm using the following code which works fine but displays all the images from both albums.

[[!Gallery? &plugin=`galleriffic`]]

I'm trying to find the code that would display 1 thumbnail from each and the album name on the home gallery page and then display the contents for the album you clicked on.

[ed. note: evegate94 last edited this post 14 years, 2 months ago.]

☆ A M B ☆
1,780 Posts

Frogabog Reply #2, 14 years, 2 months ago

The following uses the fancyBox jQuery plugin: http://fancyapps.com/fancybox/. Make sure to download the entire package with css.

This method is from Design from Within's Flexibility package (available via package management for fresh MODX installs only). Get the source code in full without installing Flexibility here: https://github.com/DESIGNfromWITHIN/Flexibility

<link rel="stylesheet" href="[[++site_url]]assets/templates/yourTemplate/stylesheets/jquery.fancybox.css">

<script src="[[++site_url]]assets/templates/yourTemplate/javascripts/jquery.fancybox.js"></script>

Call the gallery in your template with this chunk:

$pageGallery :

[[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`0` &rowTpl=`newGalAlbumRowTpl` &thumbWidth=`195` &thumbHeight=`140`]]
[[!Gallery? &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`newGalleryAlbumTpl` &thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`newGalItemThumb` &imageWidth=`800` &imageHeight=`800`]]
[[!If? &subject=`[[+Gallery]]` &operator=`isempty` &then=`[[+GalleryAlbums]]` &else=`[[+Gallery]]`]]

create new chunks (replace new with your own prefix and change the above chunk to match)
$newGalAlbumRowTpl :

<div class="albumPreview">
    <h3><a href="[[~[[*id]]?&[[+albumRequestVar]]=`[[+id]]`]]">[[+name]]</a></h3>
    <div class="thumb">
        <a href="[[~[[*id]]?&[[+albumRequestVar]]=`[[+id]]`]]"><img src="[[+image]]" alt="[[+name]]"/></a>
    </div>
    <div class="desc">
        <p>[[+description]]</p>
        <a href="[[~[[*id]]?&[[+albumRequestVar]]=`[[+id]]`]]" class="view">View gallery</a>
    </div>
</div>

$newGalleryAlbumTpl :

<h3>[[+album_name]]</h3>
<p>[[+album_description]]</p>
[[+thumbnails]]

$newGalItemThumb :

<div class="[[+cls]] gallery_item">
    <a href="[[+image]]" rel="fancybox" title="[[+description]]">
        <img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" />
    </a>
    [[+name]]
</div>

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

128 Posts

evegate94 Reply #3, 14 years, 2 months ago

Brilliant! Now it's just a matter of styling. Thanks

6 Posts

bobboles Reply #4, 14 years ago

Thanks! This worked for me. Followed each step. Worked first time.

(Note: For beginners, like me, first download the Gallery and If packages. Easy to not spot that use of the If extra. And of course, add some photos to a Gallery using the Gallery component)

☆ A M B ☆
1,780 Posts

Frogabog Reply #5, 13 years, 11 months ago

oops, sorry about that If package thing but yeah, gotta have If installed for the If part to work.

You can also turn the gallery on and of by assigning a radio box TV (*optional_gallery) to your template using

yes==yes||no==no

and using a different If call in the template instead of the chunk itself.

[[If? &subject=`[[*optional_gallery]]` &operator=`EQ` &operand=`yes` &then=`[[$page_gallery]]`]]

Actually, I hardly remember writing this... huh

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

22 Posts

rickardbe Reply #6, 13 years, 11 months ago

So I will need to download If, gallery and get fancybox . That's all?

If i dont have the whole package below what should i get from the source code?
Get the source code in full without installing Flexibility here: https://github.com/DESIGNfromWITHIN/Flexibility

just to be sure

thanks
Rickard

☆ A M B ☆
1,780 Posts

Frogabog Reply #7, 13 years, 11 months ago

Well, the chunks are above, so you don't need the package. The chunks aren't readily available in the source code anyway, due to how it's packaged up.

If you wanted to see the package in all it's goodness, just install in a local test installation and explore it.

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster