Tutorial Using Galleriffic with Gallery

1. Install package. Im assuming if youre reading this tutorial that you have already done this :) a. The Gallery package auto installs the galleriffic files and the standard jquery library to the assets/components/gallery/packages/galleriffic20 folder(youll see why this is important later) Add the following script to the header of your template that will be accessed by your slideshow page (it is extremely important that you have the coding and path correct otherwise it will not work at all, and youll be wondering what is going on, when the real problem is that jquery is not working): a. <script type="text/javascript" src="assets/components/gallery/packages/galleriffic20/js/jquery-1.3.2.js"></script> If you already have jquery installed, you can reference that path or you can alternately use a direct link as follows: <script type=text/javascript src=http://code.jquery.com/jquery-1.4.2.min.js</script> Now to call the snippet.. I initially got confused here, because I assumed I needed to make the snippet call, then either create a new chunk or add a layout to my page with placeholders. Actually Splitting Red (Hes a big part of the engine behind ModX and the creator of the Gallery package) already created a chunk that is being called. What is confusing is that the chunk doesnt exist in the manager, nor is the css file that you may have referenced in your template. If you are familiar with Galleriffic, youll know they provide five examples. Splitting Red created a chunk from example 2 on the galleriffic site, which also connects to the galleriffic-2.css (located in the folder mentioned in #1 above). So if you want your layout to look like example 2, then you really dont need to do a whole lot, other than set the parameters that he has provided here: http://rtfm.modx.com/display/ADDON/Gallery.Plugins.Galleriffic . He lists also the custom properties from Galleriffic (but they are not all there i.e. I wanted to increase the delay between slides, which is simply &delay you can see all of the custom properties within the jquery.galleriffic.js file located at assets/components/gallery/packages/galleriffic20/js starting around line 66 var defaults = ( .. Youll see that the modx documentation has most of them and is only missing a few.. So if you want to make some simple, quick changes to colors and styles, you can edit the galleriffic-2.css file located at assets/components/gallery/packages/galleriffic20/css You can change the layout and structure by editing the chunk files directly. These are galleriffic.chunk.tpl and gallerifficitemThumb.chunk.tpl and they are located at core/components/gallery/elements/chunks . Lets say you wanted to do what I did and use example 5 instead of example 2.. The modx documentation mentions some of the ids that will need to be changed/added to in the chunk:

2.

3.

4. 5. 6.

Name gallerifficThumbTpl gallerifficContainerTpl Name thumbsContainerSel imageContainerSel captionContainerSel controlsContainerSel loadingContainerSel

Overrides thumbTpl containerTpl Description

Description The thumb chunk to use for each item The container Chunk to wrap content with.

Default Value gallerifficitemThumb galleriffic Default Value #gal-gaff-thumbs #gal-gaff-slideshow #gal-gaff-caption #gal-gaff-controls #gal-gaff-loading

The CSS selector of the container holding the thumbnails The CSS selector of the container holding the main image. The CSS selector of the container holding the caption The CSS selector of the container holding the nav controls The CSS selector of the container holding the loading screen.

7.

To explain this better, let me show you an example if I were trying to duplicate exactly what Splitting Red did when converting example-2.html from galleriffic to a Chunk (you can find this example from Galleriffic in the assets/components/gallery/packages/galleriffic20 folder and you can find the galleriffic.chunk.tpl, the new chunk, in the core/components/gallery/elements/chunks folder).

This image shows the conversion process from example-2.html to galleriffic.chunk.tpl. First, remove all the header information.. the rest is explained in the image itself:

8. 9.

The gallerifficitemthumb.chunk.tpl is a little more straight-forward w/out any substitutions for ids or classes. It is built the same way you would build a chunk for the gallery layout w/out galleriffic. Now for a walk-through I created a photo gallery for a site I am working on it is located at http://www.nativitycelebration.com/index.php?id=10 (this may have changed to http://www.nativitycelebration.com/photos.html by the time you read this). I wanted a layout where the thumbnails were on the bottom (I wanted them to scroll w/out paging havent quite figured out how to connect the correct javascript behavior to all hopefully Splitting Red can chime in on this one - so I settled for the paging as I have it now). I wanted the slideshow controls above the slideshow.. Example 5 was the closest to what I wanted, so here we go.. a. The Snippet Call (not in the best order, but its all the same) [[!Gallery? &album=`Nativity Sets` &autoStart=`1` &gallerifficThumbWidth=`86` &gallerifficThumbHeight=`86` &plugin=`galleriffic` &imageWidth=`690` &imageHeight=`480` &navigationWidth=`700px` &numThumbs=`8` &prevPageLinkText=`< Prev` &nextPageLinkText=`Next >` &enableTopPager=`0` &defaultTransitionDuration=`500` &delay=`4000`]] &album: Im pulling from the Nativity Sets album I created in the manager using the Gallery component (under your Components tab &autoStart=`1` : default is off, but I wanted it to auto start. &gallerifficThumbWidth=`86`: I wanted 8 thumbs across the bottom and this width makes them fit perfectly. &gallerifficThumbHeight: no explanation needed here. &plugin=`galleriffic` : needed if using galleriffic &imageWidth / &imageHeight: slideshow images max sizes. &navigationWidth=`700px`: sets the width of the thumbnails container (not sure if this will override any css settings or vice versa) &numThumbs=`8`: number of thumbs in the nav container

&prevPageLinkText=`< Prev`: I actually needed to set this When I created my own chunk and custom css, I was left with my prev link saying next instead so I had next for previous and next.. Glad this parameter existed. &enableTopPager=`0`: by default the galleriffic-2.html example has paging on top of the thumbs and again below. .But this doesnt look very good when you have one horizontal line of thumbs.. At first, I just created a new css class (div.top) and set it to display:none; until I found that this handy parameter existed. &defaultTransitionDuration=`500`: Dont confuse this with the time delay between slides.. Its is the amount of time for the fade animation to occur. &delay=`4000`: this one does set the time delay between slides (1000 = 1 sec). This is not mentioned in the modx documention but is in the jquery.gallerific.js file as mentioned in #3 above. There is no need to put anything else in the page other than the snippet call (everything else the you can edit is in the Chunks and css files). 10. Time for me to edit the Chunk to my liking.. As I said earlier, I think example 5 is closest to what Im looking to do. a. First of all Im going to make a backup copy of galleriffic.chunk.tpl (located at core/components/gallery/elements/chunks . b. Next, I will create a backup for example-5.html (located in assets/components/gallery/packages/galleriffic20 c. The example-5.html contents replaces the content, and becomes the new galleriffic.chunk.tpl. d. I now make the necessary changes: 1. I delete all header info and the <body> tag and also the <div id=page> 2. <div id=container> : is my starting div that gets changed to <div id=galleriffic> 3. I delete the <h1> and <h2> containers that follow. 4. Under <!--- Start Advanced Gallery Html Containers is <div classnavigation-container> , in my case I really dont need this, so I delete. 5. *Notice that this template is following a different order than we had in example 2, where the slideshow container and controls was at the top (Im going to fix that, but changing what needs to be changed first). 6. The next div is <div id=thumbs class=navigation> . This gets changed to <div id=gal-gaff-thumbs class=navigation> 7. Since I couldnt get the javascript working right, I deleted the <a> container with the pageLink prev and also the pageLink next one further down. 8. <ul class=thumbs noscript> stays the same 9. As described in the image in #7, I delete all of the code between the <ul> tags</ul> and insert a placeholder [[+thumbnails]] 11. Below the closing </ul> tag is the slideshow container, which I move up and place starting just below the first div (<div id=galleriffic>) so now I have the following at the top of my Chunk (with changes in red): <div class="content"> <div id=gal-gaff-gallery class=gal_main> <div class="slideshow-container"> <div id="controls" class="controls"></div><div id=gal-gaff-controls class=controls></div> <div id="loading" class="loader"></div><div id=gal-gaff-loader class=loader></div> <div id="slideshow" class="slideshow"></div><div id=gal-gaff-slideshow class=slideshow></div> </div> <div id="caption" class="caption-container"><div id=gal-gaff-caption class=caption-container></div> <div class="photo-index"></div><deleted this div didnt need it> </div> </div> 12. Now I need to edit my css file which is the galleriffic-2.css file located at assets/components/gallery/packages/galleriffic20/css .. I wont go into all the details where to edit this css file and what new classes to add. Im assuming your familiar with css and will know what to do here. Tip for newbies though > FireFoxs firebug add-on is your friend

13. I didnt make any changes to the gallerifficitemthumb.chunk.tpl file itself, after making all changes to the other files, there was no need. 14. You could also instead of just replacing the existing chunks, create your own chunks and set the snippet parameters to point to those. However you prefer. 15. This is all I have for now. I hope it is helpful for those trying to wrap their head around the Gallery component and getting it to work with Galleriffic. I hope you have at least discovered something new that is helpful. Will be great if this component is eventually updated with all of the galleriffic examples as options we can choose from within the component (ex: &plugin=`galleriffic-1` for example 1 and so forth.. Probably something I could help with, let me know Splitting Red.