prodio
Version:
Simplified project management
334 lines (286 loc) • 13.8 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Modal gallery</title>
<meta name="description" content="">
<meta name="author" content="ink, cookbook, recipes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- Place favicon.ico and apple-touch-icon(s) here -->
<link rel="shortcut icon" href="../img/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="../img/touch-icon.57.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../img/touch-icon.72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../img/touch-icon.114.png">
<link rel="apple-touch-startup-image" href="../img/splash.320x460.png" media="screen and (min-device-width: 200px) and (max-device-width: 320px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="../img/splash.768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="../img/splash.1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
<!-- load inks CSS -->
<link rel="stylesheet" type="text/css" href="../css/ink-flex.min.css">
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
<!-- load inks CSS for IE8 -->
<!--[if lt IE 9 ]>
<link rel="stylesheet" href="../css/ink-ie.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
<![endif]-->
<!-- test browser flexbox support and load legacy grid if unsupported -->
<script type="text/javascript" src="../js/modernizr.js"></script>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.flexbox,
nope : '../css/ink-legacy.min.css'
});
</script>
<!-- load inks javascript files -->
<script type="text/javascript" src="../js/holder.js"></script>
<script type="text/javascript" src="../js/ink-all.min.js"></script>
<script type="text/javascript" src="../js/autoload.js"></script>
<style>
body {
background: #ededed;
}
.panel {
border-radius: 2px;
-webkit-box-shadow: #dddddd 0 1px 1px 0;
-moz-box-shadow: #dddddd 0 1px 1px 0;
box-shadow: #dddddd 0 1px 1px 0;
padding: 1em;
border: 1px solid #BBB;
background-color: #FFF;
}
#thumbs_carousel .slide {
opacity: 0.6;
}
#thumbs_carousel .slide.active {
opacity: 1;
}
</style>
</head>
<body>
<div class="ink-grid vertical-space">
<h1>Modal Gallery</h1>
<div class="panel">
<div id="main_carousel" class="ink-carousel">
<ul class="stage column-group gutters" id="trigger-modal">
<li class="slide all-100">
<figure class="ink-image">
<a href="#"><img src="http://lorempixel.com/1650/928/city/1"></a>
<figcaption class="dark">
This caption is placed after the image
</figcaption>
</figure>
</li>
<li class="slide all-100">
<figure class="ink-image">
<a href="#"><img src="http://lorempixel.com/1650/928/city/2"></a>
<figcaption class="dark">
This caption is placed after the image
</figcaption>
</figure>
</li>
<li class="slide all-100">
<figure class="ink-image">
<a href="#"><img src="http://lorempixel.com/1650/928/city/3"></a>
<figcaption class="dark">
This caption is placed after the image
</figcaption>
</figure>
</li>
<li class="slide all-100">
<figure class="ink-image">
<a href="#"><img src="http://lorempixel.com/1650/928/city/4"></a>
<figcaption class="dark">
This caption is placed after the image
</figcaption>
</figure>
</li>
<li class="slide all-100">
<figure class="ink-image">
<a href="#"><img src="http://lorempixel.com/1650/928/city/5"></a>
<figcaption class="dark">
This caption is placed after the image
</figcaption>
</figure>
</li>
<li class="slide all-100">
<figure class="ink-image">
<a href="#"><img src="http://lorempixel.com/1650/928/city/6"></a>
<figcaption class="dark">
This caption is placed after the image
</figcaption>
</figure>
</li>
<li class="slide all-100">
<figure class="ink-image">
<a href="#"><img src="http://lorempixel.com/1650/928/city/7"></a>
<figcaption class="dark">
This caption is placed after the image
</figcaption>
</figure>
</li>
<li class="slide all-100">
<figure class="ink-image">
<a href="#"><img src="http://lorempixel.com/1650/928/city/8"></a>
<figcaption class="dark">
This caption is placed after the image
</figcaption>
</figure>
</li>
</ul>
<nav id="pagination_main" class="ink-navigation vertical-space" data-next-label="" data-previous-label="">
<ul class="pagination chevron">
</ul>
</nav>
</div>
<!-- THUMBNAILS -->
<div id="thumbs_carousel" class="ink-carousel">
<ul class="stage column-group gutters unstyled">
<li class="slide all-20 active">
<a href="#"><img src="http://lorempixel.com/480/270/city/1"></a>
</li>
<li class="slide all-20">
<a href="#"><img src="http://lorempixel.com/480/270/city/2"></a>
</li>
<li class="slide all-20">
<a href="#"><img src="http://lorempixel.com/480/270/city/3"></a>
</li>
<li class="slide all-20">
<a href="#"><img src="http://lorempixel.com/480/270/city/4"></a>
</li>
<li class="slide all-20">
<a href="#"><img src="http://lorempixel.com/480/270/city/5"></a>
</li>
<li class="slide all-20">
<a href="#"><img src="http://lorempixel.com/480/270/city/6"></a>
</li>
<li class="slide all-20">
<a href="#"><img src="http://lorempixel.com/480/270/city/7"></a>
</li>
<li class="slide all-20">
<a href="#"><img src="http://lorempixel.com/480/270/city/8"></a>
</li>
</ul>
<nav id="pagination_thumbs" class="ink-navigation top-space" data-next-label="" data-previous-label="">
<ul class="pagination dotted">
</ul>
</nav>
</div>
<!-- MODAL -->
<div class="ink-shade fade">
<div id="modal-window" class="ink-modal fade" data-trigger="#trigger-modal" data-width="95%" data-height="95%">
<div class="modal-header">
<button class="modal-close ink-dismiss"></button>
<h2>Use arrow left/right to navigate</h2>
</div>
<div class="modal-body" id="modalContent">
<!-- CAROUSEL MODAL -->
<div id="modal_carousel" class="ink-carousel">
<ul class="stage column-group half-gutters unstyled">
<li class="slide all-100">
<img src="http://lorempixel.com/1650/928/city/1">
</li>
<li class="slide all-100">
<img src="http://lorempixel.com/1650/928/city/2">
</li>
<li class="slide all-100">
<img src="http://lorempixel.com/1650/928/city/3">
</li>
<li class="slide all-100">
<img src="http://lorempixel.com/1650/928/city/4">
</li>
<li class="slide all-100">
<img src="http://lorempixel.com/1650/928/city/5">
</li>
<li class="slide all-100">
<img src="http://lorempixel.com/1650/928/city/6">
</li>
<li class="slide all-100">
<img src="http://lorempixel.com/1650/928/city/7">
</li>
<li class="slide all-100">
<img src="http://lorempixel.com/1650/928/city/8">
</li>
</ul>
<nav id="pagination_modal" class="ink-navigation" data-next-label="" data-previous-label="">
<ul class="pagination chevron">
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
Ink.requireModules(['Ink.UI.Carousel_1', 'Ink.UI.Modal_1', 'Ink.Dom.Event_1', 'Ink.Dom.Element_1', 'Ink.Dom.Css_1'], function(Carousel, Modal, InkEvent, InkElement, InkCss){
var instMain = new Carousel('#main_carousel', {pagination: '#pagination_main', onChange: onMainChange});
var instThumbs = new Carousel('#thumbs_carousel', {pagination: '#pagination_thumbs'});
var instModal = new Carousel('#modal_carousel', {pagination: '#pagination_modal'});
var modalActive = false;
new Modal('#modal-window', {
onShow: function() {
modalActive = true;
instModal.refit();
instModal.setPage(instMain.getPage());
},
onDismiss: function() {
modalActive = false;
}
});
var thumbsItemsPerPage = instThumbs.getSlidesPerPage();
var thumbsTotalItems = instThumbs.getTotalSlides();
function onMainChange(page) {
if(instMain && instThumbs) {
var aThumbsElms = instThumbs.getSlidesList();
for(var tIdx=0, tLen=aThumbsElms.length; tIdx < tLen; tIdx++) {
InkCss.removeClassName(aThumbsElms[tIdx], 'active');
}
var thumbsCurPage = instThumbs.getPage();
var thumbsMinItem = thumbsCurPage * thumbsItemsPerPage;
var thumbsMaxItem = (thumbsMinItem + thumbsItemsPerPage) - 1;
if(thumbsMaxItem > thumbsTotalItems - 1) {
thumbsMaxItem = thumbsTotalItems - 1;
}
if(page < thumbsMinItem || page > thumbsMaxItem) {
if(page < thumbsMinItem) {
instThumbs.previousPage();
} else if(page > thumbsMaxItem){
instThumbs.nextPage();
}
}
InkCss.addClassName(aThumbsElms[page], 'active');
}
}
InkEvent.observe(document, 'keydown', function(event) {
if(modalActive) {
switch(event.keyCode) {
case InkEvent.KEY_LEFT:
InkEvent.stopDefault(event);
instModal.previousPage();
break;
case InkEvent.KEY_RIGHT:
InkEvent.stopDefault(event);
instModal.nextPage();
break;
}
}
});
InkEvent.observe(instThumbs.getStageElm(), 'click', function(event) {
InkEvent.stopDefault(event);
var aElms = instThumbs.getSlidesList();
var tgt = InkEvent.element(event);
var slideElm = InkElement.findUpwardsByClass(tgt, 'slide');
if(slideElm) {
for(var i=0, len=aElms.length; i < len; i++) {
if(aElms[i] === slideElm) {
instMain.setPage(i);
return;
}
}
}
});
});
</script>
</body>
</html>