JSnip Sample page
Version: 0.5.2 Alpha.Jsnip currently offers 6 Snippet types:
Tabs
Show Hides
Image Switcher
Scroll To Anchor
Scroll To Top
LightBox
If there's a snippet you want and its not already supported, feel free to email me with a request.
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 a lightweight JavaScript Snipping package, aimed at those who want to add interactive elements to their webpage's but lack the necessary JavaScript knowledge to do so.
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' />
<script type="text/javascript" src='jsnip/base.min.js'></script>
<script type="text/javascript" src='jsnip/jsnip.min.js'></script>
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?
The JSnip snippets are all powered by a small JavaScript library called base.js which I am creating alongside JSnip itself.
base.js offers a variety of simple, yet incredibly helpful methods in addition to those provided by JavaScript itself. These include a range of shorthand functions, helper method's(Such as prepend, hasClass, addClass, etc.) , AJAX request wrappers and small animation library consisting of fades, scrolls and slides.
A fully commented version of base.js should be packaged along side the minified version used in this page.
Tab 1
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
Summary:
The tabs snippet can be used in a number of ways
in order to add JavaScript Tabs functionality to a page.
Usage Instructions:
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
Summary:
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.
Usage Instructions:
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
Summary:
The imageSwitcher snippet can be used display a set of images with captions, that a user can then scroll through.
Usage Instructions:
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
Summary:
The scroll to anchor snippet can be used to scroll a users browser to a particular location within a webpage.
Usage Instructions:
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
Summary:
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.
Usage Instructions:
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
Summary:
Jsnip lightbox can easily add Lightbox functionality to any images on your page.
Usage Instructions:
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.