{"id":19220466,"url":"https://github.com/timgoll/simplebox","last_synced_at":"2025-02-23T09:22:02.941Z","repository":{"id":123885913,"uuid":"108401926","full_name":"TimGoll/simplebox","owner":"TimGoll","description":"A lightweight Fancybox alternative","archived":false,"fork":false,"pushed_at":"2019-02-17T15:15:43.000Z","size":1691,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-04T19:43:44.910Z","etag":null,"topics":["javascript","library","webdev"],"latest_commit_sha":null,"homepage":"https://simplebox.timgoll.de/tests/test.html","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/TimGoll.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}},"created_at":"2017-10-26T11:23:30.000Z","updated_at":"2022-02-17T16:20:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"4cb3934f-acf6-4b14-b7de-6fddc35d4832","html_url":"https://github.com/TimGoll/simplebox","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimGoll%2Fsimplebox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimGoll%2Fsimplebox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimGoll%2Fsimplebox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimGoll%2Fsimplebox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TimGoll","download_url":"https://codeload.github.com/TimGoll/simplebox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240293513,"owners_count":19778531,"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":["javascript","library","webdev"],"created_at":"2024-11-09T14:35:14.967Z","updated_at":"2025-02-23T09:22:02.877Z","avatar_url":"https://github.com/TimGoll.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simplebox\n\nSimplebox, a very lightweight fancy box alternative that doesn't depend on heavy libraries such as JQuery.\n\n## Setup\n\nFirst of all you have to include all necessary files. It should look like this.\n\n```html\n\u003cscript type=\"text/javascript\" src=\"libs/simpleBox.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"libs/simpleBox.css\"\u003e\n```\n\nNow only one step is missing. You have to initialize the library.\n\n```javascript\nwindow.onload = function() {\n    simpleBox.init({\n        offset: 50,\n        background: {\n            blur: {\n                content_id: 'content',\n                radius: 17\n            },\n            color: 'rgba(0,0,0,0.75)'\n        }\n    });\n}\n```\n\nThis init function sets up everything. You can leave the init parameter empty and it defaults to `50px` with a dark non-blurred background. \n\n- `offset:` (`default: 15`) the min distance between the edge of the window and the edge of the image\n- `background`:\n  - `color`: (`default: rgba(0,0,0,0.75)`) a rgba value which defines the background color; set the a part to 0 if you do not want a colored overlay\n  - `blur`: set this data to enable blurring; `content_id` (`default: content`) defines the name of your main element in order to be blurred (do not use the main body!), the radius (`default: 15`) defines how blurry it should be\n\n## Creating Galleries directly from DOM\n\nA gallery is a slideshow of at least one element. There are neither limitations on the item amount nor on the item type. This means that you could combine images with iframes or embedded HTML.\n\n```html\n\u003ca simpleBox=\"gallery\" gid=\"gal_1\" class=\"simplebox_imageLink\" title=\"This title is also displayed inside of the description area\" src=\"test_1_highres.jpg\"\u003e \u003cimg src=\"test_1.jpg\"\u003e \u003c/a\u003e\n\u003ca simpleBox=\"gallery\" gid=\"gal_1\" class=\"simplebox_imageLink\" description=\"This image has no title but a dedicated description tag.\u003cbr\u003eYou can use HTML tags in here\"\u003e \u003cimg src=\"test_2.jpg\"\u003e \u003c/a\u003e\n\u003ca simpleBox=\"gallery\" gid=\"gal_1\" class=\"simplebox_imageLink\" title=\"This title will be overwritten ...\" description=\"... by this description.\"\u003e \u003cimg src=\"test_3.jpg\"\u003e \u003c/a\u003e\n\n\u003ca simpleBox=\"gallery\" gid=\"gal_2\" class=\"simplebox_imageLink\"\u003e \u003cimg src=\"test_1.jpg\"\u003e \u003c/a\u003e\n\u003ca simpleBox=\"gallery\" gid=\"gal_2\" class=\"simplebox_imageLink\"\u003e \u003cimg src=\"test_2.jpg\"\u003e \u003c/a\u003e\n\u003ca simpleBox=\"gallery\" gid=\"gal_3\" class=\"simplebox_imageLink\"\u003e \u003cimg src=\"test_3.jpg\"\u003e \u003c/a\u003e\n\n\u003ca simpleBox=\"iframe\" gid=\"a_cool_iframe\" class=\"simplebox_imageLink\" src=\"file:///Users/tim/Documents/__git/simplebox/tests/test.html\"\u003e \u003cimg class=\"prev\" src=\"test_1.jpg\"\u003e \u003c/a\u003e\n\u003ca simpleBox=\"iframe\" gid=\"a_cool_iframe\" class=\"simplebox_imageLink\" src=\"https://timgoll.de\"\u003e \u003cimg class=\"prev\" src=\"test_1.jpg\"\u003e \u003c/a\u003e\n\u003ca simpleBox=\"html\" gid=\"some_cool_gallery_name\" class=\"simplebox_imageLink\"\u003e \u003cimg class=\"prev\" src=\"test_1.jpg\"\u003e \u003c/a\u003e\n```\n\n### Simplebox Type\n\nThe argument `simpleBox=\"\u003cTYPE\u003e\"` has to be set in order for the library to detect the link. There will be other options at a later point. There are three different supported types right now:\n\n- `image`: A picture is displayed\n- `iframe`: A website is embedded into a popup box\n- `html`: HTML code can be injected from your website and displayed in a box like an iframe; the width and height has to be set in order for the box to be centered\n\n### Gallery ID\n\n`gid` has to be set if you want to have more than one gallery. You can safely ignore it, if you don't plant on adding more galleries. It can be any unique string.\n\n### Title and Description\n\nYou can add a default HTML `title` to the link and its content will be added into the description area. However you can add a dedicated `description` tag in order to add a special description to the image. It accepts HTML.\u003cbr\u003e\nIf an image has no description the footer area is hidden. You can set the `description` tag to an empty string if you want to hide the footer area without renouncing the `title` tag.\n\n### Source\n\nYou need a source tag for every element. There is one special case: images. You do not need a dedicated source tag if the child node is an image with a source tag. But you might consider to add a source tag to the parent link in order to have high resolutin images in the popup and low resolution images in the preview box\n\n### Width and Height\n\nAdditionally there are width and height tags. They defined the max width and height of your box. This could be used in situations where you dont't want to use the max size, like iframes.\n\n### Class Style\n\nThe class `simplebox_imageLink` is just a small helper for you which adds a pointer cursor while hovering over the preview icon. There is no need on using this.\n\n## Creating Galleries with JavaScrip\n\nThere is aa fourth gallery type next to the three previously declared galleries types. It is basically a second HTML variant.\n\n`simplebox.addImage({src, [gallery_id], [description], [width], [height]})`:\u003cbr\u003e\nAdds a new image to the gallery list.\n\n`simplebox.addWebpage({src, [gallery_id], [description], [width], [height]})`:\u003cbr\u003e\nAdds an iframe element to the gallery list.\n\n`simplebox.addInlineHtml({inline, [gallery_id], [description], [width], [height]})`:\u003cbr\u003e\nPass a string as an inline HTML element to a new gallery element. It is recommended to define the width and height in this case in order to have the new element in the center.\n\n`simplebox.addDomElement({element, [gallery_id], [description], [width], [height]})`:\u003cbr\u003e\nPass a new html element to the gallery list. It is recommended to define the width and height in this case in order to have the new element in the center.\n\nCalling each of these functions returns an object with two values inside: `gallery_id` and `element_id`. This object is needed to open a gallery.\n\n`simplebox.displayContent(gallery_data)`:\u003cbr\u003e\nOpens the addressed gallery. The gallery can be defined in DOM or via javascript.\n\n### Example\n\n```javascript\nlet newImgBox = simplebox.addImage({src: 'path/to/example.jpg'});\nsimplebox.displayContent(newImgBox);\n\n//////////////////////////////\n\nlet newElem = document.createElement('div');\nnewElement.setAttribute(\"id\", 'exampleID');\nnewElement.setAttribute(\"class\", 'exampleCLASS');\n\nlet newDomBox = simplebox.addDomElement({element: newElem, width: 600, height: 300});\nsimplebox.displayContent(newDomBox);\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimgoll%2Fsimplebox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimgoll%2Fsimplebox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimgoll%2Fsimplebox/lists"}