Skip to content

Commit

Permalink
Changed knowltemplate and added slider for images
Browse files Browse the repository at this point in the history 
Synced local code with site repository. Added a slider plugin with
buttons which  in present will be used to iterate through images. Also
added demos included with plugin
  • Loading branch information
@maarksman
maarksman committed Sep 6, 2017
1 parent 8ff21b6 commit 94f01c0
Show file tree
Hide file tree
Showing 62 changed files with 1,521 additions and 4 deletions.
Binary file added Euclids Library- Main/Euclids Library/URpedia-master- for templates.zip
View file
Binary file not shown.
15 changes: 11 additions & 4 deletions Euclids Library- Main/Euclids Library/css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
body { background-color: #DFEFF0;
color: #333333;
font-family: "Arial", Helvetica, sans-serif;
}
}

h1 { color: #AD235E;
border-bottom-style: solid;
Expand Down Expand Up @@ -38,9 +38,9 @@ a:hover {color: #AD235E;}
/*.floating-box {
display: table-cell;
float: right;
/*width: 50px;
/*width: 50px;
height: 75px;
margin: 10px;
margin: 10px;
} */

Expand All @@ -50,7 +50,7 @@ a:hover {color: #AD235E;}

.floatleft {
float: left;
}
}

article ,aside{
display: table-cell;
Expand Down Expand Up @@ -85,6 +85,13 @@ article {
border: 1px solid black;
}

article p {display: table-cell; float: left; overflow: auto; width: 70%; padding-left: 10px;}

footer {
border-top: 1px solid #AD235E;;
}

article img {
width: 200px;
height:200px;
}
Binary file added Euclids Library- Main/Euclids Library/images/200x200pixels.jpeg.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Euclids Library- Main/Euclids Library/images/tempknowl.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 47 additions & 0 deletions Euclids Library- Main/Euclids Library/jsImgSlider/demo1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<title>Demo 1 - Menucool Image Slider</title>
<link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/1/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="div1"><h2>Demo 1 - Menucool Image Slider</h2>
<p>Demos: <a href="demo1.html" class="current">1</a><a href="demo2.html">2</a><a href="demo3.html">3</a><a href="demo4.html">4</a>
<a href="demo5.html">5</a><a href="demo6.html">6</a><a href="demo7.html">7</a><a href="demo8.html">8</a></p>
</div>
<div id="sliderFrame">
<div id="slider">
<a href="http://www.menucool.com/javascript-image-slider" target="_blank">
<img src="images/image-slider-1.jpg" alt="Welcome to Menucool.com" />
</a>
<img src="images/image-slider-2.jpg" />
<img src="images/image-slider-3.jpg" alt="" />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg" />
</div>
<div id="htmlcaption" style="display: none;">
<em>HTML</em> caption. Link to <a href="http://www.google.com/">Google</a>.
</div>
</div>

<div class="div2">
<ul>
<li><b>Copy & Paste</b>: Copy source code and paste it into your own page. All source codes/files are within the <i>demo1.html</i> and the "<i>\themes\1\</i>" folder</li>
<li><b>Transitional effects</b>: You can choose from 17 transitional effects via the <i>sliderOptions</i> in the <em>js-image-slider.js</em>.
Visit <a href="http://www.menucool.com/slider/javascript-image-slider-demo1" target="_blank">Image Slider Demo 1</a> to see how each effect looks and how to customize</li>
<li><b>Navigation Bullets</b>: Navigation bullets are created automatically by the script of the image slider.
<p>The CSS class selector <span class="green">.navBulletsWrapper</span> can be used to change the nav bullets' position and style.</p>
<p>If you don't need the Navigation Bullets, just hide them via CSS:<br /><span class="green cn">div.navBulletsWrapper {display:none;}</span></p>
</li>
<li><b>HTML Caption</b>: Captions are set through each slide image's <span class="cn">alt</span> attribute. If the caption contains HTML content,
you can put the content inside a DIV or SPAN element(usually styled as <span class="cn">display:none</span>), give the element an ID,
and set the <span class="cn">alt</span> as "#(the content container's id)". For example: <span class="cn">alt="#caption4"</span></li>
<li>The image slider shown in this demo is for free.</li>
<li>For detailed instructions, please visit online <a href="http://www.menucool.com/slider/javascript-image-slider-demo1">Demo 1</a> and
<a href="http://www.menucool.com/javascript-image-slider" target="_blank">JavaScript Image Slider</a></li>
</ul>
</div>
</body>
</html>
60 changes: 60 additions & 0 deletions Euclids Library- Main/Euclids Library/jsImgSlider/demo2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>
<head>
<title>Demo 2</title>
<link href="themes/2/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/2/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="div1"><h2>Demo 2 - Menucool Image Slider with thumbnails</h2>
<p>Demos: <a href="demo1.html">1</a><a href="demo2.html" class="current">2</a><a href="demo3.html">3</a><a href="demo4.html">4</a>
<a href="demo5.html">5</a><a href="demo6.html">6</a><a href="demo7.html">7</a><a href="demo8.html">8</a></p>
</div>

<div id="sliderFrame">
<div id="slider">
<a href="http://www.menucool.com/jquery-slider" target="_blank">
<img src="images/image-slider-1.jpg" alt="Welcome to jQuery Slider" />
</a>
<a class="lazyImage" href="images/image-slider-2.jpg" title="Pure Javascript. No jQuery. No Flash.">Pure JavaScript</a>
<a href="http://www.menucool.com/javascript-image-slider"><b data-src="images/image-slider-3.jpg">Image Slider</b></a>
<a class="lazyImage" href="images/image-slider-4.jpg" title="">Slide 4</a>
</div>
<!--thumbnails-->
<div id="thumbs">
<div class="thumb">
<div class="frame"><img src="images/thumb1.jpg" /></div>
<div class="thumb-content"><p>HTML Content</p>Thumbnails allows any HTML content</div>
<div style="clear:both;"></div>
</div>
<div class="thumb">
<div class="frame"><img src="images/thumb2.jpg" /></div>
<div class="thumb-content"><p>Customizable</p>Thumbnail style is customizable</div>
<div style="clear:both;"></div>
</div>
<div class="thumb">
<div class="frame"><img src="images/thumb3.jpg" /></div>
<div class="thumb-content"><p>Variety of Layouts</p>Just a CSS tweak.</div>
<div style="clear:both;"></div>
</div>
<div class="thumb">
<div class="frame"><img src="images/thumb4.jpg" /></div>
<div class="thumb-content"><p>Integration</p>Built-in functions for the thumbnails</div>
<div style="clear:both;"></div>
</div>
</div>
<!--clear above float:left elements. It is required if above #slider is styled as float:left. -->
<div style="clear:both;height:0;"></div>
</div>
<div class="div2">
<p>As shown by the demo, the thumbnails change their active status while the main image slides, and clicking on an thumbnail will switch the main image.</p>
<p>If there are lots of thumbnails and the containing block does not have enough room to show them,
you can consider showing the thumbnails in multiple columns or rows by tweaking the js-image-slider.css (Example: <a href="http://www.menucool.com/1165/How-to-place-thumbnail-columns-around-both-sides">Place thumbnail columns around slider both sides</a>). <br />
Other solutions: <a href="http://www.menucool.com/slider/flickr-like-slideshow">Image Slideshow with horizontal thumbnails</a>, <a href="http://www.menucool.com/slider/thumbnail-slider-demo-3">Image Slideshow with vertical thumbnails</a>.</p>
<p>Visit online <a href="http://www.menucool.com/slider/javascript-image-slider-demo2">Demo 2</a> and
<a href="http://www.menucool.com/javascript-image-slider" target="_blank">JavaScript Image Slider</a> for detailed instructions.</p>
<p>This demo requires a license for having used the advanced features.</p>
</div>
</body>
</html>
45 changes: 45 additions & 0 deletions Euclids Library- Main/Euclids Library/jsImgSlider/demo3.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<title>Demo 3</title>
<link href="themes/3/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/3/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="div1"><h2>Demo 3</h2> &nbsp;- Apple-like Image Slider
<p>Demos: <a href="demo1.html">1</a><a href="demo2.html">2</a><a href="demo3.html" class="current">3</a><a href="demo4.html">4</a>
<a href="demo5.html">5</a><a href="demo6.html">6</a><a href="demo7.html">7</a><a href="demo8.html">8</a></p>
</div>

<div id="sliderFrame">
<div id="slider">
<a href="http://www.menucool.com/"><img src="images/slider-1.jpg" alt="" /></a>
<a class="lazyImage" href="images/slider-2.jpg" title="">slide 2</a>
<a href="http://www.menucool.com/javascript-image-slider">
<b data-src="images/slider-3.jpg" data-alt="">Image Slider</b>
</a>
<a class="lazyImage" href="images/slider-4.jpg" title="">slide 4</a>
</div>
<!--thumbnails-->
<div id="thumbs">
<div class="thumb"><img src="images/thumb-1.gif" /></div>
<div class="thumb"><img src="images/thumb-2.gif" /></div>
<div class="thumb"><img src="images/thumb-3.gif" /></div>
<div class="thumb"><img src="images/thumb-4.gif" /></div>
</div>
</div>


<div class="div2">
<ul>
<li><img src="themes/3/active-bg.png" alt="" style="float:right;" />The hovered thumbnail style is achieved simply through a background image:<br /><br />
<span class="green">#thumbs .thumb-on {background-image: url(active-bg.png);}</span><br />&nbsp;
</li>
<li>Visit online <a href="http://www.menucool.com/slider/javascript-image-slider-demo3">Demo 3</a> and
<a href="http://www.menucool.com/javascript-image-slider" target="_blank">JavaScript Image Slider</a> for detailed instructions.</li>
<li>This demo requires a license for its advanced features.</li>
</ul>
</div>
</body>
</html>
59 changes: 59 additions & 0 deletions Euclids Library- Main/Euclids Library/jsImgSlider/demo4.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<title>Demo 4 - with Navigation Buttons</title>
<link href="themes/4/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/4/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="div1"><h2>Demo 4 - Customize Navigation Controls</h2>
<p>Demos: <a href="demo1.html">1</a><a href="demo2.html">2</a><a href="demo3.html">3</a><a href="demo4.html" class="current">4</a>
<a href="demo5.html">5</a><a href="demo6.html">6</a><a href="demo7.html">7</a><a href="demo8.html">8</a></p>
</div>


<div id="sliderFrame">
<div id="slider">
<img src="images/slider-1.jpg" />
<img src="images/slider-2.jpg" />
<img src="images/slider-3.jpg" />
<img src="images/slider-4.jpg" />
</div>
<!--Custom navigation buttons on both sides-->
<div class="group1-Wrapper">
<a onclick="imageSlider.previous()" class="group1-Prev"></a>
<a onclick="imageSlider.next()" class="group1-Next"></a>
</div>
<!--nav bar-->
<div style="text-align:center;padding:20px;z-index:20;">
<a onclick="imageSlider.previous()" class="group2-Prev"></a>
<a id='auto' onclick="switchAutoAdvance()"></a>
<a onclick="imageSlider.next()" class="group2-Next"></a>
</div>
</div>


<div class="div2">
<p>In Demo 1 and Demo 2, we have introduced two ways of navigation: the built-in <b>Navigation Bullets</b> and the <b>Thumbnails</b>.</p>
<p>This demo introduces another type of navigation - <b>Navigation Buttons</b>.</p>
<p>Visit <a href="http://www.menucool.com/slider/javascript-image-slider-demo4" target="_blank">Online Demo 4</a> for more detailed instructions.</p>
<p>This demo contains no advanced features. It is free to use. License is not required.</p>
</div>
<script type="text/javascript">
//The following script is for the group 2 navigation buttons.
function switchAutoAdvance() {
imageSlider.switchAuto();
switchPlayPauseClass();
}
function switchPlayPauseClass() {
var auto = document.getElementById('auto');
var isAutoPlay = imageSlider.getAuto();
auto.className = isAutoPlay ? "group2-Pause" : "group2-Play";
auto.title = isAutoPlay ? "Pause" : "Play";
}
switchPlayPauseClass();
</script>
</body>
</html>
75 changes: 75 additions & 0 deletions Euclids Library- Main/Euclids Library/jsImgSlider/demo5.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<title>Demo 5 - Semi-transparent Thumbnails</title>
<link href="themes/5/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/5/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
<style>
body {background-color:#191919;color:#666;line-height:1.4;}
.div1 a.current {color:#ccc;}
.div1 a, .div2 a {color:#34739c;}
.div2 p {padding:20px 0;}
</style>
</head>
<body>
<div class="div1"><h2>Demo 5 - Semi-transparent Thumbnails</h2>
<p>Demos: <a href="demo1.html">1</a><a href="demo2.html">2</a><a href="demo3.html">3</a><a href="demo4.html">4</a>
<a href="demo5.html" class="current">5</a><a href="demo6.html">6</a><a href="demo7.html">7</a><a href="demo8.html">8</a></p>
</div>

<div id="sliderFrame">
<div id="slider">
<a href="http://www.menucool.com/">
<img src="images/image-slider-1.jpg" alt="Welcome to Menucool.com" />
</a>
<a class="lazyImage" href="images/image-slider-2.jpg" title="Customizable Transition Effects">Customizable Transition Effects</a>
<a href="http://www.menucool.com/javascript-image-slider">
<b data-src="images/image-slider-3.jpg" data-alt="#htmlcaption3">Image Slider</b>
</a>
<a class="lazyImage" href="images/image-slider-4.jpg" title="Pure Javascript. No jQuery. No flash.">Plain Javascript Slider</a>
<a class="lazyImage" href="images/image-slider-5.jpg" title="#htmlcaption5">Lazy Loading Image</a>
<a class="lazyImage" href="images/image-slider-1.jpg" title="Light weight Image Slider">Light weight Image Slider</a>
<a class="lazyImage" href="images/image-slider-2.jpg" title="Fine tuned. Sleek & Smooth">Fine tuned. Sleek & Smooth</a>
<a class="lazyImage" href="images/image-slider-3.jpg" title="Easy-to-Use Slider">Easy-to-Use Slider</a>
</div>
<div style="display: none;">
<div id="htmlcaption3">
<em>HTML</em> caption. Back to <a href="http://www.menucool.com/">Menucool</a>.
</div>
<div id="htmlcaption5">
Smart Lazy Loading Image
</div>
</div>

<!--thumbnails-->
<div id="thumbs">
<div class="thumb"><img src="images/thumb1.jpg" /></div>
<div class="thumb"><img src="images/thumb2.jpg" /></div>
<div class="thumb"><img src="images/thumb3.jpg" /></div>
<div class="thumb"><img src="images/thumb4.jpg" /></div>
<div class="thumb"><img src="images/thumb5.jpg" /></div>
<div class="thumb"><img src="images/thumb1.jpg" /></div>
<div class="thumb"><img src="images/thumb2.jpg" /></div>
<div class="thumb"><img src="images/thumb3.jpg" /></div>
</div>
</div>

<div class="div2">
<p>
Let's add a semi-transparent effect to the thumbnails, and each thumbnail will get back to its full opacity when hovered over.
This can be easily done via the two built-in CSS class: <b class="cn">thumb</b> and <b class="cn">thumb-on</b>:
</p>
<code><pre>#thumbs .thumb img{ opacity:0.6;filter:alpha(opacity:60); }
#thumbs .thumb-on img{ opacity:1;filter:alpha(opacity:100);}</pre></code>
<p>If there are lots of thumbnails and the containing block does not have enough room to show them,
you can consider showing the thumbnails in multiple columns or rows.
Another solution is to make the slider work together with Menucool Thumbnail Slider.
Please visit <a href="http://www.menucool.com/slider/flickr-like-slideshow">Image Slideshow with horizontal thumbnails</a> and <a href="http://www.menucool.com/slider/thumbnail-slider-demo-3">Image Slideshow with vertical thumbnails</a>.</p>
<p>Visit online <a href="http://www.menucool.com/slider/javascript-image-slider-demo5">Demo 5</a> and
<a href="http://www.menucool.com/javascript-image-slider" target="_blank">JavaScript Image Slider</a> for detailed instructions.</p>
<p>This demo requires a license for having used advanced features of the slider.</p>
</div>

</body>
</html>
46 changes: 46 additions & 0 deletions Euclids Library- Main/Euclids Library/jsImgSlider/demo6.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<title>Demo 6</title>
<link href="themes/6/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/6/mcVideoPlugin.js" type="text/javascript"></script>
<script src="themes/6/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//don't copy the script below into your page.
if (!document.domain) alert("The video will not work properly if opening the page by local path. Please test this page through HTTP on a web or localhost server");
</script>

</head>
<body>
<div class="div1"><h2>Demo 6 &nbsp; - Video Slider</h2>
<p>Demos: <a href="demo1.html">1</a><a href="demo2.html">2</a><a href="demo3.html">3</a><a href="demo4.html">4</a>
<a href="demo5.html">5</a><a href="demo6.html" class="current">6</a><a href="demo7.html">7</a><a href="demo8.html">8</a></p>
</div>
<div id="sliderFrame">
<div id="slider">
<a href="http://www.menucool.com/video-slider">
<img src="images/image-slider-1.jpg" alt="" />
</a>
<a class="video" href="http://vimeo.com/18560206">
<b data-src="images/image-slider-2.jpg">Vimeo</b>
</a>
<a class="video" href="http://www.youtube.com/watch?v=P0G_2tiivxE">
<b data-src="images/image-slider-3.jpg">Image Slider</b>
</a>
<a class="lazyImage" href="images/image-slider-4.jpg">Slide 4</a>
<a class="video" href="http://vimeo.com/18867695" data-autovideo="1">
<b data-src="images/image-slider-5.jpg">Slide 5</b>
</a>
</div>
</div>

<div class="div2">
<p>This demo shows how to display <a href="http://www.youtube.com" target="_blank">Youtube</a> and <a href="http://www.vimeo.com" target="_blank">Vimeo</a> in the slider</p>
<p><a href="http://www.menucool.com/slider/play-html5-video-or-audio-in-slider" target="_blank">How to play HTML5 videos or audios in the slider</a></p>
<p>You can download the source code from the <a href="http://www.menucool.com/javascript-image-slider">JavaScript Image Slider</a> page.</p>
<p>Visit online <a href="http://www.menucool.com/video-slider">Demo 6</a> for detailed instructions.</p>
<p>This demo requires a license for having used advanced features of the slider.</p>
</div>
</body>
</html>
Loading

0 comments on commit 94f01c0

Please sign in to comment.