{"id":22940852,"url":"https://github.com/scottgriv/javascript-image_carousel","last_synced_at":"2026-05-07T18:46:00.012Z","repository":{"id":210811626,"uuid":"721230595","full_name":"scottgriv/javascript-image_carousel","owner":"scottgriv","description":"Image Upload and Display Tool: This user-friendly application enables uploading and sorting of multiple images. Once arranged, it seamlessly cycles through these images from a designated directory, showcasing them in a sequence for display or informational use.","archived":false,"fork":false,"pushed_at":"2025-01-09T04:13:41.000Z","size":5967,"stargazers_count":0,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T18:32:29.894Z","etag":null,"topics":["image-carousel","images","javascript","jquery","php","xampp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scottgriv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2023-11-20T16:13:20.000Z","updated_at":"2025-01-09T04:13:44.000Z","dependencies_parsed_at":"2024-02-16T02:28:07.407Z","dependency_job_id":"2cfdecb2-8f97-4b6d-b5f1-3e04db1b6cf2","html_url":"https://github.com/scottgriv/javascript-image_carousel","commit_stats":null,"previous_names":["scottgriv/javascript-image_carousel"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottgriv%2Fjavascript-image_carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottgriv%2Fjavascript-image_carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottgriv%2Fjavascript-image_carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottgriv%2Fjavascript-image_carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scottgriv","download_url":"https://codeload.github.com/scottgriv/javascript-image_carousel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246709920,"owners_count":20821297,"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":["image-carousel","images","javascript","jquery","php","xampp"],"created_at":"2024-12-14T13:32:42.663Z","updated_at":"2026-05-07T18:45:59.999Z","avatar_url":"https://github.com/scottgriv.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/scottgriv"],"categories":[],"sub_categories":[],"readme":"\u003c!-- Begin README --\u003e\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n    \u003ca href=\"https://github.com/scottgriv/javascript-image_carousel\" target=\"_blank\"\u003e\r\n        \u003cimg src=\"./docs/images/icon.png\" width=\"200\" height=\"200\"/\u003e\r\n    \u003c/a\u003e\r\n\u003c/div\u003e\r\n\u003cbr\u003e\r\n\u003cp align=\"center\"\u003e\r\n    \u003ca href=\"https://www.javascript.com/\"\u003e\u003cimg src=\"https://img.shields.io/badge/JavaScript-ES13-F7DF1E?style=for-the-badge\u0026logo=javascript\" alt=\"JavaScript Badge\" /\u003e\u003c/a\u003e\r\n    \u003ca href=\"https://www.w3schools.com/html/\"\u003e\u003cimg src=\"https://img.shields.io/badge/HTML-5-E34F26?style=for-the-badge\u0026logo=html5\" alt=\"HTML Badge\" /\u003e\u003c/a\u003e\r\n    \u003ca href=\"https://www.w3schools.com/css/)\"\u003e\u003cimg src=\"https://img.shields.io/badge/CSS-3-1572B6?style=for-the-badge\u0026logo=css3\" alt=\"CSS Badge\" /\u003e\u003c/a\u003e\r\n    \u003cbr\u003e\r\n    \u003ca href=\"https://www.php.net/\"\u003e\u003cimg src=\"https://img.shields.io/badge/PHP-8.2-777BB4?style=for-the-badge\u0026logo=php\" alt=\"PHP Badge\" /\u003e\u003c/a\u003e\r\n    \u003ca href=\"https://releases.jquery.com/jquery/\"\u003e\u003cimg src=\"https://img.shields.io/badge/jQuery-2.1.3-0769AD?style=for-the-badge\u0026logo=jquery\" alt=\"jQuery Badge\" /\u003e\u003c/a\u003e\r\n    \u003ca href=\"https://www.apachefriends.org/blog/new_xampp_20220516.html\"\u003e\u003cimg src=\"https://img.shields.io/badge/XAMPP-8.1.6-FB7A24?style=for-the-badge\u0026logo=xampp\" alt=\"XAMPP Badge\" /\u003e\u003c/a\u003e\r\n    \u003cbr\u003e\r\n    \u003ca href=\"https://github.com/scottgriv\"\u003e\u003cimg src=\"https://img.shields.io/badge/github-follow_me-181717?style=for-the-badge\u0026logo=github\u0026color=181717\" alt=\"GitHub Badge\" /\u003e\u003c/a\u003e\r\n    \u003ca href=\"mailto:scott.grivner@gmail.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/gmail-contact_me-EA4335?style=for-the-badge\u0026logo=gmail\" alt=\"Email Badge\" /\u003e\u003c/a\u003e\r\n    \u003ca href=\"https://www.buymeacoffee.com/scottgriv\"\u003e\u003cimg src=\"https://img.shields.io/badge/buy_me_a_coffee-support_me-FFDD00?style=for-the-badge\u0026logo=buymeacoffee\u0026color=FFDD00\" alt=\"BuyMeACoffee Badge\" /\u003e\u003c/a\u003e\r\n    \u003cbr\u003e\r\n    \u003ca href=\"https://prgportfolio.com\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRG-Silver Project-C0C0C0?style=for-the-badge\u0026logo=data:image/svg%2bxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMjYuMDAwMDAwcHQiIGhlaWdodD0iMzQuMDAwMDAwcHQiIHZpZXdCb3g9IjAgMCAyNi4wMDAwMDAgMzQuMDAwMDAwIgogcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+Cgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwzNC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCmZpbGw9IiNDMEMwQzAiIHN0cm9rZT0ibm9uZSI+CjxwYXRoIGQ9Ik0xMiAzMjggYy04IC04IC0xMiAtNTEgLTEyIC0xMzUgMCAtMTA5IDIgLTEyNSAxOSAtMTQwIDQyIC0zOCA0OAotNDIgNTkgLTMxIDcgNyAxNyA2IDMxIC0xIDEzIC03IDIxIC04IDIxIC0yIDAgNiAyOCAxMSA2MyAxMyBsNjIgMyAwIDE1MCAwCjE1MCAtMTE1IDMgYy04MSAyIC0xMTkgLTEgLTEyOCAtMTB6IG0xMDIgLTc0IGMtNiAtMzMgLTUgLTM2IDE3IC0zMiAxOCAyIDIzCjggMjEgMjUgLTMgMjQgMTUgNDAgMzAgMjUgMTQgLTE0IC0xNyAtNTkgLTQ4IC02NiAtMjAgLTUgLTIzIC0xMSAtMTggLTMyIDYKLTIxIDMgLTI1IC0xMSAtMjIgLTE2IDIgLTE4IDEzIC0xOCA2NiAxIDc3IDAgNzIgMTggNzIgMTMgMCAxNSAtNyA5IC0zNnoKbTExNiAtMTY5IGMwIC0yMyAtMyAtMjUgLTQ5IC0yNSAtNDAgMCAtNTAgMyAtNTQgMjAgLTMgMTQgLTE0IDIwIC0zMiAyMCAtMTgKMCAtMjkgLTYgLTMyIC0yMCAtNyAtMjUgLTIzIC0yNiAtMjMgLTIgMCAyOSA4IDMyIDEwMiAzMiA4NyAwIDg4IDAgODggLTI1eiIvPgo8L2c+Cjwvc3ZnPgo=\" alt=\"Silver\" /\u003e\u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n---------------\r\n\r\n\u003ch1 align=\"center\"\u003eImage Carousel\u003c/h1\u003e\r\n\r\nUpload and Organize Images for Display: This application allows users to upload multiple images and arrange them in a preferred order. After the images are sorted, the application cycles through these organized images stored in a specific directory, presenting them in a sequential display for informational or decorative purposes.\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n    \u003cimg src=\"./docs/images/demo_1.gif\" width=\"30%\" /\u003e\r\n    \u003cbr\u003e\r\n    \u003ci\u003eUpload and sort images.\u003c/i\u003e\r\n\u003c/div\u003e\r\n\u003cbr\u003e\r\n\u003cdiv align=\"center\"\u003e\r\n    \u003cimg src=\"./docs/images/demo_2.gif\" width=\"20%\" /\u003e\r\n    \u003cbr\u003e\r\n    \u003ci\u003eView the images in a carousel on a display.\u003c/i\u003e\r\n\u003c/div\u003e\r\n\r\n---------------\r\n\r\n## Table of Contents\r\n\r\n- [Getting Started](#getting-started)\r\n- [Resources](#resources)\r\n- [License](#license)\r\n- [Credits](#credits)\r\n\r\n## Getting Started\r\n\r\n1. Clone the repository to your local machine.\r\n2. Move the repository to your web server's root directory (such as XAMPP's htdocs folder).\r\n3. Start your web server and navigate to the upload image interface in your web browser.\r\n\r\n    ``ex. http://localhost/javascript-image_carousel/index.html``\r\n4. Click the **Choose Files** button to select the images you want to upload.\r\n5. Rearrange the images in the order you want them to be displayed.\r\n6. Click **Save** to upload the images to the server.\r\n    - The images will be saved to the ``src/uploads`` directory.\r\n7. Navigate to the full ``display.php`` web server address in your web browser.\r\n\r\n    ``ex. http://localhost/javascript-image_carousel/src/php/display.php``\r\n8. The images will be displayed in the order you arranged them in the previous step.\r\n9. Update the `src/config/config.ini` file to adjust the directory paths, image file extensions, and seconds the carousel flips through the images.\r\n10. Utilize the `src/images/upload_testing` by selecting the image files to demo the application.\r\n\r\n\u003e [!NOTE]\r\n\u003e This project is an extension of my [PHP Display Solution](https://github.com/scottgriv/php-display_solution) project, which is a simple script that cycles through image files in a declared directory for informative displays. The [Image Carousel](https://github.com/scottgriv/javascript-image_carousel) project adds the ability to upload and organize images for display without having to manually edit the file names in their directory.\r\n\r\n- See the [Issues List](https://github.com/scottgriv/javascript-image_carousel/issues) for the enhancements needed for this application.\r\n- I'll work on fixing the above in the future, but eel free to submit a pull request if you would like to contribute to this project and add the above features.\r\n\r\n## Resources\r\n\r\n- [JavaScript](https://www.javascript.com/)\r\n- [HTML](https://www.w3schools.com/html/)\r\n- [CSS](https://www.w3schools.com/css/)\r\n- [PHP](https://www.php.net/)\r\n- [jQuery](https://jquery.com/)\r\n- [XAMPP](https://www.apachefriends.org/index.html)\r\n\r\n## License\r\n\r\nThis project is released under the terms of the **MIT License**, which permits use, modification, and distribution of the code, subject to the conditions outlined in the license.\r\n- The [MIT License](https://choosealicense.com/licenses/mit/) provides certain freedoms while preserving rights of attribution to the original creators.\r\n- For more details, see the [LICENSE](LICENSE) file in this repository. in this repository.\r\n\r\n## Credits\r\n\r\n**Author:** [Scott Grivner](https://github.com/scottgriv) \u003cbr\u003e\r\n**Email:** [scott.grivner@gmail.com](mailto:scott.grivner@gmail.com) \u003cbr\u003e\r\n**Website:** [linktr.ee/scottgriv](https://www.linktr.ee/scottgriv) \u003cbr\u003e\r\n**Reference:** [Main Branch](https://github.com/scottgriv/javascript-image_carousel) \u003cbr\u003e\r\n\r\n---------------\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n    \u003ca href=\"https://linktr.ee/scottgriv\" target=\"_blank\"\u003e\r\n        \u003cimg src=\"./docs/images/footer.png\" width=\"100\" height=\"100\"/\u003e\r\n    \u003c/a\u003e\r\n\u003c/div\u003e\r\n\r\n\u003c!-- End README --\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscottgriv%2Fjavascript-image_carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscottgriv%2Fjavascript-image_carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscottgriv%2Fjavascript-image_carousel/lists"}