Slideshow

Blocks ::: block_slideshow
Maintained by My HeroPaul P.
A block that inserts a slideshow in the header of the front page or course page. Features include customizable background colors, transition types, speeds, and size.
Latest release:
266 sites
77 downloads
45 fans
Current versions available: 2

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

Screenshots

Screenshot #0
Screenshot #1
Screenshot #2

Contributors

My Hero
Paul P. (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments RSS

Comments

  • Anthony Borrow
    Fri, 13 Sept 2013, 11:54 AM
    Paul - Many thanks for sharing this plugin with the Moodle community. In reviewing the plugin, I noticed that you do not explicitly declare the GPL license in your files. It is recommended that all files contain information about the license - see http://docs.moodle.org/dev/Coding_style#Files and http://docs.moodle.org/dev/version.php for more detailed information. If you could add the license information to your files that would be greatly appreciated (at least the version.php file at a minimum). I also strongly encourage folks to share the source, tracker and documentation URLs with the entry so that those using the code can collaborate with you and help you to maintain the code. For now, I'm going to mark this as needing more work to give you time to tidy things up. I have tested the block and it installs and works as expected. Thanks for sharing your creativity. Please do not hesitate to let me know if there is anything I can do to be supportive of your efforts. Peace - Anthony
  • My Hero
    Fri, 13 Sept 2013, 1:33 PM
    Thanks for your help, Anthony. I made all the changes (I think). Please take a look and let me know if there is anything else that needs to be done.
  • Anthony Borrow
    Fri, 13 Sept 2013, 1:49 PM
    Paul - Thanks for making quick work of that. I added a tracker URL. When you get a chance it would be good to provide some documentation. There are some recommendations about creating a page in Moodle Docs at http://docs.moodle.org/en/Development:Guidelines_for_contributed_code. I'm going to go ahead and approve this and when you get a chance to create the documentation you can edit this entry and add the URL. Alternatively, if you simply wanted to point to the README file that would be acceptable (at least initially). Keep up the great work! Peace - Anthony
  • Nadav Kavalerchik
    Sun, 15 Sept 2013, 3:51 AM
    Thank you Paul for a beautiful and very useful plugin!

    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 smile
  • My Hero
    Sun, 15 Sept 2013, 11:25 PM
    Thanks for the compliment and suggestion. I will try and the controls for allowing the block to show normally in the side, but unfortunately it is not as easy as the code you provided. A good deal of css must be changed as well. If you only comment out the two lines, the block will behave correctly, but it will look different than other blocks because the border, background, padding and rounding will all be invisible.

    Let me play around with it to see what is the best way to do this.
  • My Hero
    Mon, 16 Sept 2013, 8:37 AM
    Okay Nadav, you got what you asked for - version 0.4.0 adds in the functionality of having the block act like a regular block. Via the settings, there is a checkbox that when clicked, allows the block to work like a regular one. I managed to also preserve the css of regular blocks as well.
  • Germán and Temudgin
    Tue, 17 Sept 2013, 10:25 AM
    Hi Paul,

    I just translated your slideshow add-on in AMOS (http://lang.moodle.org/) into Mexican Spanish, and it is working well smile

    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
  • My Hero
    Tue, 17 Sept 2013, 1:31 PM
    Hi German,

    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 smile

    Send me back the Mexican Spanish translation and I will put both your language file and mine in the next update.

    Paul
  • Germán and Temudgin
    Wed, 18 Sept 2013, 10:28 AM
    Hi 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
  • My Hero
    Wed, 18 Sept 2013, 10:34 AM
    Thanks for setting up the documentation page for me. I added the link to the plugin. Let me know if you have any other ideas of making it better.
  • Chris Chapman
    Wed, 18 Sept 2013, 4:44 PM
    Hi- great block - however doesnt work too well with Aardvark 2.4 (non-bootstrap) in the header position- any advice?
  • My Hero
    Wed, 18 Sept 2013, 7:20 PM
    Hi Chris - Aardvark isn't a standard theme so I haven't tested slideshow on it. Give me a little time and I'll look into it.
  • My Hero
    Thu, 19 Sept 2013, 8:06 AM
    Hi Chris,

    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
  • Nadav Kavalerchik
    Sun, 22 Sept 2013, 10:23 PM
    Thanks Paul (for the Normal block feature)
Please login to post comments