summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorVictor Häggqvist <[email protected]>2014-06-27 17:43:09 +0200
committerVictor Häggqvist <[email protected]>2014-06-27 17:43:09 +0200
commit3021f681aa677bb88c5140be7a18246cca82bdc1 (patch)
tree41ad29f2edbcaf08898e519de6c4a8cf0d2ee667
parent7c691110cb3cf53a8907ff2f57025e6666e9d0e8 (diff)
some things about usage
-rw-r--r--README.md47
1 files changed, 47 insertions, 0 deletions
diff --git a/README.md b/README.md
index b87ee61..507cccc 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,53 @@ jQuery
NOTE: The bower install will not get jQuery for you, if you want to get jQuery from bower too use `bower install jquery`
+#Usage
+Credits again to http://osvaldas.info/image-lightbox-responsive-touch-friendly
+```html
+<script src="jquery.js"></script>
+<script src="imagelightbox.js"></script>
+<script>
+$( function(){
+ $('a').imageLightbox(); // for a single image
+ // OR
+ $('a[lightbox="foo"]').imageLightbox(); // for a multiple, something likte this
+});
+</script>
+```
+
+Checkout the demos at https://victorhaggqvist.github.io/touch-imagelightbox/.
+
+The js used in the demos are here, https://github.com/victorhaggqvist/touch-imagelightbox/blob/gh-pages/demo.js
+
+###Options and defaults
+```js
+$(selector).imageLightbox({
+ selector: 'id="imagelightbox"', // string;
+ allowedTypes: 'png|jpg|jpeg|gif', // string;
+ animationSpeed: 250, // integer;
+ preloadNext: true, // bool; silently preload the next image
+ enableKeyboard: true, // bool; enable keyboard shortcuts (arrows Left/Right and Esc)
+ quitOnEnd: false, // bool; quit after viewing the last image
+ quitOnImgClick: false, // bool; quit when the viewed image is clicked
+ quitOnDocClick: true, // bool; quit when anything but the viewed image is clicked
+ onStart: false, // function/bool; calls function when the lightbox starts
+ onEnd: false, // function/bool; calls function when the lightbox quits
+ onLoadStart: false, // function/bool; calls function when the image load begins
+ onLoadEnd: false // function/bool; calls function when the image finishes loading
+});
+```
+
+###Other methodes
+```js
+var $instance = $(selector).imageLightbox();
+
+// switches to the other image; accepts integer argument (an index of the desired image)
+$instance.switchImageLightbox( index );
+
+// quits the lightbox
+$instance.quitImageLightbox();
+```
+
#How to build
Image Lightbox is buildt using the Grunt toolchain. The CSS is build using SASS and Compass, which means you need Ruby, the SASS and Compass gems to make it.