improved demo

Timo-Breumelhof · Apr 16, 2014 · c97dce6 · c97dce6
1 parent b89da3c
commit c97dce6
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 70 deletions.
diff --git a/img/1.jpg → demo-images/1.jpg b/img/1.jpg → demo-images/1.jpg
diff --git a/img/2.jpg → demo-images/2.jpg b/img/2.jpg → demo-images/2.jpg
diff --git a/img/a.jpg → demo-images/a.jpg b/img/a.jpg → demo-images/a.jpg
diff --git a/img/b.jpg → demo-images/b.jpg b/img/b.jpg → demo-images/b.jpg
diff --git a/img/c.jpg → demo-images/c.jpg b/img/c.jpg → demo-images/c.jpg
diff --git a/img/d.jpg → demo-images/d.jpg b/img/d.jpg → demo-images/d.jpg
diff --git a/demo.html b/demo.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" href="css/chocolat.css" />
+		<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+		<script type="text/javascript" src="js/jquery.chocolat.js"></script>
+        <title>Chocolat — demo</title>
+		<script>
+		$(function(){
+
+            $('#example0').Chocolat({
+                loop           : true,
+                fullWindow     : 'cover',
+                overlayOpacity : 0.9
+            });
+
+            var instance = $('#example1').Chocolat({
+                container      : '#container1',
+                setTitle       : 'photoset title',
+                fullWindow     : 'contain',
+                displayAsALink : true
+            }).data('api-chocolat');
+
+            $('.api-test').on('click', function(){
+                console.log(instance.open(1));
+            });
+
+            $('#example2').Chocolat({
+                container : '#container2'
+            });
+
+
+		});
+		</script>
+    </head>
+    <body>
+        <div style="text-align: center;background: #E8E8E8; padding: 10px;margin-bottom: 10px;">
+            <a href="https://github.com/nicolas-t/Chocolat"> on github</a>
+        </div>
+
+        <p>
+            Open in window, in cover mode (= no whitespace), looping : 
+        </p>
+        <div id="example0">
+            <a class="chocolat-image" href="demo-images/c.jpg" title="foo">
+                C
+            </a>
+            <a class="chocolat-image" href="demo-images/d.jpg" title="bar">
+                D
+            </a>
+        </div>
+
+        <p>
+            Display as a link and open in a container :  
+        </p>
+
+        <!-- 'Display as a link' container :  -->
+        <ul class="chocolat-links"></ul>
+
+    	<p id="example1">
+    		<a class="chocolat-image" href="demo-images/a.jpg" title="Rose">
+                A
+    		</a>
+    		<a class="chocolat-image" href="demo-images/b.jpg" title="Black">
+                B
+    		</a>
+    	</p>
+        <!-- Container (notice the relative width) :  -->
+        <div id="container1" style="width: 50%; height: 400px;background: #E0E0E0;"></div>
+        <p>
+            Open previous lightbox on the second image via API :    
+        </p>     
+        <div class="api-test" style="font-size: 15px;">
+            <a href="#">TEST API</a>
+        </div>
+
+        <p>
+            Open in a container : 
+        </p>
+        <div id="example2">
+            <a class="chocolat-image" href="demo-images/1.jpg" title="HO">
+                1
+            </a>
+            <a class="chocolat-image" href="demo-images/2.jpg" title="HAI">
+                2
+            </a>
+        </div>
+        <!-- Container (notice the absolute width) :  -->
+        <div id="container2" style="width: 500px; height: 400px;background: #E0E0E0;"></div>
+
+
+    </body>
+
+</html>
diff --git a/index.html b/index.html