github/myvesta
1
0
Fork 0
mirror of https://github.com/myvesta/vesta synced 2025-08-20 21:34:12 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

The New Desing

Browse source
This commit is contained in:
Serghey Rodin 2015-05-29 02:07:55 +03:00
commit 067a2c862a
305 changed files with 22231 additions and 7576 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
web/js/iviewer/test/lightbox/img/bg_transblack.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 932 B

BIN
web/js/iviewer/test/lightbox/img/btn_close.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
web/js/iviewer/test/lightbox/img/btn_zoomin.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 970 B

BIN
web/js/iviewer/test/lightbox/img/btn_zoomout.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 959 B

BIN
web/js/iviewer/test/lightbox/img/spinner.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.4 KiB

47
web/js/iviewer/test/lightbox/index.html Normal file
View file

@ -0,0 +1,47 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>iViewer lightbox example</title>
<!-- Lightbox example by Hay Kranen < http://github.com/hay > -->
<link rel="stylesheet" href="style.css" />
<!--[if lt IE 9 ]>
<style>
/* IE < 9 doesn't display the image for strange reasons... */
#iviewer .viewer {
display: block;
}
</style>
<![endif]-->
</head>
<body>
<a class="go" href="../test_image.jpg">Show lightbox!</a>
<br />
<a class="go" href="../test_image2.jpg">Show another lightbox!</a>
<div id="iviewer">
<div class="loader"></div>
<div class="viewer"></div>
<ul class="controls">
<li class="close"></li>
<li class="zoomin"></li>
<li class="zoomout"></li>
</ul>
<p class="info">
Use your scrollwheel or the zoom buttons to zoom in/out.
Click and drag to view other parts of the image when zoomed.
</p>
</div>
<script type="text/javascript" src="../jquery.js" ></script>
<script type="text/javascript" src="../jqueryui.js" ></script>
<script type="text/javascript" src="../jquery.mousewheel.min.js" ></script>
<script type="text/javascript" src="../../jquery.iviewer.js" ></script>
<script src="main.js"></script>
</body>
</html>

59
web/js/iviewer/test/lightbox/main.js Normal file
View file

@ -0,0 +1,59 @@
(function($) {
function init() {
var viewer = $("#iviewer .viewer").
width($(window).width() - 80).
height($(window).height()).
iviewer({
ui_disabled : true,
zoom : 'fit',
onFinishLoad : function(ev) {
$("#iviewer .loader").fadeOut();
$("#iviewer .viewer").fadeIn();
}
}
);
$("#iviewer .zoomin").click(function(e) {
e.preventDefault();
viewer.iviewer('zoom_by', 1);
});
$("#iviewer .zoomout").click(function(e) {
e.preventDefault();
viewer.iviewer('zoom_by', -1);
});
}
function open(src) {
$("#iviewer").fadeIn().trigger('fadein');
$("#iviewer .loader").show();
$("#iviewer .viewer").hide();
var viewer = $("#iviewer .viewer")
.iviewer('loadImage', src)
.iviewer('set_zoom', 'fit');
}
function close() {
$("#iviewer").fadeOut().trigger('fadeout');
}
$('.go').click(function(e) {
e.preventDefault();
var src = $(this).attr('href');
open(src);
});
$("#iviewer .close").click(function(e) {
e.preventDefault();
close();
});
$("#iviewer").bind('fadein', function() {
$(window).keydown(function(e) {
if (e.which == 27) close();
});
});
init();
})(jQuery);

69
web/js/iviewer/test/lightbox/style.css Normal file
View file

@ -0,0 +1,69 @@
* {
margin: 0;
padding: 0;
}
#iviewer {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url('img/bg_transblack.png');
display: none;
z-index: 1;
}
#iviewer .controls {
position: fixed;
top: 0;
right: 0;
width: 40px;
}
#iviewer .controls li {
float: right;
clear: right;
position: relative;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center center;
display: block;
cursor: pointer;
z-index: 3;
}
#iviewer .controls:hover {
cursor: pointer;
}
#iviewer .controls .close { background-image: url('img/btn_close.png'); }
#iviewer .controls .zoomin { background-image: url('img/btn_zoomin.png'); }
#iviewer .controls .zoomout { background-image: url('img/btn_zoomout.png'); }
#iviewer .info {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #ccc;
font-size: 16px;
padding: 0;
}
#iviewer .viewer {
position: fixed;
top: 0;
left: 40px;
z-index: 2;
display: none;
}
#iviewer .loader {
position: fixed;
width: 100%;
height: 100%;
background: url('img/spinner.gif') no-repeat center center;
z-index: 2;
}