I was asked recently how to go about making a Generico template to implement an auto-play slideshow in Generico. The auto-play slideshow in question was from this tutorial.
https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/
This is actually a good example of how you can use Generico, so I thought I would share it here.
In the case of the auto-playing slideshow from the tutorial, the simplest way is to have two Generico templates (as we do for tabs), 1 for the slide show container and 1 for the slide show items. It would be possible to use just one template as we do in the
imagegallery. But lets keep it as close to the original tutorial as possible for now, and leave that as an exercise.
1. Create a slideshow template
We put the CSS from the tutorial into the Custom CSS area.
We put the javascript into the custom script area.
We need to check “AMD” to make JQuery available to the template.
(Not all 3rd party libraries support AMD, but luckily here we do not need any).
We also need to add the html for the slideshow, but without each image element. Note that we split the closing and opening html into the “body” and “end” text areas. This will create an opening and a closing Generico string. We need this because we will be putting slideshow items in between these tags on the page.
Finally we give our template a key that identifies it, and save the template.
.
2. Create a Slideshow item template
This is very simple. All we need to do is to add div opening and closing in the “body” and “end” text areas of the template. Then give our template a key and asave it.
3. Try it out
Now we need to go to a page with an html editor in Moodle, add slideshow filter strings and between them add slideshow items.
First go to a page with an html editor, and choose the Generico icon (a G ) from the Atto editor.
Then add a slideshow and several slideshow items.
The resulting html editor view will be this.
Then in each of the slideshow items, add the image (or other content). Like this …
When the page is displayed you will have the slideshow.
4. The files
You can get the finished templates yourself if you wish to look at them. Right click to download the slideshow and slideshowitem template bundles.
To use the bundles, drag each over the green bundle box on an empty template to fill in the fields (as in the screenshot below). Then save the template.
5. Improvements
As mentioned earlier it would be possible to do all of this in one template. It would just require some CSS magic, and possibly a little javascript.
In addtion to this, personally I would not be happy to have the id of the slideshow hardcoded to “slideshow.” This is because it makes it impossible to have two slideshows in a page. Instead I would use the Generico @@AUTOID@@ variable as the id and I would add a css class “slideshow” to the slideshow container div. I would then alter the CSS which currently acts on the “slideshow” id to use the “slideshow” class. (NB you can not use Generico variables in the custom css area, so using @@AUTOID@@ there would not work).
