{"id":16592713,"url":"https://github.com/prikhi/bootstrap-gallery","last_synced_at":"2026-04-25T03:15:49.041Z","repository":{"id":62419402,"uuid":"227058617","full_name":"prikhi/bootstrap-gallery","owner":"prikhi","description":"An Elm Library for Rendering a Modal Gallery with Bootstrap v4 \u0026 FontAwesome","archived":false,"fork":false,"pushed_at":"2020-10-07T20:27:01.000Z","size":489,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-17T01:36:39.910Z","etag":null,"topics":["bootstrap","elm","fontawesome","gallery","modal"],"latest_commit_sha":null,"homepage":"https://package.elm-lang.org/packages/prikhi/bootstrap-gallery/latest/","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prikhi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-10T07:45:33.000Z","updated_at":"2022-05-23T17:30:46.000Z","dependencies_parsed_at":"2022-11-01T16:48:09.757Z","dependency_job_id":null,"html_url":"https://github.com/prikhi/bootstrap-gallery","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prikhi%2Fbootstrap-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prikhi%2Fbootstrap-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prikhi%2Fbootstrap-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prikhi%2Fbootstrap-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prikhi","download_url":"https://codeload.github.com/prikhi/bootstrap-gallery/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242240794,"owners_count":20095331,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","elm","fontawesome","gallery","modal"],"created_at":"2024-10-11T23:22:01.463Z","updated_at":"2026-04-25T03:15:44.003Z","avatar_url":"https://github.com/prikhi.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Elm Bootstrap Gallery\n\n[![Elm Bootstrap Build Status](https://travis-ci.org/prikhi/bootstrap-gallery.svg?branch=master)](https://travis-ci.org/prikhi/bootstrap-gallery)\n\n\nThis package allows you to pop-open a model gallery for flipping through images\nor displaying a single image in a lightbox.\n\nIt uses style animations to fade the modal in \u0026 out and to fade between images.\nClickable elements allow viewers to scroll through images or dismiss the modal.\n\nThe CSS classes used in the rendering function tie this to Bootstrap v4.\nFontAwesome is used for the Next, Previous, \u0026 Close icons. In the future, this\nmay be made more customizable and CSS-framework agnostic(Pull Requests\nwelcome!).\n\nWe try to leverage as many Bootstrap classes as possible, but some manual\nstyles are still required for proper rendering of the modal. One day these\nmight be transferred into inline-styles while maintaining the ability to\ncustomize the styling.\n\nIt was originally developed for the [Foundation for Intentional Community's\nWordpress Theme][fic-theme] and was extracted from that repository for use in\n[Southern Exposure's Website][sese-website].\n\nThere is an [example application][example-app] included in the repository.\n\n[![Elm Bootstrap Gallery Example Screenshot](https://raw.githubusercontent.com/prikhi/bootstrap-gallery/master/screenshot.png)](https://raw.githubusercontent.com/prikhi/bootstrap-gallery/master/screenshot.png)\n\n\n## Usage\n\nStart by importing the `BootstrapGallery` module:\n\n```elm\nimport BootstrapGallery as Gallery\n```\n\nNow build a `Config a` type for your image type. E.g., if you have a type like:\n\n```elm\ntype alias ImageData =\n    { thumbnail : String\n    , original : String\n    }\n```\n\nThen your `Config ImageData` would look like:\n\n```elm\ngalleryConfig : Gallery.Config ImageData\ngalleryConfig =\n    { thumbnailUrl = .thumbnail \u003e\u003e Just\n    , imageUrl = .original\n    }\n```\n\nIf the `thumbnailUrl` function returns a `Nothing`, the `imageUrl` will be used\nfor any thumbnails.\n\nNext add the Gallery state to your `Model`:\n\n```elm\ntype alias Model =\n    { gallery : Gallery.Model ImageData\n    , images : List ImageData\n    }\n\ninitialModel : Model\ninitialModel =\n    { gallery = Gallery.initial\n    , images = [imageOne, imageTwo]\n    }\n```\n\nYou'll also need to add a value to your `Msg` type for wrapping the\n`Gallery.Msg ImageData` messages, as well as a subscription \u0026 update branch:\n\n```elm\ntype Msg\n    = GalleryMsg (Gallery.Msg ImageData)\n\nsubscriptions : Model -\u003e Sub Msg\nsubscriptions model =\n    Sub.map GalleryMsg (Gallery.subscriptions model.gallery)\n\nupdate msg model =\n    case msg of\n        GalleryMsg subMsg -\u003e\n            ( Gallery.update galleryConfig subMsg model.gallery model.images\n            , Cmd.none\n            )\n            |\u003e Tuple.mapFirst (\\gallery -\u003e { model | gallery = gallery })\n```\n\nFinally you can render the modal. Use the `thumbnails` function to render a\ngrid of thumbnails, or use the `openOnClick` attribute to hook up existing\nimages:\n\n```elm\nview : Model -\u003e Html Msg\nview model =\n    div []\n        [ Gallery.thumbnails galleryConfig model.images\n            |\u003e Html.map GalleryMsg\n        , Gallery.modal model.gallery\n            |\u003e Html.map GalleryMsg\n        ]\n```\n\nNote that this won't make the modal useable. You will need to define some\nadditional CSS styles for the modal. See the [example application's\nstyles][example-styles] for inspiration.\n\n\n## Contribute\n\nContributions, feature requests, \u0026 bug reports are always welcome!\n\n\nThere is an `.nvmrc` \u0026 `package.json` in this directory, so you can run `nvm\nuse \u0026\u0026 npm i` to get all the development tools installed.\n\nRun `npm run serve` to build, watch, \u0026 serve the example application at\nhttp://localhost:8000.\n\nRun `npm run lint` to launch a server at http://localhost:8001 for linting the\ncode and `npm run docs` to launch a server at http://localhost:8002 for\npreviewing the documentation.\n\n\n## TODO\n\nThese are things that weren't necessary for the FIC or SESE modals, but would\nbe nice for other library consumers:\n\n* Store list in model? Currently don't have it so thumbnails \u0026 next/prev\n  could have different sets of images.\n* Dim current \u0026 show spinner while waiting for next/prev image to load\n    * Do we stack the current and next image on top of each other, with a\n      spinner in between?\n* Esc \u0026 arrow keys to close/navigate\n    * It seems like this'd require subscriptions to ports that bind the onkeyup\n      events to the document. Which means some documentation \u0026 example code for\n      eventual package.\n    * Or maybe we could focus part of the modal when it opens so we can catch\n      events on there?\n* Allow showing row of thumbnails below image or bottom of screen.\n* Reduce need for an external stylesheet. Maybe bundle this with more\n  configuration options for how to render the Modal.\n\n\n## License\n\nBSD-3-Clause, exceptions possible.\n\n[fic-theme]: https://github.com/Foundation-For-Intentional-Community/Wordpress-Theme\n[sese-website]: https://github.com/Southern-Exposure-Seed-Exchange/southernexposure.com\n[example-app]: https://github.com/prikhi/bootstrap-gallery/tree/master/example\n[example-styles]: https://github.com/prikhi/bootstrap-gallery/blob/master/example/dist/styles.css\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprikhi%2Fbootstrap-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprikhi%2Fbootstrap-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprikhi%2Fbootstrap-gallery/lists"}