JSnip Sample page

Version: 0.5.2 Alpha.
Supported Snippets

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

A baby skunk An Otter An upside down seal. A Photo taken in Solvenia


Licence:MIT (Open source / free)
Source code:Github Repo
Download:Latest Version
Author:Carl Saggs

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.

<!-- Include JSnip -->
<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.


JSnip: Tabs

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.


JSnip: ShowHide

showHide Snippet Demo

Closed showHide 1
This showhide has its title specified by a title
Closed showHide 2
This showHide has both a title and inner Div.
This showHide has its titled specified using the title attribute of the showHide div.

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.


JSnip: Image Switcher
A baby skunk! An otter A Bunny Rabbit Upside down Seal A Kitten sleeping next to a big dog

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.


JSnip: Scroll to Anchor
Sample Link to invoke snippet

Scroll to JSnip Tabs

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.


JSnip: Scroll to Top
Snippet Sample:
Scroll back to the page's top

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.


JSnip: LightBox
A Photo taken in Solvenia A Caption

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.


 

 

 

 

 

Go back to the top?