{"id":28516002,"url":"https://github.com/thybag/jsnip","last_synced_at":"2025-07-05T17:30:55.761Z","repository":{"id":66565895,"uuid":"1980533","full_name":"thybag/JSnip","owner":"thybag","description":"JSnip: A Lightweight JavaScript Snippeting package built using base.js","archived":false,"fork":false,"pushed_at":"2012-03-17T19:57:44.000Z","size":376,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-09T03:38:26.420Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://userbag.co.uk/demo/jsnip/sample.htm","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/thybag.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}},"created_at":"2011-06-30T22:01:12.000Z","updated_at":"2022-08-03T00:34:05.000Z","dependencies_parsed_at":"2023-02-20T06:45:43.899Z","dependency_job_id":null,"html_url":"https://github.com/thybag/JSnip","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thybag/JSnip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thybag%2FJSnip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thybag%2FJSnip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thybag%2FJSnip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thybag%2FJSnip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thybag","download_url":"https://codeload.github.com/thybag/JSnip/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thybag%2FJSnip/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263778317,"owners_count":23509972,"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":[],"created_at":"2025-06-09T03:31:39.715Z","updated_at":"2025-07-05T17:30:55.755Z","avatar_url":"https://github.com/thybag.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"JSnip - A JavaScript Snipping package\n---------------------\n\n**JSnip** is a lightweight JavaScript based Snipping package, aimed at those who want to add interactive \nelements to their webpages but lack the necessary JavaScript knowledge to do so.\n\nThis version of JSnip contains six snippets types:\n\n* JsnipTabs\n* JsnipShowHide\n* JsnipImageSwitcher\n* JsnipScrollToTop and JsnipScrollToAnchor\n* jsnipLightBox \n\nA sample page showing all theses snippets in action can be seen [here](http://userbag.co.uk/demo/jsnip/sample.htm).\n\n### Browser support\n\nJSnip has been tested to run in:\n\n* Chrome\n* Firefox 3.5, 3.6, 4, 5 and 6\n* IE 9 (CSS3 transitions are unsupported, Ajax functions untested for IE8/7)\n* Andorid Browser\n* IOS Browser\n\n### Change Log\n\n#### 1.5.3\n* Correct scopeing bug in base.js\n\n#### 1.5.2\n* In accordances with some changes in the HTML5 spec, have switched from using itemprops to data items for additional paramiters.\n* Brand new sample page, including instructions.\n* Styling tweaks.\n\n#### 1.5.1\n* Signifcantly improve scaling system for lightBox (now actually takes height in to account)\n* Loading image added + checks to ensure image is loaded before grabbing width/height\n* Doesn't just assume alt text exists (checks)\n* Add ability to specifiy larger image useing itemprop (thumb can connect to big image for lightbox)\n* Base now correctly gets browser center location in IE8/7\n\n#### 1.5\n* Fixed firefox bug with ImageSwitcher\n* Added Lightbox Snippet\n* Added custom animation for lightbox.\n* Added getCenterCoord, getDocumentSize, getBrowserWidth and getBrowserHeight methods to base.\n* Bugfix to crossFade effect (images of differnt sizes)\n* Styling tweaks to fix IE ImageSwitcher issue (InfoBar flickered)\n* Multiple minor bug fix's\n\n#### 1.4\n* Added support for IE7, IE8 and IOS\n* Multiple bug fix's\n* Two new snippets (JsnipScrollToAnchor and JsnipScrollToTop)\n* Scroll animation type added to base\n* Cross fade effect added to Image Switcher\n* getCoords method added to base\n* Jsnip now works on any element type (not just divs)\n\n\nLicensing\n---------------------\n\n**MIT License**\n\nCopyright (C) 2011 by Carl Saggs\n\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n \n**Other**    \nIf you find the MIT Licence restricts you from using the provided code in the way you'd like, \njust give me a buzz and I'd be more than happy to provide it to you under whatever licence satisfies \nyour needs. \n\nQuick start guide.\n---------------------\nPlease see [this article](http://userbag.co.uk/development/introducing-jsnip/) for a more complete/readable guide.\n\n1. Upload jsnip.min.js, base.min.js and Jsnip.css on to your web server and import them in your documents header. \n   Ensure base is imported before jsnip.\n\n2. To add a snippet, simply create a DIV with the relevant class name.\n\n\n**ShowHide**\n\nRequires class: *jsnipShowHide*\n\nOther Attributes:\nTitle: Text show on the showHide bar itself.   \ndata-mode: When set to open, the snippet will default to display as open.\n\nExample:\n\n    \u003cdiv class='jsnipShowHide' title='Title for your ShowHide' \u003e\n        Show Hide Content\n    \u003c/div\u003e\n\n\n**Tabs**\n\nRequires class: *jsnipTabs*\n\nAll divs inside the JSnipTabs are considered to be Tabs.   \nThe first H2 inside each Tab is considered to the tabs title.\n\n\nExample:\n\n    \u003cdiv class='jsnipTabs'\u003e\n        \u003cdiv\u003e\n            \u003ch2\u003eTab 1\u003c/h2\u003e\n            Tab 1 Content! Add tab one content here.\n        \u003c/div\u003e\n        \u003cdiv\u003e\n            \u003ch2\u003eTab 2\u003c/h2\u003e\n            Tab 2 Content! Add tab two content here.\n        \u003c/div\u003e\n        \u003cdiv\u003e\n            \u003ch2\u003eTab 3\u003c/h2\u003e\n            Tab 3 Content! Add tab 3 content here.\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n\n**Image Switcher**\n\nRequires class: *jsnipImageSwitcher*\n\nMust contains a number of image tags.   \nThe alt attribute of each image is used as the caption.\n\nOther Attributes:     \ndata-animation: crossFade (expermental transition type)\n\nExample:\n\n    \u003cdiv class=\"jsnipImageSwitcher\"\u003e\n        \u003cimg src=\"/demo/img/skunk.jpg\" alt=\"A baby skunk!\" /\u003e\n        \u003cimg src=\"/demo/img/otter.jpg\" alt=\"An otter\" /\u003e\n        \u003cimg src=\"/demo/img/bunny.jpg\" alt=\"A Bunny Rabbit\" /\u003e\n    \u003c/div\u003e\n\t\n**Scroll to top**\n\nRequires class: *JsnipScrollToTop*\n\nWill add event to node that scrolls browser back to top of the page.\n\nExample:\n\n    \u003cdiv class=\"jsnipScrollToTop\"\u003eTop of Page\u003c/div\u003e\n\t\n\t\n**Scroll to Anchor**\t\n\t\nRequires class: *JsnipScrollToAnchor*\n\nWill scroll browser window to the position of any Node with an ID matching that specified\nin the links href\n\nExample:\n\n      \u003ca href='#AnchorWithID' class=\"jsnipScrollToAnchor\"\u003eGo to \"AnchorWithID\"\u003c/a\u003e\n\t  \n\t  \n**LightBox Effect**\t\n\t\nRequires class: *jsnipLightBox *\n\nOther Attributes:\ndata-image: You can use this value specifiy the URL to a larger version of the image for use with the lightbox\n\nApply the jsnipLightBox class to an image, to making clicking on it cause the image to open in a LightBox\n\nExample:\n\n      \u003cimg src='mydir/myimage.jpg' class='jsnipLightBox' /\u003e\n\t\n\t\n\t\n\t","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthybag%2Fjsnip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthybag%2Fjsnip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthybag%2Fjsnip/lists"}