Oiii! Js. Hello world!

tomasci · Jun 28, 2020 · 49f4562 · 49f4562
1 parent f5e25e2
commit 49f4562
Show file tree

Hide file tree

Showing 8 changed files with 7,464 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+false
+node_modules
+build
+.idea
diff --git a/Readme.md b/Readme.md
@@ -0,0 +1,78 @@
+# Oiii.JS
+--------------
+##### or just OpenImage JS
+
+## Step 1
+Clone this repository first:\
+`git clone https://github.com/tomasci/oiii.git`
+
+Then:\
+`npm install`\
+`npm run build`
+
+When build complete you will see `/build` folder:\
+`/build/`\
+`- oiii.min.js`\
+`- oiii.min.js.map`\
+`- /styles/`\
+`-- oiii.css`\
+`-- oiii.css.map`\
+`-- oiii.min.css`
+
+## Step 2
+
+All you need now is to include 2 files into your html code.\
+Example located in `index.html`.
+
+So, between `<head></head>` insert this line:\
+`<link rel="stylesheet" href="build/styles/oiii.min.css">`
+
+And before `</body>` insert:\
+`<script src="build/oiii.min.js" charset="utf-8"></script>`
+
+## Step 3
+Before `</body>` but after already included `oiii.min.js` write something like this:
+```
+window.addEventListener('load', function() {
+    var oi = new Oiii()
+})
+```
+
+## Step 4
+##### Lists
+If you have a list of images or links to youtube videos, so add `data-oi-list` or `data-oi-list-yt` attribute to container of them.
+
+Each image must contain `src="path_to_your_thumb"`, `data-oi-preview="path_to_your_small_image"` and `data-oi-fullsize="path_to_your_fullsize_image"` attributes.
+
+Each yt-link must contain `data-oi-yt="link_to_youtube_video"` attribute.
+
+Example:
+```
+<div class="myAwesomeDemoWithImages" data-oi-list>
+    <img src="" data-oi-preview="" data-oi-fullsize="" alt="">
+    <img src="" data-oi-preview="" data-oi-fullsize="" alt="">
+</div>
+
+<div class="myAwesomeDemoWithYoutube" data-oi-list-yt>
+    <a href="#" data-oi-yt="">video 1</a>
+    <a href="#" data-oi-yt="">video 2</a>
+</div>
+```
+
+Also, you can use images or something different inside of `<a>` tag for YouTube videos.
+
+##### Single images and youtube links
+
+Every single image must contain `data-oi-image` attribute and also `src`, `data-oi-preview`, `data-oi-fullsize` attributes.
+
+Example for images:
+```
+<img src="" data-oi-image data-oi-preview="" data-oi-fullsize="" alt="">
+```
+
+Each single youtube link must containt `data-oi-video` attribute and also `data-oi-yt` attribute.
+
+Example:
+```
+<a data-oi-video data-oi-yt="">video 3</a>
+```
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="build/styles/oiii.min.css">
+</head>
+<body>
+    <div class="galery">
+        <div class="container">
+            <h4>List of images:</h4>
+            <div class="list" data-oi-list>
+                <img src="https://images.unsplash.com/photo-1577993835467-bcf152ff732e?w=255" data-oi-preview="https://images.unsplash.com/photo-1577993835467-bcf152ff732e?w=768" data-oi-fullsize="https://images.unsplash.com/photo-1577993835467-bcf152ff732e" alt="">
+                <img src="https://images.unsplash.com/photo-1593110855730-dc86f2fdda2f?w=255" data-oi-preview="https://images.unsplash.com/photo-1593110855730-dc86f2fdda2f?w=768" data-oi-fullsize="https://images.unsplash.com/photo-1593110855730-dc86f2fdda2f" alt="">
+            </div>
+
+            <h4>List of images 2:</h4>
+            <div class="somenotlisted" data-oi-list>
+                <img src="https://images.unsplash.com/photo-1593196580388-6a8c96bfa094?w=255" data-oi-preview="https://images.unsplash.com/photo-1593196580388-6a8c96bfa094?w=768" data-oi-fullsize="https://images.unsplash.com/photo-1593196580388-6a8c96bfa094" alt="">
+            </div>
+
+            <h4>Single image:</h4>
+            <img src="https://images.unsplash.com/photo-1593203859719-437110bd5d91?w=255" data-oi-image data-oi-preview="https://images.unsplash.com/photo-1593203859719-437110bd5d91?w=768" data-oi-fullsize="https://images.unsplash.com/photo-1593203859719-437110bd5d91" alt="">
+
+            <h4>Youtube list:</h4>
+            <div class="list" data-oi-list-yt>
+                <a href="#" data-oi-yt="https://www.youtube.com/watch?v=SqBMohUi9VU">video 1</a>
+                <a href="#" data-oi-yt="https://www.youtube.com/watch?v=B3JcHWCA-VA">video 2</a>
+            </div>
+
+            <h4>Youtube single:</h4>
+            <a href="#" data-oi-video data-oi-yt="https://www.youtube.com/watch?v=EnDg65ISswg">video 3</a>
+        </div>
+    </div>
+
+    <script src="build/oiii.min.js" charset="utf-8"></script>
+    <script>
+        window.addEventListener('load', function() {
+            new Oiii()
+        })
+    </script>
+</body>
+</html>