Ok, I’ve attached a zip that’s a basic dump of the various bits that went into creating the functionality of the homepage and a Looks page of the site. For those who didn’t make it to MODxpo, here’s a very basic explanation of how each of these pages was done:
Homepage
The homepage starts out with a basic set of div’s and a simple snippet to spit out the list of images to show within the jQuery Cycle instance:
<div id="homelooks">
<div id="homeimages">
[!homepageLooks? &ids=`[*homeLooksOrder*]`!]
</div>
<div id="hometitle"></div>
<div id="homenav"></div>
</div>
If you look at the homepageLooks.snippet.php you’ll see the basic snippet used. All we’re doing is taking the value of a TV called homeLooksOrder, which is nothing more than a comma-delimited list of the page ID’s that hold the information about the pics we want.
On the backend, I took the homeLooksOrder TV, which is just a simple text field, and used a custom ManagerManager widget called Gallery Sorter to create a more elegant way of picking and choosing which images to show on the front-end as well as changing the order. With the widget in place, I can just enter in a rule in my ManagerManager rules:
mm_gallery_sorter('homeLooksOrder','73');
I tell it what TV field to change and what parent to look in for all the info about the images. If you investigate the default !template widget code and compare it to my code, you’ll get a good idea on how this was done. Lots of jQuery related stuff so if you’re not up to speed on jQuery, I suggest you do since ManagerManager widgets and functions are heavily jQuery based.
Looks page
For the Looks page, the jCarousel jQuery plugin needed a JSON object array to feed the images to be shown. As such, I created a special EvoGallery call that spits out a JSON compatible array for a specific variable:
[+phx:if=`[*template*]`:is=`9`:then=`
var lookscarousel_itemList = [
[!Gallery? &display=`images` &type=`carouselJson` &itemTpl=`looks.carouselJson` &itemTplLast=`looks.carouselJsonLast` &sortBy=`sortorder` &gallerySortDir=`ASC`!]
];
looksCarousel(lookscarousel_itemList);
`+]
Since I had to put this in the footer of the document, I added a PHx call that checks to see if the page is using a certain template. From there, I assign a lookscarousel_itemList js variable and use the Gallery snippet to spit out the data. After that, I fire off a looksCarousel function (see the hadleighs.js file for how this function works).
Now, for a quick explanation of the snippet call...
First, the display parameter tells it that I want to display the images associated with this page. You can also choose to display galleries if the page has children with images assigned to them. You can also choose to show a single image as well. (We’ll get to that in just a sec).
Next, I set the type. EvoGallery allows you to set a configuration type, which is just a directory in the root of the EvoGallery snippet folder. In this case, I have a folder named carouselJson, which has the default templates to use for the wrapper, each individual item, and even which CSS and/or JS files to load. Since the JSON result can’t have a comma at the end, I manually set the templates for each item as well as the last item via a set of chunks.
After that I set the order of the results to be based on the order set within the module.
When you click on an image, you’ll notice that it brings up a detail overlay via some jQuery based AJAX. This is all based on a simple connector page that contains another EvoGallery snippet call that grabs the single image referenced by ID in the AJAX call:
[[Gallery? &display=`image` &type=`hadleighs-detail`]]
By default, calling a single image via the ’image’ display parameter expects a variable called ’picId’ using a standard PHP $_REQUEST variable. You can changes this to something else via the picId parameter.
And that pretty much takes care of all the basic bits necessary within MODx itself to create this functionality. The rest is pretty much all wrapped up with my jQuery functions within the hadleighs.js file. Feel free to post questions if you get lost.
Jeff
MODX Staff
☆ A M B ☆
☆ A M B ☆
