JSnip Sample pageVersion: 0.5.2 Alpha.
JSnip uses only valid HTML5 and is supported in all major browsers. All snippets are fully nestable.
Tested in: IE7-9, Firefox 3.7-6, Chrome, IOS Browser, Andorid Browser
Welcome to the JSnip Sample page.
JSnip is designed to be incredibly simple to use and only request a basic HTML knowhow to get started. Creating a new JSnip snippet takes no more work than simply adding an additional class.
Try out the LightBox snippet
Getting started with Jsnip
JSnip was designed to be as easy as possible to get up and running on your webpage's.
Just download the jsnip files and include them in to the head of the webpage you wish to use the snippets in.
<link rel='stylesheet' href='jsnip/jsnip.css' type='text/css' />
Once the above code is included in to your HTML Page, you can use JSnip snippets by simply adding the relevant JSnip class to HTML elements on your page. For example if you want to add a LightBox to an image, all you would need to do is add "jsnipLightBox" to its class.
Full usage instrctions for each snippet can be found below...
How does it work?
A fully commented version of base.js should be packaged along side the minified version used in this page.
Tab Snippet Demo
This tab is using an H2 to specify its tab title
This tab is useing the title attribute of the tab Div to specify its tab title.
You can add as many tabs in a Jsnip tabs snippet as will fit its width.
Class to use: jsnipTabs
Simply add a Div with the class "jsnipTabs" to your document, then every first level div contained within it will become a tab. The tab title can be specified either by a h2 within the tab div, or by adding it to the divs title attribute.
showHide Snippet Demo
Class to use: jsnipShowHide
The showHide snippet can be used to create collapsible content areas within a webpage. Clicking the title of a showHide will open or close it depending on its current state.
Add a div with the class "jsnipShowHide" to your document to create a new showHide around all content inside. The ShowHides title can be specified either by using the showHide div's title attribute, or by including within it a div with the class "title".
Use data-mode='open' to make a showHide appear as open by default.
If needed it is also possible to include a div with the class inner to ensure all styles are applied even before the showHide snippet is instantiated.
Class to use: jsnipImageSwitcher
The imageSwitcher snippet can be used display a set of images with captions, that a user can then scroll through.
Add a div with the class "jsnipImageSwitcher" to your document, then add any images that you would like to be included in the resulting ImageSwitcher. If an alt tag is specified for an image it will be used by the snippet for a caption.
Its possible to wrap the images within this snippet in link tags in order to link each image to a location. Alternately you can add the jsnipLightBox class to the snippet so that selected images will open within a LightBox.
The ImageSwitcher also includes a beta version of a crossFade transition. It can be activated by adding the code " data-animation='crossFade' " to the imageSwitcher div.
Class to use: jsnipScrollToAnchor
The scroll to anchor snippet can be used to scroll a users browser to a particular location within a webpage.
Add the class "jsnipScrollToAnchor" to a link element that is pointed towards an anchor tag to make it use the animation provided by the Scroll to anchor snippet.
Please ensure the anchor tag you wish to scroll to has the id specified by the link.
Class to use: jsnipScrollToTop
Add this snippet to any element in your page to cause clicking on it to scroll a user back to the top of the page.
Add the class "jsnipScrollToTop" to the element you wish to cause a user to scroll back to the page's top.
Class to use: jsnipLightBox
Jsnip lightbox can easily add Lightbox functionality to any images on your page.
A basic jsnip lightbox can be used by just adding the class "jsnipLightBox" to an image. Once added clicking the image will then open it within the Jsnip lightbox.
If you use separate thumbnail images for your page and wish to open the full version of the image when its selected, add the URL of the full image as the images data-image attribute.
The Lightbox gets the images caption from the alt text of the images you have applied the snippet too.