Working Code: Gallery and Colorbox

☆ A M B ☆
339 Posts

gallenkamp Reply #1, 15 years, 6 months ago

This small tutorial is based on this tutorial

1. get Colorbox (mini) http://colorpowered.com/colorbox/
2. get JAIL (mini) http://www.sebastianoarmelibattana.com/projects/jail

Install Gallery (via Package Manager). No problem here.

Extract Colorbox zip.
Upload all content of "colorbox/example1/" to "assets/templates/templatename/colorbox".
Delete "index.html".

Upload JAIL to "assets/templates/templatename/colorbox".

Create category "Gallery"

Create chunk "AlbumContainer":

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

Create chunk "AlbumRowTpl":

<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">Galerie betrachten</a>
    </div>
</div>

Create chunk "ItemThumb":

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

The resource has the code which shows either albums OR the image thumbnails of a chosen album:

[[+Gallery:notempty=`
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="assets/templates/templatename/colorbox/JqueryAsynchImageLoader-0.8.min.js"></script>
<script src="assets/templates/templatename/colorbox/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="assets/templates/templatename/colorbox/colorbox.css" />
	    <script>
	        $(document).ready(function () {
	            $('.gal-item img').asynchImageLoader({placeholder : "assets/templates/templatename/colorbox/images/loading.gif"});
	            $("a[rel='colorbox']").colorbox();
	        });
	    </script>

[[!Gallery?  &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`AlbumContainer` &thumbWidth=`280` &thumbHeight=`280` &thumbTpl=`ItemThumb` &imageWidth=`1400` &imageHeight=`800` ]]

[[+Gallery]]

`:default=`
<h1>Bildergalerie</h1>
[[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`0` &rowTpl=`AlbumRowTpl` &thumbWidth=`140` &thumbHeight=`140`]]
[[+GalleryAlbums]]`
]]

Use it, show it and spread MODX laugh

Guido

Currently working example (will move to client server in some time):
http://bergischer-ring.bytethinker.com/galerie.html

44 Posts

krisj Reply #2, 15 years, 6 months ago

NICE!

is it possible to get it to work with friendly urls? say: site.com/photo.html/#photo01

i guess thats just down to htaccess rules?

1,161 Posts

Photowebmax Reply #3, 14 years, 8 months ago

I know this is an old thread...

I really like this system. I have deployed it on one site and it displays the gallery albums nicely.

I have a new project that has several site nav links to separate galleries. If you have one main Gallery page then this system will display all of the albums that get added by the Gallery system. But I am spreading my albums across several pages. Some pages I want just one specific album to display while on other pages I want several specific albums to display (not all of the albums though).

For example: say my site navigation looks like this:

Home | Apples | Oranges | Vegetables

The Apples and Oranges pages contain a single album for apples and oranges respectively.
But the Vegetables page needs to display several albums like Carrots, Peppers, and Onions. I want the Vegetables page to continue dynamically adding new vegetable albums as they are created. But I do NOT want the Vegetables page to show the Apples and Oranges albums. With me here?

The chunk I am using just to display the "apples" album (album #1) on the Apples page looks like this:

[[Gallery? &album=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`DemoGalleryAlbumTpl` &thumbWidth=`80` &thumbHeight=`80` &thumbTpl=`DemoGalItemThumb` &imageWidth=`1000` &imageHeight=`800`]]
[[+Gallery]]

I could add a TV to present the specific album number as well.

My chunk to have the Vegetables page to display all of the albums looks like this:

[[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`0` &rowTpl=`DemoGalAlbumRowTpl` &thumbWidth=`80` &thumbHeight=`80`]] [[!Gallery? &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`DemoGalleryAlbumTpl` &thumbWidth=`80` &thumbHeight=`80` &thumbTpl=`DemoGalItemThumb` &imageWidth=`1000` &imageHeight=`800`]] [[!If? &subject=`[[+Gallery]]` &operator=`isempty` &then=` [[+GalleryAlbums]] ` &else=` [[+Gallery]] `]]

With this code the Vegetables page will display the Carrots, Peppers, and Onions albums. But the Vegetables page is ALSO displaying the Apples and Oranges albums. Not wanted!!!

What is the roadmap for making sure the Vegetables page will only present specific albums that I want? Is there a way I can add a list of albums I do not want displayed with this snippet call chunk?

Thanks!

[ed. note: Photowebmax last edited this post 14 years, 8 months ago.]

24,544 Posts

BobRay Reply #4, 14 years, 8 months ago

I'm not that familiar with Gallery, but from looking at the docs, I'll make a wild guess that on the Apples and Oranges page, you'd want to set &limit=`1` and &start to the index of the album you want to show. You might also need to set &showAll=`0`.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

1,161 Posts

Photowebmax Reply #5, 14 years, 8 months ago

I will try that. The other thing I am looking into are the Active and Prominent check boxes in the albums themselves (with adjusted snippet calls).

I think this is doable though...

34 Posts

pirateghost Reply #6, 14 years, 5 months ago

Glad I found this post. Extremely helpful in accomplishing my end goal. Now I just have two little hurdles, and I would love if someone could help me out here.

I have my galleries in a particular structure:
-> Gallery Main Category - A
--> Gallery Sub Category - 1
---> Gallery Sub Category - a <<this is member submitted content for Sub Category 1, sorted by username

What I am trying to accomplish is this:
-> Page A (want to show a thumbnail listing of Sub Category - 1 albums here)
--> Page 1 (want to show a thumbnail listing of Sub Category - a albums here)
---> Page a (displays actual gallery of selected Sub Category - a album)

to add a big twist to this, I need to paginate everything while keeping total count on a page down to 9. I have no problems creating a resource that belongs to ONE gallery and paginating that with getPage snippet, but any time I try and implement this into the above, i break it all....I am chasing my tail in circles trying to figure this out and I know it is something simple that I am missing. Can anyone lend a hand?

34 Posts

pirateghost Reply #7, 14 years, 5 months ago

i want to thank enogu from IRC for helping me out with this. he gave me a snippet to use that pulled the images from deeper down in the gallery directories, and pointed me in the right direction for what i need to do.

it looks like i can accomplish the gallery browsing using 2 calls. in one:
AlbumRowTpl i have changed

<a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]"><img src="[[+image]]" alt="[[+name]]" /></a>

with

<a href="[[~[[*id]]]][[+name:lcase]]/"><img src="[[+image]]" alt="[[+name]]" /></a>

in the last directory in my gallery paths, i will use:

<a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]"><img src="[[+image]]" alt="[[+name]]" /></a>

instead so that it drills down to the Page 1, and then it presents the Sub Galleries a,b,c,d in thumbnail format

all that is left is pagination and some styling...then a whole lot of code to clean up from me trying so many different things

THANKS ENOGU!

2 Posts

bgilomen Reply #8, 14 years, 3 months ago

For the life of me, I cannot get this working... keep getting
"Fatal error: Call to a member function set() on a non-object in /core/components/gallery/model/gallery/galalbum.class.php on line 255"

Has something changed in the recent revision to gallery or revo that is causing this to not work?

2 Posts

bgilomen Reply #9, 14 years, 3 months ago

Just an update, I uninstalled gallery and downgraded to 1.4... it works fine now. So something in the newer version is what doesn't allow this setup to work.

113 Posts

claro_santiago Reply #10, 14 years, 2 months ago

It works in 2.2.4, very helpful..I wonder where can I found its CSS for my customization. I'm looking for 'gal-item-active'. Just in case I want pagination, where can I tweak it?

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