{"id":27992758,"url":"https://github.com/code-mike-code/js-image-gallery","last_synced_at":"2025-08-12T21:08:42.673Z","repository":{"id":291944470,"uuid":"979290431","full_name":"code-mike-code/js-image-gallery","owner":"code-mike-code","description":"The task was to implement a dynamic image slider that activates when clicking on a gallery image. All HTML and CSS were provided and could not be modified—JavaScript was the only layer open to change. ","archived":false,"fork":false,"pushed_at":"2025-05-07T10:28:54.000Z","size":29201,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T10:51:16.348Z","etag":null,"topics":["custom-events","javascript","js-events"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/code-mike-code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-07T09:34:09.000Z","updated_at":"2025-05-07T10:28:57.000Z","dependencies_parsed_at":"2025-05-07T11:01:37.341Z","dependency_job_id":null,"html_url":"https://github.com/code-mike-code/js-image-gallery","commit_stats":null,"previous_names":["code-mike-code/js-image-gallery"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-mike-code%2Fjs-image-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-mike-code%2Fjs-image-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-mike-code%2Fjs-image-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-mike-code%2Fjs-image-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/code-mike-code","download_url":"https://codeload.github.com/code-mike-code/js-image-gallery/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253131055,"owners_count":21858933,"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":["custom-events","javascript","js-events"],"created_at":"2025-05-08T18:42:01.166Z","updated_at":"2025-05-08T18:42:05.245Z","avatar_url":"https://github.com/code-mike-code.png","language":"JavaScript","readme":"# JavaScript: Gallery Slider\n\nSee the live version of [Gallery Slider](https://code-mike-code.github.io/js-image-gallery/).\n\nAbout the Project:\n\nThis project was completed as part of my learning path with the mentor program at devmentor.pl. The goal was to understand and work within an existing JavaScript codebase, extend functionality using custom events, and follow a predefined coding convention.\n\n\n## 📸 Project Description\nThe task was to implement a dynamic image slider that activates when clicking on a gallery image. All HTML and CSS were provided and could not be modified—JavaScript was the only layer open to change.\n\nThis project emphasized reading and extending someone else's code—a real-world skill that prepares you for collaborative software development in teams of varying seniority.\n\n## 🔑 Key Functionalities\n### Custom Events System\nThe gallery slider operates based on CustomEvent architecture:\n\njs-slider-img-click: Launches the slider with the clicked image.\n\njs-slider-img-next: Moves to the next thumbnail image.\n\njs-slider-img-prev: Moves to the previous thumbnail.\n\njs-slider-close: Closes the slider when clicking outside the image area.\n```\nconst fireCustomEvent = function(element, name) {\n    const event = new CustomEvent(name, { bubbles: true });\n    element.dispatchEvent(event);\n}\n```\n\n\n![](./assets/img/img1.png)\n\n### Dynamic Gallery Interaction\nClicking an image opens the corresponding group of thumbnails and displays a zoomed-in view.\n\nNavigation is handled via arrow buttons, utilizing the data-slider-group-name attribute to organize images into logical sets.\n\n\u0026nbsp;\n\n## 🧩 Additional Features\n### Infinite Looping\nIf the user reaches the last image, the gallery seamlessly loops back to the first (and vice versa).\n\n\u0026nbsp;\n\n### Auto-Slideshow\nThe gallery can be enhanced to automatically cycle through images after a specified interval, creating a hands-free slideshow experience.\n\n\u0026nbsp;\n\n## 💡 Technologies\n\u003cimg src=\"https://skillicons.dev/icons?i=html,css,javascript\" /\u003e\u003cbr/\u003e\n\n\u0026nbsp;\n\n## 🔗 See also\nIf you're interested in JavaScript-based UI projects, check out my other project: [Excursions Order Panel](https://code-mike-code.github.io/excursions-order-panel/)\n\n\u0026nbsp;\n\n## 💿 Installation\nNo installation required – open index.html in your browser.\n\n\u0026nbsp;\n\n## 💭 Conclusions for future projects\nCustom Events – Great for decoupling and modularizing logic.\n\nCode Comprehension – Working within another developer’s codebase helps build adaptability.\n\nDOM Manipulation – Hands-on experience with addEventListener, event delegation, and dataset attributes.\n\nEvent Propagation – Understanding bubbling and controlling event flow is crucial in interactive UIs.\n\nThis project offered practical exposure to building scalable JavaScript features in collaboration-driven environments.\n\n\u0026nbsp;\n\n## 🙋‍♂️ Feel free to Reach Out!\nHave feedback or questions? Curious about how this project works under the hood? Feel free to open an issue or reach out—I'd love to connect!\n\n\u0026nbsp;\n\n## 👏 Thanks / Special thanks / Credits\nSpecial thanks to devmentor.pl for providing this real-world exercise and mentorship support.\n\n\u0026nbsp;\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-mike-code%2Fjs-image-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode-mike-code%2Fjs-image-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-mike-code%2Fjs-image-gallery/lists"}