MODx Revolution Gallery with Colorbox and Lazy Load

on 01-Feb-2011 | Comments ( 9 ) Tags: Revolution
Seems that Lazy Load doesn't work in some of the latest browsers, specially on mobile devices and Safari(bug). None of the alternatives work on all browsers. The best jQuery solution I found is JAIL and I will try to use it in a future tutorial.
This tutorial doesn't (yet) take advantage of Gallery's tag functionality. If you need tags, you have to do some more digging yourself.

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 Lazy Load (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 class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" />
    </a>
  [[+name]]
</div>

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/jquery.lazyload.mini.js"></script>
    <script src="assets/templates/demo/colorbox/colorbox/jquery.colorbox-min.js"></script>
    
    <script>
        $(document).ready(function () {
            $("img").lazyload({effect : "fadeIn"});
            $("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.
 
Noah Learner
Posts: 8
Comment
cool tut
Reply #9 on : Fri February 04, 2011, 18:08:18
I love colorbox and use it or a modified version of it on most projects. Cool to see it in Revo.

-Noah
MODx enthusiast
Posts: 8
Comment
Modal window size
Reply #8 on : Fri May 20, 2011, 09:05:55
I've been wondering if there's a way to make the MODx gallery open the image in a modal window (doesn't matter if fancybox, colorbox or whatever) with the "height" and "width" depending on the screen resolution?
Sabrina
Posts: 8
Comment
Re: MODx Revolution Gallery with Colorbox and Lazy Load
Reply #7 on : Sat July 02, 2011, 13:16:58
i have tried it, but it doesn't work :( where do i can get the album name?
Sabrina
Posts: 8
Comment
Re: MODx Revolution Gallery with Colorbox and Lazy Load
Reply #6 on : Sat July 02, 2011, 13:21:38
ow never mind.. i was forgotten the ]]
Viktor
Posts: 8
Comment
Codehighlighting
Reply #5 on : Thu October 06, 2011, 16:21:18
How you made highlighting? For me those is a problem. Handle them using &#91 and &#93. Must be other more simple decision in MODx Revolution. (GeSHi and fixedpre don`t work either with TinyMCE).
Nevolov
Posts: 8
Comment
How to make
Reply #4 on : Mon October 31, 2011, 00:33:26
Hello! How to make the gallery loaded at once, without the initial images?
Anonymous
Posts: 8
Comment
Re: MODx Revolution Gallery with Colorbox and Lazy Load
Reply #3 on : Tue November 15, 2011, 02:43:42
vvdsfdsfs
Anonymous
Posts: 8
Comment
Re: MODx Revolution Gallery with Colorbox and Lazy Load
Reply #2 on : Fri March 09, 2012, 02:12:00
page is still busy while images are being loaded. so work on it mate.
cipa
Posts: 1
Comment
Re: MODx Revolution Gallery with Colorbox and Lazy Load
Reply #1 on : Fri March 09, 2012, 06:03:57
There's nothing to work on. The demo works but the server is really slow sometimes. I'll look for a new one asap.

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