[SOLVED] How to open albums overlaying the page?

15 Posts

PuPpEt Reply #1, 13 years, 1 month ago

I would like to know how can i achieve this: http://modxrules.com/new/demo/jail-modx-revolution-photo-gallery.html
If you click on the album, it lists every picture inside it like in a new page...

i would like to know how to do it for my albums, because when i open them, everything is listed below it.

Any help?

i’ve read on cipa tutorial-site, he use &album=`[[*AlbumID]], where AlbumID it’s a TV.. but how i create that TV? what input and output types i choose? what values?

1,624 Posts

cipa Reply #2, 13 years, 1 month ago

Hi,

Did you find a solution to your problem?

You can also try using the number of the album directly in the code

[[Gallery? &album=`13` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`GalleryAlbumTpl` &thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`GalItemThumb` &imageWidth=`800` &imageHeight=`800`]]
[[+Gallery]]

or the name of the album

[[Gallery? &album=`MyAlbum` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`GalleryAlbumTpl` &thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`GalItemThumb` &imageWidth=`800` &imageHeight=`800`]]
[[+Gallery]]

Make sure the chunks are correctly set up. If you are using [[*AlbumId]] put [[*AlbumId]] in your template and make sure the values is correctly shown
Another thing you can do is to disable the cache on the page. Let me know if this makes a difference.

Thanks

Responsive CSS Grid: cipalabs.com/projects/metal/
Blog: MODX Tutorials & Articles

15 Posts

PuPpEt Reply #3, 13 years, 1 month ago

No difference sad

disabling cache makes no difference.
if i put &album= string with/without using TV, pictures inside the album are directly listed, and always below the album in the same page (you don’t need to click on album to show the pictures list)

i don’t know what to do to show the pictures in a "new page" when clicking on the album, like your demo

1,624 Posts

cipa Reply #4, 13 years, 1 month ago

Maybe there is an error in my demo. Do you have a link? Can you also post the code: snippet + chunks

Responsive CSS Grid: cipalabs.com/projects/metal/
Blog: MODX Tutorials & Articles

15 Posts

PuPpEt Reply #5, 13 years, 1 month ago

This is the resource content:

[[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`0` &rowTpl=`danyAlbumRowTpl` &thumbWidth=`195` &thumbHeight=`140`]]

[[!Gallery? &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`danyAlbumContainer` &thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`danyItemThumb` &imageWidth=`800` &imageHeight=`800`]]

[[!If? &subject=`[[+Gallery]]` &operator=`isempty` &then=`[[+GalleryAlbums]]` &else=`[[+Gallery]]`]]

[[+GalleryAlbums]]
[[+Gallery]]

danyAlbumContainer:

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

danyAlbumRowTpl:

<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>

danyItemThumb:

<div class="[[+cls]]">
    <a href="[[+image]]" rel="colorbox" title="[[+description]]">
    	<img data-href="[[+thumbnail]]" class="[[+imgCls]]" src="[[++base_url]]assets/templates/portfolio/images/loading_thumb.gif" alt="[[+name]]" width="195" height="140"/>
    </a>
  [[+name]]
</div>

i’m working on local so i don’t have a link

15 Posts

PuPpEt Reply #6, 13 years, 1 month ago

up...

15 Posts

PuPpEt Reply #7, 13 years, 1 month ago

SOLVED! you simply don’t need &album= string, you don’t need any string..

you just need to download "IF" module package......... i was thinking it was already an integrated module of modx..

remove the [[+Gallery]] and [[+GalleryAlbums]] place holder, because you don’t need them (it’s already the string with IF that call the placeholders)

son you just need these:

[[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`0` &rowTpl=`danyAlbumRowTpl` &thumbWidth=`195` &thumbHeight=`140`]]

[[!Gallery? &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`danyAlbumContainer` &thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`danyItemThumb` &imageWidth=`800` &imageHeight=`800`]]

[[!If? &subject=`[[+Gallery]]` &operator=`isempty` &then=`[[+GalleryAlbums]]` &else=`[[+Gallery]]`]]