Automatic Slideshow Based on Blueimp Gallery

  • So... Time for an update. Using pure UIKit2 is cumbersome for slides and slideshows, especially when you use a touch-enabled device, such as an iPad. I was not really satisfied with the result and will revert back to blueimp for the time being. This library is quite great. At the moment, the extension supports (fullscreen) slideshows as well as in-line slideshows. If you want to see how the latter is looking like, have a look here: You can also include multiple slideshows on the same page. The plugin is response and you can also slide through using your keyboard (left/right, space to start/stop the show).

    Before I continue and do some programming, I would like to know what people would like first: Such as setting the size of the slides, alignment (left, center, right), thumbnails, ...

    PS: If anyone knows how to remove the black background of the blueimp carousel, please, let me know. And: Happy weekend.

  • PS: If anyone knows how to remove the black background of the blueimp carousel, please, let me know. And: Happy weekend.

    Maybe in the code where the background color to specify black and transparency ? Although....maybe it's my delirium ...but still :)

  • The Gallery Extension works now with Carousel (inside slideshow), as well as fullscreen slideshows. The Carousel can be aligned/sized to taste using uk-width-1-2 uk-container-center or alike. The only thing I could not get running: I would like to usesomething like

    1. <img src='storage/Images/XXX.jpg" class="uk-thumbnail uk-thumbnail-mini">

    to specify the size of the thumbnails. However, the defines the WITH of the thumbnail and I want all of them the same HEIGHT. Anyone knows how to specify that all images are of the same HEIGHT (so it actually looks like on the demo page - but these thumbnails are all fixed size irrespective of the device).

  • Nice one i see that you fixed the black bars problem too! Nice job Mercator, so beside the uikit own slideshow this one could be a good alternative. Did you had some time to open a github project?

    It would be interessting to see the speed difference compared to uikit v3 slideshow / slideset component and the java script from the gallery extension.



  • Yes, I did. But it somehow does not "feel good". Attached is a zip file you can extract into your packages directory. To use it:

    1. Create a Directory called Images within your /storage directory
    2. Within Images, create a Directory test and upload your images in there
    3. Go to any page and add (mercator_big){"dir":"test", "mode":"carousel", "position":"uk-width-1-1", "duration":"3500", "options":"transitionSpeed:500"} to add a Carousel.
    4. Alternatively, go to any page and add (mercator_big){"dir":"test") to produce thumbnails that will turn into a fullscreen slideshow when clicked upon.

    Note: Upon first call, thumbnails and scaled images are created and that takes some time. If you want to compare times, make sure you measure AFTER the initial creation of these scaled images/thumbs.

    Please, let me know what you think.



      (27.92 kB, downloaded 115 times, last: )

    So long and thanks for all the fish!

    Edited 2 times, last by Mercator ().

  • Fossy, can you make some tests and I will do some more beautification and documentation. Also, I'd appreciate your view as to what else we should support, e.g., a Carousel with scrollable thumbnails below or things like that. Or: Define the sizes of the thumbnails, e.g., on one page you want to have larger thumbnails (e.g., 200px), where as on others you want small ones (e.g., 80px).

  • here is the installer packager :) you just need to zip the dir in, just use that one and extend however you need. You cloud provide me a link to the github repo then we can work a bit together on this one to have a nice user experience. If you make changes then just increase the version number in package.json as composer.json file write something in and you good to got. Zip without any root folders, this is your package then. I put your package unziped in mercator -> blueimp so if i change to blueimp directory and zip from there then it is working fine. By the way you have this ugly .MACOSX folder this and .DSStorage files. Those you should put on ignore or delete them manually :=)

  • I get this error if use the widget code from line number 4:

    ContextErrorException in CreateGallery.php line 58: Notice: Undefined index: options

    p.s. had to change it from: (mercator_big){"dir":"test") to: (mercator_big){"dir":"test"} to get this awesome whoops message :D

    OK. Fixed.