MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)

on 12-Feb-2011 | Comments ( 80 ) Tags: Revolution
This is a remake of the Gallery + Colorbox + Lazy Load tutorial. This one uses a better solution to asynchronously load images. This solution works on Webkit browsers, iPhones and probably iPads.

Setting a Photo Gallery in MODX Revolution is really easy. For this tutorial, I am going to use Colorbox (a customizable lightbox plugin for jQuery) and JAIL (cause I hate pagination).

Prerequisites:

I'm not going to go through the process of setting up any of the above, as it's up to you to install them anywhere you please. I personally prefer "assets/templates/site" but for demos I will use "assets/templates/demo". For simplicity I just drag and dropped the folders and files I downloaded in the "demo" folder.

Let's begin!

Upload your images

In the MODX manager go to Components/Gallery and upload your images. Make sure the albums are active.

Chunks

Set up the following 3 chunks:

DemoGalAlbumRowTpl

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

DemoGalItemThumb

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

Take note of the data-href and src attributes. First is the thumb path and the second can be a loading gif.

DemoGalleryAlbumTpl

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

Template

Here's a simplified template that you can use for your testing purposes. Please make sure the file paths are correct; you can see this in Firebug / Net Tab.

<!doctype html>  

<head>
    <meta charset="utf-8">
    
    <base href="[[++site_url]]" />
    
    <title>[[++site_name]] - [[*pagetitle]]</title>
    
    <link rel="stylesheet" href="assets/templates/demo/colorbox/example1/colorbox.css" />
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="assets/templates/demo/JqueryAsynchImageLoader.min.js"></script>
    <script src="assets/templates/demo/colorbox/colorbox/jquery.colorbox-min.js"></script>
    
    <script>
        $(document).ready(function () {
            $('.gal-item img').asynchImageLoader({placeholder : "assets/templates/site/images/loading-thumb.gif"});
            $("a[rel='colorbox']").colorbox();
        });
    </script>
    
    <style type="text/css">
        
        body{
            font-family: Arial;
            font-size: 16px;
        }
        
        #Content{
            width: 600px;
        }
        
        .gal-item{
            float: left;
            margin: 10px;
            text-align: center;
        }
        
        .gal-item a{
            display: block;
        }
        
        .gal-item img{
            border: solid 4px #CCC;
        }
        
        .gal-item img:hover{
            border: solid 4px #666;
        }
        
    </style>
    
</head>

<body>

    <div id="Content">
        
        <h1>[[*pagetitle]]</h1>
        
        [[*content]]
        
        [[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`0` &rowTpl=`DemoGalAlbumRowTpl` &thumbWidth=`195` &thumbHeight=`140`]]
          
        [[!Gallery? &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`DemoGalleryAlbumTpl` &thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`DemoGalItemThumb` &imageWidth=`800` &imageHeight=`800`]]
        
        [[!If? &subject=`[[+Gallery]]` &operator=`isempty` &then=`
            
            [[+GalleryAlbums]]
        
        ` &else=`
           
            [[+Gallery]]
            
        `]]
       
    </div>

</body>
</html>

DEMO

As always, please post your thoughts below.

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
 
Viktorminator
Posts: 50
Comment
Niiiice tutorial
Reply #80 on : Tue February 15, 2011, 03:37:06
Thanks for the tutorial. I`v translated it in Russian. Maybe someone find it useful http://linuxblog.0fees.net/howto/modx-revolution-galereya-iz-colorbox-i-asinxronnogo-jquery-zagruzchika-kartinok-jail.html
Waiting for new MODx Revo tuts ;)
Viktor
Posts: 50
Comment
template error
Reply #79 on : Tue February 15, 2011, 03:39:21
Check the name of centered bottom box - Lates articles must be LatesT articles
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #78 on : Tue February 15, 2011, 06:17:58
Fixed, thanks
Max
Posts: 50
Comment
photos missing?
Reply #77 on : Thu February 17, 2011, 12:31:06
Hi,

I followed this exactly (I think). When I view the resource page in the front end I get everything (title, "Demo Album 1" link, anchored thumbnail, and "View Gallery" link. But when I click on any of the links I get empty boxes where the actual thumbs go? All of my div class="gal-item" are empty with empty links to the images?

Any idea of how to sort this out? I have been fighting frustration with getting any sort of Gallery system to work with Revo...

Thanks!
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #76 on : Thu February 17, 2011, 12:44:04
I removed a space between ? and & in the DemoGalAlbumRowTpl.
It also seems I forgot to encode some modx tags so they got parsed and removed from the html.

Please update you chunks.

Sorry about this and thank you for letting me know something is not wrong.
Last Edit: February 17, 2011, 12:55:52 by cipa  
max
Posts: 50
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #75 on : Thu February 17, 2011, 12:56:25
I copied the Jail (min version) from that link and have it in my assets/templates/demo folder the same as you do.
Last Edit: February 17, 2011, 12:59:43 by cipa  
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #74 on : Thu February 17, 2011, 13:00:22
Please update the chunks and let me know if it works. A link might help
Max
Posts: 50
Comment
Working now!
Reply #73 on : Thu February 17, 2011, 13:10:53
OK, got it working after updating all three chunks! Thank you!!!

I have been banging my head against the wall for so long now trying to get any sort of functioning success with Revo and Gallery. I feel like popping champagne!

Quick question: Is it OK to change the widths and heights of the thumbs? Also, I see that the imageWidth and imageHeight are both set to 800 in this template? How does that work? Is that a maximum display size for both horizontal and vertical images?

Cheers!!!!

Max
Max
Posts: 50
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #72 on : Thu February 17, 2011, 13:21:44
OK, I tried switching the thumb size to 80x80 pixels. I changed the height and width in both instances in the template and the Thumb chunk. I then cleared the cache and I now have very nice looking rows of square thumbnails that do a great job of representing the full size images! Very cool. I have been battling with creating uniform square thumbs in other systems without having the thumbs only show the top left hand corner of the full image etc.

I think I can now create my own template, layout and custom CSS using all of these building blocks you have illustrated here.

Thanks so much!

Max
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #71 on : Thu February 17, 2011, 13:21:46
You can use whatever size you want for thumbnails. Gallery might have a default imageWidth and imageHeightI.If you want to use the original image you might need to tweak the Gallery snippet or use a different placeholder.
Martin
Posts: 50
Comment
How to call just one gallery
Reply #70 on : Sat February 19, 2011, 06:45:44
HI i wonder how to call just one galley one gallery, instead on showing a gallery list,

thanks
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #69 on : Sat February 19, 2011, 06:52:36
Try [[Gallery? &album=`YOUR ALBUM ID` ...
Untested
Martin
Posts: 50
Comment
i try
Reply #68 on : Mon February 21, 2011, 08:32:06
I try that way and is not woking...
steve
Posts: 50
Comment
Evolution
Reply #67 on : Tue February 22, 2011, 06:11:39
Can anyone tell me would this work in evolution?

Thanks
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #66 on : Tue February 22, 2011, 07:17:18
This Gallery is for MODx Revolution and it won't work in Evolution. What you can do is install MaxiGallery or EvoGallery and adapt the JS part of the tutorial to any of the Evo Gallery solutions
Sintl
Posts: 50
Comment
Display images in gallery
Reply #65 on : Fri March 04, 2011, 15:15:09
Hi,
Thanks for your gallery solution, it works properly. how can we achieve to show images from a Album directly on the page. so it eliminates first stage where it shows album then you go to view images in that album.

Thnx
Sintl
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #64 on : Fri March 04, 2011, 16:33:11
Try [[Gallery? &album=`YOUR ALBUM ID` ...
sintl
Posts: 50
Comment
Display images in gallery
Reply #63 on : Fri March 04, 2011, 22:24:32
Let me rephrase it correctly; I am using as suggested earlier but could not get the result.

I want to get to this page directly

http://modxrules.com/new/demo/jail-modx-revolution-photo-gallery.html?galAlbum=1

eliminate this following page totally

http://modxrules.com/new/demo/jail-modx-revolution-photo-gallery.html

What should I update
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #62 on : Sat March 05, 2011, 06:06:33
I use this:

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


Where album id is a TV

Note: remove the space between [ [ , ] ] , [ + for the code to work
Last Edit: March 07, 2011, 11:49:57 by cipa  
sintl
Posts: 50
Comment
Display images in gallery
Reply #61 on : Sat March 05, 2011, 18:08:14
not working used all possible ways but not working.

my album id is 1


` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`GalleryAlbumTpl`&thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`GalItemThumb` &imageWidth=`800` &imageHeight=`800`]]


Thnx
Sintl
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #60 on : Sat March 05, 2011, 18:16:23
Unfortunately I have no idea why it doesn't work for you. I pasted the code I use in one of my projects.

Make sure you have all the chunks properly set up, your album is active and the placeholder is in your template
sintl
Posts: 50
Comment
Display images in gallery
Reply #59 on : Sat March 05, 2011, 19:13:27
I see the chunks titles are different, this jail model shows them with Demo, your solution shows without Demo. Just wanted to confirm the chunk content is same as given in jail model.
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #58 on : Sat March 05, 2011, 20:53:51
The chunks are made by you so make sure the chunk exists in your manager. If you used Demo... than you need to update the example above
sintl
Posts: 50
Comment
Display images in gallery
Reply #57 on : Sun March 06, 2011, 10:46:34
have used jail model exactly as tutorial, that works perfect. Let me try more if anything resolves to display the images directly rather gallery.
Sintl
Posts: 50
Comment
Display images in gallery
Reply #56 on : Sun March 06, 2011, 18:09:26
Finally got it working thnx your help
Sintl
Posts: 50
Comment
Display images in gallery
Reply #55 on : Fri March 11, 2011, 06:11:32
can you suggest how to modify the code to have download link button so users could download images.
dede
Posts: 50
Comment
question
Reply #54 on : Fri March 11, 2011, 11:20:16
how do you open album in a new page?

like your demo...
if you click on the album it opens a new page listing the pictures..

but with the template, the pictures lists under the album...

anyway, there are some typo errors in the codes, and without and placeholders, everything don't work (i figured it out, i was going mad because it wasn't working -.-)
dede
Posts: 50
Comment
album in new page
Reply #53 on : Fri March 11, 2011, 12:18:31
i've read the upper comments but i can't manage to get it working...

you said to make a "AlbumID" TV, but what input and output type? what values?
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #52 on : Fri March 11, 2011, 12:49:26
I used number and output default
Uldis
Posts: 50
Comment
Multiple Album view.
Reply #51 on : Mon March 28, 2011, 07:18:37
Thank you for your great tutorial. This is almost exactly what I wanted :)

One thing I wanted to ask though.
For testing purposes, I've copied everything exactly as in your tutorial!

My problem is that when pressing on thumbnail, instead of colorbox I get redirected to:
gallery/connector.php?action=web/phpthumb&w=800&h=800&zc=0&far=&q=90&src=%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F4%2F7.jpg

Picture gets opened but without colorbox effect.
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #50 on : Mon March 28, 2011, 07:32:14
Make sure colorbox is properly loaded. Use firebug to detect missing files and JS errors
Uldis
Posts: 50
Comment
Multiple Album view.
Reply #49 on : Mon March 28, 2011, 07:59:47
It seems that everything gets loaded.

Only thing out of the ordinary is "304 Not modified" status on these files:
colorbox.css
JqueryAsynchImageLoader-0.7.min.js
jquery.colorbox-min.js
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #48 on : Mon March 28, 2011, 08:13:13
All I can think of is the javascript not being executed

I am talking about this part
$('.gal-item img').asynchImageLoader({placeholder : "assets/templates/site/images/loading-thumb.gif"});
$("a[rel='colorbox']").colorbox();
Uldis
Posts: 50
Comment
Multiple Album view
Reply #47 on : Mon March 28, 2011, 09:23:55
Yes, it seems that there is problem with this script for me.

I copied everything as is to blank page, and everything worked (did some minor file address changes).

When I tried copying from this blank page to my site page some problems started.
1.My navigation got messed up.
2.Gallery works, but without colorbox, and thumnails.

I did some troubleshooting and it seems that this script you mentioned is causing my problems.

What could I do ?
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #46 on : Mon March 28, 2011, 09:32:26
I can't really help you if you are using the code on an existing site. I can only help you if you use the functionality like above.

There might be some js incompatibilities. That's all I can think of
Uldis
Posts: 50
Comment
Multiple Album view
Reply #45 on : Mon March 28, 2011, 09:52:59
I'm using that functionality exactly as above. Unfortunately no matter if this script is present or removed I cannot get gallery working on my site.
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #44 on : Mon March 28, 2011, 10:26:11
Do you have a link? Any js errors?
Uldis
Posts: 50
Comment
Multiple Album view
Reply #43 on : Mon March 28, 2011, 10:57:27
This is working example: http://uspot.eu/test.html

This is my site where gallery doesn't work: http://uspot.eu/majas-lapas/template-majas-lapa.html

I'm sorry I don't know how to chekc js errors, can I do it in firebug ?
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #42 on : Mon March 28, 2011, 11:07:19
Hi,

Your test page doesn't work. Yes you can check errors with firebug. You have at least 3
Uldis
Posts: 50
Comment
Multiple Album view
Reply #41 on : Mon March 28, 2011, 11:26:29
How do you meand doesn't work ? You can't open it or gallery doesn't work ?

I literally just used it.
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #40 on : Mon March 28, 2011, 11:34:40
One thing I noticed is that jQuery is called last so please make sure jquery is first.

Also, make sure you have everything setup like above

Thanks
Uldis
Posts: 50
Comment
Multiple Album view
Reply #39 on : Mon March 28, 2011, 11:40:35
thank you cipa !!!!

All I needed to do is make jquery call first and everything started to work . :)

Thank you again !
Uldis
Posts: 50
Comment
One last question
Reply #38 on : Mon March 28, 2011, 11:59:32
Could you please point me to following css values used in your chunks ? :

albumPreview
thumb
desc

Thank you :)
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #37 on : Mon March 28, 2011, 12:04:00
None are used in my example. You can see it with Firebug.
Guido Gallenkamp
Posts: 50
Comment
Improvement?
Reply #36 on : Tue April 05, 2011, 02:57:31
Hey Cipa,

thank you a lot! I made some changes to your tutorial and placed them here:
http://modxcms.com/forums/index.php/topic,63109.0.html

You made my day!

Guido
Chris Pink
Posts: 50
Comment
Tutorial?
Reply #35 on : Mon April 18, 2011, 17:03:09
How is this a tutorial? Much as it is nice to have a working example, it's not the easiest bit of code to pull apart.

Some kind of annotation would be nice. Or do we all just 'do it your way'?

I hope you'll excuse my acerbity - it's how I feel after an hour or so trying to reverse engineer your code.
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #34 on : Mon April 18, 2011, 17:29:40
Hi Chris,

See the post above. Another modx user rewrote the tutorial here: http://modxcms.com/forums/index.php/topic,63109.0.html

Please let me know where you want me to add more comments or annotations.

I am sure there is room for improvement unfortunately I did not have time to rewrite it. I would like to make this into a plugin sometime this year
Josh
Posts: 50
Comment
Expanding DIV
Reply #33 on : Tue May 31, 2011, 23:04:17
I am placing a gallery inside a div that has a repeating background that expands with the amount of content on the page. Unfortunately, even though the code for the thumbnails is placed this div, the background is not expanding with the thumbnails.

Here the site. I would appreciate if anyone knows why this might be happening. http://js-creates.com/index.php?id=7&galAlbum=1
Paul
Posts: 50
Comment
thumbnails not showing up
Reply #32 on : Wed June 01, 2011, 21:12:38
Hi!
Thanks for this tutorials!
I'm having a problem though...The thumbnails are not showing. It show a broken image instead. What can be the problem?
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #31 on : Thu June 02, 2011, 06:29:40
Make sure Gallery works on your setup. It can be a path problem or thumbnail generation problem. Maybe you can search the forum for similar problems
Paul
Posts: 50
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #30 on : Thu June 02, 2011, 09:40:36
It was an issue with modx2.1.1 and gallery 1.2rc1. Now it works perfectly with 1.2rc2
Paul
Posts: 50
Comment
A question about tags
Reply #29 on : Fri June 10, 2011, 02:46:57
Hi!
I have a question not necessarily related to your tutorial, which is great by the way, but I was wondering how can I get a list of all the tags and link them to a tag-related gallery.

Is there a way to do that?
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #28 on : Mon June 27, 2011, 17:29:03
Hi,

It should work exactly the same as the official example but I'm not sure if there are any limitations
http://rtfm.modx.com/display/ADDON/Gallery
Tom
Posts: 50
Comment
image size requirements??
Reply #27 on : Fri July 15, 2011, 13:15:44
Must all the images be the same height and width?? This is a weakness of many gallery/slideshow apps.
I haven't yet read about Gallery for Revo, so I don't know anything about it.
Thank you, Tom
@mrhaw
Posts: 50
Comment
Funny!
Reply #26 on : Sat July 16, 2011, 05:07:20
3 times I saw the "JAIL" in action and instead of studying the source code I went to google to search for it. 3 times I failed tracking it down. Now thanks to you, I have the plugin caught in JAIL. :P
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #25 on : Wed July 20, 2011, 12:19:06
@Tom
The images can be any size you want. All the galleries I build work by defining a max width and a max height for the thumbnails and images
Cromzinc
Posts: 50
Comment
Possible...
Reply #24 on : Fri July 29, 2011, 01:48:49
to have all the albums you have on the same page. If so, could you show example of how to please.
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #23 on : Fri July 29, 2011, 06:43:19
@Cromzinc - not sure what you mean. If I add another album in the manager it should automatically appear in the album list. GalleryAlbums snippet should do this automatically
Cromzinc
Posts: 50
Comment
Thanks
Reply #22 on : Fri July 29, 2011, 21:12:19
That does work actually. Although one issue with it. I never shows the image of the last album on the page. If I have two albums, doesn't show image of 2nd. If I have three it doesn't show image of 3rd. etc. How come?

Thanks
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #21 on : Sat July 30, 2011, 07:22:35
Weird. Maybe there's a bug in the latest Gallery snippet; I haven't played with it lately. You should post your code on the forums or update Gallery.
Cromzinc
Posts: 50
Comment
Working...
Reply #20 on : Sat July 30, 2011, 12:23:37
I've actually just deleted that entire album and now all is working as you've designed. I'd like to add the album title and description to the right of the album cover. What do I need to edit for that?
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #19 on : Sat July 30, 2011, 12:25:33
Edit DemoGalAlbumRowTpl
Cromzinc
Posts: 50
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #18 on : Sat July 30, 2011, 13:55:45
Perfect, Thanks a lot.
Rafael
Posts: 50
Comment
Congratulations
Reply #17 on : Wed August 17, 2011, 17:37:08
Congratulations this is a good tutorial
Daz
Posts: 50
Comment
Issue with opacity in FF?
Reply #16 on : Thu August 25, 2011, 11:24:57
Hi cipa,

Have this working great, but have a query.

I am playing with a static background image, that uses opacity on the body{} - css is:

body{
zoom: 1;
color: #eee;
background: transparent url(../../images/m33.png) no-repeat center top;
background-attachment: fixed;
filter: alpha(opacity=80);
opacity: 0.8;
height: 100%;
text-align: center;
font-size: 90%;
}

The background fade works in all the browsers, and the Colorbox works fine in Chrome and IE, but not in FF. The box opens but freezes, none of the controls are responsive. When I click away from the box, the image appears and the box then closes.

I have also tried adding the -moz-opacity as well, but no change.

Any ideas or suggestions?
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #15 on : Fri August 26, 2011, 07:20:57
@Daz
Do you have a link?
kilgoretrout
Posts: 50
Comment
thx dude worked for me
Reply #14 on : Tue September 06, 2011, 11:29:59
really cool tutorial worked for me. at first the javascript was loading properly clashing with a rotating jquery driven image. but eventually i got it to work, and followed your suggestion in the comments for getting gallery to display immediately without intermediary step of showing list of galleries. Thanks, great tutorial
Toby
Posts: 50
Comment
One page gallery
Reply #13 on : Thu September 08, 2011, 05:36:39
Hi There

Great tutorial as I have been looking for a way to get gallery to work with colorbox.

I have your demo working perfectly :-)

I have the same problem as a couple of other posters in that I just want one gallery on one page so I don't need the pagination action.

I've read your reply to others but must admit I don't understand it. Would you mind elaborating on the whole set up for one page and a specific gallery please? I.e. what goes where and what should be replaced.

Your help would be very much appreciated.
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #12 on : Thu September 08, 2011, 06:28:53
Hi

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

remove the spaces from [ [ and ] ]. Just replace ___ALBUM__ID___ with the ID of the Album from the gallery module
Toby
Posts: 50
Comment
Thanks
Reply #11 on : Thu September 08, 2011, 09:13:33
Spot on, thank you. All working now :-) Great tutorial!
Helen Warner
Posts: 50
Comment
Can you filter output by tag?
Reply #10 on : Fri September 23, 2011, 07:11:35
Great tutorial and works great, however, I'd like to use one picture tagged `poster` for the Gallery thumb which when clicked on takes you to the gallery items which are filtered for `equipment` so you no longer see the poster - have tried various options including setting the &tagRequestVar=`equipment` but nothing seems to work - is this possible? ;)
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #9 on : Fri September 23, 2011, 07:34:07
Hi Helen,

Unfortunately I have no idea how to do this. Maybe you ca ask on the forums
Helen Warner
Posts: 50
Comment
Can you filter output by tag? [SOLVED]
Reply #8 on : Fri September 23, 2011, 09:15:37
Managed to get to work by doing the following.

Simply made the first item in my list of images `inactive`, this shows on the GalleryAlbums call but does not show when the Gallery is called.

So simple!
Toby
Posts: 50
Comment
No description in the title attribute
Reply #7 on : Thu October 13, 2011, 00:24:19
Hi. Not sure what I am missing but my title attribute on the images is showing as empty title="" even though I am using in there. Anyone got any idea why that might be? The alt attribute works fine with .
bren
Posts: 50
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #6 on : Sat October 15, 2011, 06:29:18
Hi,

This is a great tutorial, exactly what I was after, and easy to follow.

One question I have though is I am using this gallery within a fixed height div.

I am using auto scroll on the div and on other page the scrollbar shows, however within a gallery of images it doesn't show, it's as if the scroll isn't picking up the content (thumbs). I can infact scroll down but the scrollbar has disappeared as it doesn't see the thumbs.

Any ideas?

Best Regards
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #5 on : Sat October 15, 2011, 06:37:38
Maybe JAIL is not working inside an autoscroll div. Try coding the gallery without JAIL support.
Last Edit: October 15, 2011, 06:38:18 by cipa  
Edwin
Posts: 50
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #4 on : Tue November 29, 2011, 08:19:28
I tried to istall the extra and renamed the zip to Cipa-Gallery-v1.1.0-pl.transport.zip otherwise it don't showup in packagemanager. I get the following errors, what must I edit to get this installed? Thanks!

Could not find package manifest at /home/sites/site4979/web/fresh/core/packages/Cipa-Gallery-v1.1.0-pl/manifest.php
Could not unpack package /home/sites/site4979/web/fresh/core/packages/Cipa-Gallery-v1.1.0-pl.transport.zip to /home/sites/site4979/web/fresh/core/packages/. SIG: Cipa-Gallery-v1.1.0-pl
Could not install package with signature: Cipa-Gallery-v1.1.0-pl
cipa
Posts: 30
Comment
Re: MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
Reply #3 on : Tue November 29, 2011, 08:27:04
Hi Edwin,

The plugin might not be compatible with the current Gallery version or REVO version. It's been at least half a year since I upgraded the code. I don't know when I'll have the time to look into it. Not in the next 3 months for sure

Sorry for the confusion. I'll remove the text from the top of the page
Last Edit: November 29, 2011, 08:28:00 by cipa  
Frederik
Posts: 50
Comment
thumbs not correct after update
Reply #2 on : Wed April 11, 2012, 17:16:37
I updated a website, www.edance.be, with the new gallery 1.5

Now I have the problem that the website is not showing the pics correct.

Check http://www.edance.be/foto.html, and click on an album. You see that instead of putting the thumbs next to each-other, they all under each-other. With the previous version that was not the case.

With the making of the website I followed this article to create the albums.

Everything worked fine with the previous version of gallery.

Modx is on the latest update (2.2.1)

Any idea?
openstep
Posts: 50
Comment
gallery modx
Reply #1 on : Tue February 19, 2013, 06:18:44
Hi I have this gallery in MODX Revolution 2.2.5-pl (traditional).
I can not get the currently selected album to have css on it.
I these:
Chunk: galAlbumRowTpl
<li"`]]><a href="? &=``]]">`]]</a></li>

in my template:
and

there is nothing generated in class="". I do not see why?

Quick modx Evolution Tags

  • cached [[snippet]] or uncached [!snippet!]
  • {{chunk}}
  • [+placeholder+]
  • [*resourceField/TV*]
  • [^timing^]
  • [~link~]

Quick modx Revolution Tags

  • [[snippet]]
  • [[$chunk]]
  • [[+placeholder]]
  • [[*resourceField/TV]]
  • [[~link]]
  • [^timing^]
  • [[++systemSetting]]
  • [[%languageStringKey]]
  • all tags can be called un-cached like: [[! snippet]]

Timing Tags (Evo and Revo)

  • [^qt^] - Query time
  • [^q^] - Query count
  • [^p^] - Parse time
  • [^t^] - Total time
  • [^s^] - Source
© modxRULES! 2009-2014