Hi all,
it’s only yesterday that I found the very useful snippet [tt]FileDownload![/tt] (see
http://modxcms.com/forums/index.php/topic,3124.0.html and
http://modxcms.com/extras/package/?package=146).
It helped me to populate the slideshow div containing the images for a simple slideshow created by the [tt]cycle[/tt] plugin for jQuery (see
http://jquery.malsup.com/cycle/ ).
Here’s a description of how it works for me - maybe one of you finds that helpful for her/his needs.
(1)
In the head of my template I have the following:
<link href="[(base_url)]assets/css/screen/jqcycle.css" rel="stylesheet" type="text/css"/>
<!-- include jQuery library -->
<script type="text/javascript" src="[(base_url)]assets/js/jquery-1.3.2.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="[(base_url)]assets/js/jquery.cycle.all.latest.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#[[GetField? &field=`cycle-name`]]').cycle({
fx: 'fade'
});
});
</script>
You see that the necessary [tt]jQuery[/tt] files are located in the [tt]assets/js[/tt] directory. The identifier for the slideshow is taken from a TV [tt]cycle-name[/tt], associated with the template.
The option values of this radio button TV are [tt]cycle1||cycle2||cycle3[/tt] and so on, where these names are identical with the subfolder names of a directory [tt]assets/images/jqcycles[/tt]. Being a subdirectory of [tt]assets/images[/tt], the directory [tt]jqcycles[/tt] is accessible and can be filled with picture files via the manager. (To make it simple, I assume that all images are of type [tt]jpg[/tt].)
(2)
In the template you just have to insert a chunk call [tt]{{jqc-div}}[/tt] at the position where you want to show up the slideshow. The chunk [tt]{{jpc-div}}[/tt] contains the call of the snippet [tt]FileDownload[/tt] which will create the slideshow div:
[!FileDownload? &getFolder=`assets/images/jqcycles/[*cycle-name*]` &tplList=`jqc-imagelist-tpl` !]
Again the TV [tt]cycle-name[/tt] is used to identify the wanted folder of pictures.
The output is formatted by another chunk, [tt]jqc-imagelist-tpl[/tt] :
<div class="jqc-show" id="[*cycle-name*]">
<hr>
<img src="[(base_url)]assets/images/jqcycles/[*cycle-name*]/[+filename+]">
<hr>
</div>
Here the two
[tt]<hr />[/tt] [1] [tt]<hr>[/tt] elements are obligatory for the [tt]FileDownload[/tt] snippet - they separate the "header" and the "footer" of its output from the "row template" between them. The source for each picture is the path of the chosen cycle-folder followed by the [tt][+filename+][/tt] placeholder of [tt]FileDownload[/tt]. So the snippet automatically picks up every image file in that folder - whatever their filenames may be.
(3) It works like a treat!
Best wishes to all of you
ottogal
[1] Edit: The seperators in the template have to be [tt]<hr>[/tt] , not [tt]<hr />[/tt] .
