{"id":16091071,"url":"https://github.com/palerdot/albumize","last_synced_at":"2025-03-18T06:30:59.039Z","repository":{"id":10121512,"uuid":"12190723","full_name":"palerdot/albumize","owner":"palerdot","description":"Albumize is a jQuery plugin that lets you manage collection of images in the web page as albums. With albumize, you can browse albums, add cover image to albums and switch between albums.","archived":false,"fork":false,"pushed_at":"2016-04-20T09:59:42.000Z","size":8163,"stargazers_count":18,"open_issues_count":0,"forks_count":7,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-12T00:35:56.503Z","etag":null,"topics":["album","albumize-plugin","javascript","jquery-library","jquery-plugin"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/palerdot.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}},"created_at":"2013-08-18T05:20:32.000Z","updated_at":"2024-05-06T08:53:25.000Z","dependencies_parsed_at":"2022-08-27T12:42:44.267Z","dependency_job_id":null,"html_url":"https://github.com/palerdot/albumize","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palerdot%2Falbumize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palerdot%2Falbumize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palerdot%2Falbumize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palerdot%2Falbumize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/palerdot","download_url":"https://codeload.github.com/palerdot/albumize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243909893,"owners_count":20367536,"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":["album","albumize-plugin","javascript","jquery-library","jquery-plugin"],"created_at":"2024-10-09T15:08:36.468Z","updated_at":"2025-03-18T06:30:58.430Z","avatar_url":"https://github.com/palerdot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Albumize\n========\n\n##Albumize is a jQuery plugin that lets you manage collection of images in the web page as albums. With albumize, you can browse albums, add cover image to albums and switch between albums.\n\n**********************************************\n\n[Download Albumize plugin](https://github.com/palerdot/albumize/archive/master.zip)\n\n[Demo and Documentation](http://palerdot.github.io/albumize)\n\n**********************************************\n\n### Setting up Albumize plugin\n\n1. Download and unzip the albumize plugin package. \n\n2. Add the jQuery library to the web page.\n\n\t\t```\n\t\t\t\u003cscript src=\"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"\u003e\u003c/script\u003e\n\t\t```\n   This example uses jQuery library from the google CDN. You can also add your own copy of latest jQuery library or add from the `js` folder.\n   \n3. Add `albumize.js` file from the `js` folder.\n\n\t\t```\n\t \t\t\u003cscript src=\"js/albumize.js\"\u003e\u003c/script\u003e\n\t \t```\n4. Add `albumize.css` file from the `css` folder. This is the stylesheet albumize plugin uses for styling its components.\n\n\t\t```\n\t \t\t \u003clink href=\"css/albumize.css\" rel=\"stylesheet\" /\u003e \n\t \t```\n   The stylesheet `albumize.css` looks for image icons in the `img` folder by default.\n   \n**********************************************\n\n## Activating Albumize\n\n### Markup\n\n\t\t```\n\t \t\t \u003cdiv class=\"albumize\" title=\"Album title\"\u003e \n\t \t\t \n\t\t\t\t\u003ca href = \"large-image-1.jpg\" title=\"image title\"\u003e \n\t\t\t\t\t\u003cimg src=\"thumbnail-1.jpg\"\u003e \u003c/img\u003e\n\t\t\t\t\u003c/a\u003e\n\t\t\t\t\n\t\t\t\t\u003ca href = \"large-image-2.jpg\" title=\"image title\"\u003e \n\t\t\t\t\t\u003cimg src=\"thumbnail-2.jpg\" class=\"albumize-cover\"\u003e \u003c/img\u003e\n\t\t\t\t\u003c/a\u003e\n\t\t\t\t\n\t\t\t \u003c/div\u003e\n\t \t```\n\n1. Add `class = \"albumize\"` to the div holding the collection of images to be shown as an album.\n\n2. Add `title = \"Album title\"` to the div of `class = \"albumize\"` to add an album title. Album title is optional.\n\n3. Add `title = \"image title\"` to the anchor element to add a title for the image. Image titles are optional.\n\n4. Add `class = \"albumize-cover\"` to the image element within the anchor, to add the corresponding thumbnail as the cover for the album. If more than one image is given the `class = \"albumize-cover\"`, then the **first image** element with `class 'albumize-cover'` will be used for the album cover. In the given example markup, thumbnail of second image will be used as album cover. Album covers are optional.\n\nThe given markup is the required structure for a single album. For adding more than one album, repeat the same structure to other collection of images. For example, if you want to show 5 albums, then your HTML will have 5 divs of `class = \"albumize\"`.\n\n### Activation\n\nThe above markup **automatically** activates albumize plugin when the images are clicked. However, if you would like to have a custom button to show the list of your albums (as shown in the examples previously), you should programatically trigger like this:\n\n\t\t\t```\n\t\t\t\t//Here, $ is the alias of jQuery. Replace '#show-my-albums-button' with your own button/element id. \n\t\t\t\t\n\t\t\t\t $('#show-my-albums-button').click(function(){\n\t\t\t\t\t$.albumize();\n\t\t\t\t });\n\t\t\t\t \n\t\t \t```\nThis method can be handy if you don't want to show images in your web page, and just want to have a single button to show all your albums. In such cases, you can hide the images and trigger the albumize plugin programatically with a button click.\n\n****************************************************************************************************\n\nAlbumize uses CSS3 transitions for animations. Albumize displays thumbnails in a handy scrollable mini window to select images, which enables faster access of albums with large number of images. Check out the [live demo](http://palerdot.github.io/albumize).\n\n****************************************************************************************************\n\nAlbumize is an open source project, free to use in personal and commercial projects. If you want to report a problem or an issue, please raise an [issue on GitHub.](https://github.com/palerdot/albumize/issues)\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpalerdot%2Falbumize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpalerdot%2Falbumize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpalerdot%2Falbumize/lists"}