Moodle plugins directory: Slideshow | Moodle.org
Slideshow
This is a new block which creates a slideshow in the header of a site or course page. It uses jquery/cycle to handle the image transitions. Jquery is also used to manipulate the DOM to reposition the block's node into the heading div of the page.
Since this is dependent on using moodle's built in jquery functions, it is not available for versions prior to 2.5.
It works with all core Moodle Themes except "Clean" due to an issue with the theme's ability to load Jquery correctly (MDL-41516)
Update: This block will work with the Clean theme on Moodle version 2.5.2 where MDL-41516 has been fixed.
Tested with:
- Afterburner
- Anomaly
- Arialist
- Binarius
- Boxxie
- Brick
- Formal White
- FormFactor
- Fusion
- Leatherbound
- Magazine
- Nimble
- Nonzero
- Overlay
- Serenity
- Sky High
- Splash
- Standard
(it may work with some third party themes, but most likely not with any bootstrap based theme due to MDL-41516. If you have a third party theme and it doesn't work, send me a link to your site and I will update the code.)
Installation:
Download, extract, and upload the "Slideshow" folder into moodle/blocks
Global Configuration:
- Set maximum number of slides in a slideshow
- Set maximum file size of slides
Instance Configuration:
- Title - Set title of slideshow (leave blank to hide block's heading)
- Height - Sets height of slideshow and images **NOTE** this block will not rescale image files, it will only change the display size
- Transition - Choose from various slide transitions (some are a bit clunky, but most work well)
- Delay - Sets the time for which a single slide is displayed
- Background color - Clicking in this textbox triggers a colorpicker
- Display as normal block - Selecting this will have the block appear in a side column instead of being embedded in the header
- Transparent - Clicking this overrides the background color setting and makes the background transparent
- Image selector - Will only accept gif, jpg, or png files
If anyone is interested in using this block as a normal block...
Comment out the following two lines on: "blocks/slideshow/block_slideshow.php"
//$('#inst" . $this->instance->id . "') .appendTo('#" . $node . "');
//$('#page-header').css('height', 'auto');
Paul, please consider add a setting in the UI for the above hack. I think It could be very useful.
Nadav
Let me play around with it to see what is the best way to do this.
I just translated your slideshow add-on in AMOS (http://lang.moodle.org/) into Mexican Spanish, and it is working well
But, there are a few English words that seem to be hard-coded and can not be translated:
Seconds (in Display time dropdown list)
Transition Speed (dropdown list): Tenth second, Quarter second, half second, 1 Second...
cancel & choose in the background color chooser tooltip
I think that if these words were declared as string variables in the Lang folder, then they would be available for translators to translate into languages other than English.
Thanks for this very nice Moodle add-on. I think it would be even nicer if the above changes can be made (but I am not a programmer and I do not know how difficult that might be).
German Valero
Thank you for your suggestions. I sent you an email with an updated language file that contains strings for all the select boxes.
Unfortunately, I couldn't change the "choose" and "cancel" in the color picker because it is a javascript file and I am not sure that the php language strings can work in a javascript file. So, instead I changed "Choose" to "OK" and "Cancel" to "X". I figure those are fairly universal
Send me back the Mexican Spanish translation and I will put both your language file and mine in the next update.
Paul
The new version works beautifully and translates perfectly.
THANKS.
I added a Moodle Docs page for this plugin at http://docs.moodle.org/25/en/admin/setting/blocksettingslideshow that will show when a user clicks on "Moodle Docs for this page" while configuring the Global settings for this plugin.
Please feel free to add or correct that page.
Yours sincerely,
German Valero
Since your theme is modified, I am a bit reluctant to include the fix in the block. However, I think you can easily modify it yourself.
Try putting the following two lines of code:
#contentwrapper { top: 0 !important; }
.block.block_slideshow { margin-top: 46px !important; }
at the very top of the style.css file that is in the slideshow block's directory (i.e. slideshow/style.css)
Don't forget to purge your caches to see the effect.
Let me know how it turns out.
Paul