Giter Club home page Giter Club logo

slideshow's Introduction

slideShow

a slideshow feature in html

  • can Choose Folder to use all image files in that folder for the slideshow.
  • can Choose Files to select multiple image files in a folder for the slideshow.
  • use spacebar or mouseclick to play/pause.
  • use left/right arrows to force moving backward/forward respectively. this works no matter it's in play/pause mode.
  • click the index number, located at the top-right corner, to toggle between chronological order and random order. when it's in random order, a red border is shown around the index number whereas no border is shown when it's in chronological order. remark: since the pool size (how many images are loaded) too low (typically, one or zero) can cause problem to the code (and random order for 2 images is meaningless), i added a checking that this toggle will only work when the pool size is bigger than 2.
  • you can exclude the current image from the slideshow. the control is located at the bottom-right corner. it will be shown at pause-mode. besides, since this feature will impact what has been recorded in the random order history (if any), so i took a simple solution, that is, to purge the random order history and force it back to chronological order if it was on random order when Exclude was clicked. but why bother adding this feature: with this feature, you may just Choose Folder (i.e. load all images in that folder) and exclude those images you don't want by clicking Exclude after everything is loaded. for some occasions, this way may be easier than using Choose Files. that said, the main usage probably is, using this feature to exclude a few images, as necessity arises on the spot, rather than redoing the loading process all again.
  • can drop image(s) onto the slideshow. if the source (image) is already existing in the slideshow, the dropped image will be skipped to avoid duplication of the same image in the slideshow. this feature should work on both "drag from webpage" and "drag from file explorer". remark: for webpage, "dragging a single image" is intuitive whereas "dragging multiple images" is accomplished by dragging a text-range-selection which covered multiple images.

Change log:

  • Jul 11, 2024    added the feature to enable image(s) to drop onto (append to) the slideshow. and added an extra registry (the sources.Loaded) to avoid same source (image), caused by drop, from loading again if it's already existing in the slideshow.

  • Jul 9, 2024    added a feature to exclude the current image from the slideshow. and made some adjustments. not because there are any problems encountered, but these can make it more robust anyway.

  • Jul 5, 2024    cosmetic tweaks: the "loader" controls were always shown. from now on, they will be hidden in "play" mode, and shown only in "pause" mode. the "index number" control on the other hand, with some flexibility, yet still can be hidden if necessary. a rightclick on it can dismiss it. and, "pause" mode will bring all controls back (shown), including "index number".

  • Jul 3, 2024    added a random order feature; and bug fixes.

slideshow's People

Contributors

headwindtrend avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.