{"id":22487148,"url":"https://github.com/yairEO/photobox","last_synced_at":"2025-08-02T19:34:04.923Z","repository":{"id":5824006,"uuid":"7039437","full_name":"yairEO/photobox","owner":"yairEO","description":"A lightweight CSS3 image viewer that is pretty to look and and easy to use","archived":true,"fork":false,"pushed_at":"2019-04-07T10:31:42.000Z","size":904,"stargazers_count":750,"open_issues_count":16,"forks_count":280,"subscribers_count":80,"default_branch":"master","last_synced_at":"2024-11-26T20:51:23.634Z","etag":null,"topics":["gallery","image-viewer","photobox"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yairEO.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":"2012-12-06T17:03:13.000Z","updated_at":"2024-11-03T20:26:12.000Z","dependencies_parsed_at":"2022-08-31T16:50:22.988Z","dependency_job_id":null,"html_url":"https://github.com/yairEO/photobox","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yairEO%2Fphotobox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yairEO%2Fphotobox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yairEO%2Fphotobox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yairEO%2Fphotobox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yairEO","download_url":"https://codeload.github.com/yairEO/photobox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500212,"owners_count":17930009,"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":["gallery","image-viewer","photobox"],"created_at":"2024-12-06T17:15:58.988Z","updated_at":"2024-12-06T17:16:29.953Z","avatar_url":"https://github.com/yairEO.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"photobox\n========\n\nA lightweight CSS3 image \u0026 video viewer that is pretty to look and and easy to use.\n\n\n# [Demo page](http://yaireo.github.io/photobox/)\n\n\n## Benefits\n\n*    Lightweight! `jquery.photobox.js` is only 5kb (gziped \u0026 minified)\n*    Silky-smooth, hardware accelerated, CSS3 transitions and animations (for better performance)\n*    Support videos via iframe embedding\n*    Stunning UI and user-friendly UX\n*    Built so everything could be changed directly from the CSS\n*    Observes DOM changes (if images were added/removed) and adapt accordingly\n*    CSS3 pre-loader, tailored-made\n*    Uses event-delegation on all thumbnails clicks (obviously...)\n*    Uses HTML5 History to update location with the currently viewed image\n*    The only image is a pre-loader animation for old IE. For the rest, no images at all!\n*    Browsers support: IE8+ (graceful degradation), Modern browsers\n\n\n## Functionality\n\n*    Images/videos can be zoomed in and out with mousewheel and navigated using mousemove to move around\n*    Bottom row of thumbnails, navigated by mouse movement, can be resized using the mousewheel\n*    Shows the image's 'alt' or 'title' attribute text at the bottom\n*    Indicate the index of the current viewed image in relation to the total, like so: (36/100)\n*    Touch-friendly swipe left/right to change image. Swipe up/down to toggle the thumbnails stripe\n*    Supports looping after first and last images\n*    Auto-playing of images at a set interval (see \"time\" in Settings)\n*    Supports keyboard keys for navigation and closing the gallery view\n*    In case there was an error loading an image, a message is shown, which can be configured via CSS\n\n\n## Basic use-case example:\n\n```html\n\u003cdiv id='gallery'\u003e\n    \u003ca href=\"http://www.somedomain.com/images/image1_large.jpg\"\u003e\n        \u003cimg src=\"http://www.somedomain.com/images/image1_small.jpg\"\n            title=\"photo1 title\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"http://www.somedomain.com/images/image2_large.jpg\"\u003e\n        \u003cimg src=\"http://www.somedomain.com/images/image2_small.jpg\"\n            alt=\"photo2 title\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"http://www.somedomain.com/images/image3_large.jpg\"\u003e\n        \u003cimg src=\"http://www.somedomain.com/images/image3_small.jpg\"\n            title=\"photo3 title\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"http://www.somedomain.com/images/image4_large.jpg\"\u003e\n        \u003cimg src=\"http://www.somedomain.com/images/image4_small.jpg\"\n            alt=\"photo4 title\" data-pb-captionLink='Google website[www.google.com]'\u003e\n    \u003c/a\u003e\n    \u003ca href=\"http://www.youtube.com/embed/W3OQgh_h4U4\" rel=\"video\"\u003e\n        \u003cimg src=\"http://img.youtube.com/vi/W3OQgh_h4U4/0.jpg\"\n            title=\"PEOPLE ARE AWESOME 2013 FULL HD \"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n...\n...\n...\n\u003cscript\u003e\n    // applying photobox on a `gallery` element which has lots of thumbnails links.\n    // Passing options object as well:\n    //-----------------------------------------------\n    $('#gallery').photobox('a',{ time:0 });\n\n    // using a callback and a fancier selector\n    //----------------------------------------------\n    $('#gallery').photobox('li \u003e a.family',{ time:0 }, callback);\n    function callback(){\n       console.log('image has been loaded');\n    }\n\n    // destroy the plugin on a certain gallery:\n    //-----------------------------------------------\n    $('#gallery').photobox('destroy');\n\n    // re-initialize the photbox DOM (does what Document ready does)\n    //-----------------------------------------------\n    $('#gallery').photobox('prepareDOM');\n\u003c/script\u003e\n```\n\n\n## Videos\n\n```html\n\u003cdiv id='gallery'\u003e\n    ...\n    \u003ca href=\"http://www.youtube.com/embed/W3OQgh_h4U4\" rel=\"video\"\u003e\n        \u003cimg src=\"http://img.youtube.com/vi/W3OQgh_h4U4/0.jpg\"\n            title=\"PEOPLE ARE AWESOME 2013 FULL HD \"\u003e\n    \u003c/a\u003e\n    ...\n\u003c/div\u003e\n```\n\nA video link must have the `rel` attribute with the value of `video`. The url of the link must be the iframe embed (youtube, vimeo, etc.) And inside you can put a thumbnail of the video (of course)\n\n\n## Changing Effects Is Easy!\n\nI designed Photobox (as an image viewer) to only show a single item at a time (image or video), and so, the changing between images works is that first the current image must transition itself \"out\",\nand the javascript code will \"listen\" to that transition, and when it's over, the code will reset some things to their initial state, replace the item with the new one, and will trantision that new item\ninto view. The effects are done via CSS and are very easy to change!\n\nThe default transition is the the current image \"grows\" and fades out of view, and when it is completely gone, the new image will appear to grow, rotate until it is \"flat\" (a bit) and fade-in.\nEvery time there's an image change that is either next or previous, the `pbOverlay` element will have a class for that change 'next' or 'prev', so you can work with those to achieve an effect\nlike the images are moving to the sides, depending on the direction, for example, you can use this CSS snippet to achieve that:\n\n```css\n.pbHide .pbWrapper \u003e *,\n.pbHide .pbWrapper \u003e .prepare{ opacity:0; transition:.2s ease-in; }\n\n.pbWrapper \u003e div,\n.pbWrapper \u003e img{\n    transition:.2s ease-out;\n    opacity: 1;\n}\n\n/*** when going to the next slide ***/\n/* prepare next slide which will be shown */\n.pbWrapper \u003e *,\n.pbHide.next .pbWrapper \u003e .prepare{ transform:translatex(40%); }\n/* prepare current slide which will \"go away\" */\n.pbHide.next .pbWrapper \u003e *{ transform:translatex(-40%);  }\n\n/* when going to the previous slide */\n.pbWrapper \u003e *,\n.pbHide.prev .pbWrapper \u003e .prepare{ transform:translatex(-40%); }\n.pbHide.prev .pbWrapper \u003e *{ transform:translatex(40%); }\n```\n\n\n## Custom Caption Links\n\nyou can add your own links along with the `title` or `alt` attributes texts, just add `data-pb-captionLink` to the image thumbnail:\n\n`data-pb-captionLink='Google website[www.google.com]'`\n\n\n## Overriding defaults\n\nIt is always recommended not to touch the source code directly, because then you will have a version which is out-of-sync with any future version, and you might face some difficult merges with your own changes.\nSo, if you want to change some stuff, I would recommend creating another file, typically called `jquery.photobox.mod.js`. This good practice also applies for the CSS file.\n\n### Example:\n\n```js\n/*!\n    photobox modifications,\n    after it has been loaded\n*/\n\n(function(){\n    \"use strict\";\n    // adding a \"userInfo\" HTML to the overlay container:\n    var userInfo = $('\u003cdiv class=\"userInfo\"\u003e\u003cimg\u003e\u003cspan\u003e\u003c/span\u003e\u003c/div\u003e');\n\n    var photoboxCallbacks = (function(){\n        // do something\n    })();\n\n    // change defaults:\n    window._photobox.defaults.time = 0;\n    window._photobox.defaults.beforeShow = photoboxCallbacks.beforeShow;\n\n    // append \"userInfo\" after DOMReady has been fired\n    // (the overlay won't exist in the DOM before then)\n    $(document).ready(function(){\n        var overlay = $('#pbOverlay');\n\n        // add class to the default close button\n        $('#pbCloseBtn').addClass('btn');\n\n        // append user info DOM structure\n        overlay.append(userInfo);\n    });\n})();\n```\n\n\n## Settings\n\nName          | Info                                                                                                     | Default\n------------- | -------------------------------------------------------------------------------------------------------- | -----------------------------\nsingle        | if \"true\" - gallery will only show a single image, with no way to navigate                               | false\nhistory       | Enable/disable HTML5 history using hash urls                                                             | false\ntime          | The time in milliseconds when autoplaying a gallery. Set as '0' to hide the autoplay button completely.  | 3000, minimum of 1000 allowed\nautoplay      | should the gallery autoplay on start or not.                                                             | false\nloop          | Loop back to last image before the first one and to the first image after last one.                      | true\nthumb         | A relative path from the link to the thumbnail (if it's not inside the link)                             | null\nthumbAttr     | A custom Attribute for the source of the thumbnail (for lazy-loaded thumbs)                              | 'data-src'\nthumbs        | Show thumbs of all the images in the gallery at the bottom.                                              | true\ncaptionTmpl   | A string which is the template of the photo caption                                                      | *long string*\nzoomable      | Enable/Disable mousewheel zooming over images                                                            | true\nhideFlash     | Hide flash instances when viewing an image in the gallery                                                | true\nwheelNextPrev | change image using mousewheel left/right                                                                 | true\nkeys.close    | Key codes which close the gallery                                                                        | \"27, 88, 67\"\nkeys.prev     | Key codes which change to the previous image                                                             | \"37, 80\"\nkeys.next     | Key codes which change to the next image                                                                 | \"39, 78\"\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FyairEO%2Fphotobox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FyairEO%2Fphotobox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FyairEO%2Fphotobox/lists"}