github/vesta
1
0
Fork 0
mirror of https://github.com/serghey-rodin/vesta.git synced 2025-08-21 05:44:07 -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-gallery/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-gallery/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-gallery/img/btn_next.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 374 B

BIN
web/js/iviewer/test/lightbox-gallery/img/btn_prev.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 371 B

BIN
web/js/iviewer/test/lightbox-gallery/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-gallery/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-gallery/img/spinner.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.4 KiB

48
web/js/iviewer/test/lightbox-gallery/index.html Normal file
View file

@ -0,0 +1,48 @@
<!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" />
<link rel="stylesheet" href="../../jquery.iviewer.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" rel="gallery">Show lightbox!</a>
<br />
<a class="go" href="../test_image2.jpg" rel="gallery">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>
<div class="info" >
<a href="#" id="prevLink" class="go" style="width: 40px;"><img src="img/btn_prev.png"></a>
<p id="imageCount"></p>
<a href="#" id="nextLink" class="go" style="width: 40px;"><img src="img/btn_next.png"></a>
</div>
</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>

123
web/js/iviewer/test/lightbox-gallery/main.js Normal file
View file

@ -0,0 +1,123 @@
(function($) {
var gallery = new Array();
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);
});
/*
* Populate gallery array.
* NOTE: In order to add image to gallery, Anchor tag of images that are to be opened in lightbox, should have attribute 'rel' set to 'gallery'.
*/
$( "a[rel='gallery']" ).each(function( index ) {
gallery[index] = $( this ).attr("href");
});
}
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);
// Refresh next and prev links
refreshNextPrevLinks(src);
});
$("#iviewer .close").click(function(e) {
e.preventDefault();
close();
});
$("#iviewer").bind('fadein', function() {
$(window).keydown(function(e) {
if (e.which == 27) close();
});
});
/*
* refreshNextPrevLinks() refreshes Next and previous links
*/
function refreshNextPrevLinks(src){
console.log('RefreshNextPrevLinks called. src: '+src);
var imageIndex = 0;
//Iterate over gallery and find the index of current image.
for (i=0;i<gallery.length;i++)
{
if(src == gallery[i]){
imageIndex = i;
}
}
//Setting Next link
var nextLink = document.getElementById('nextLink');
if(gallery.length > imageIndex+1){
nextLink.href = gallery[imageIndex+1];
nextLink.style.visibility = 'visible';
}else{
nextLink.href = "#";
nextLink.style.visibility = 'hidden';
}
//Setting Prev link
var prevLink = document.getElementById('prevLink');
if(imageIndex > 0){
prevLink.href = gallery[imageIndex-1];
prevLink.style.visibility = 'visible';
}else{
prevLink.setAttribute("href", "#");
prevLink.style.visibility = 'hidden';
}
document.getElementById('imageCount').innerHTML= "Image: "+ (imageIndex+1) + "/" + gallery.length;
}
//Binding keypress event of left arrow and right arrow button. Image would be changed, if right arrow or left arrow button is pressed.
$(document).keyup(function(e) {
//left arrow key
if (e.keyCode == 37) {
if($("#prevLink").attr("href") != "#"){
$("#prevLink").click();
}
}
//right arrow
if (e.keyCode == 39) {
if($("#nextLink").attr("href") != "#"){
$("#nextLink").click();
}
}
});
init();
})(jQuery);

4
web/js/iviewer/test/lightbox-gallery/readme.txt Normal file
View file

@ -0,0 +1,4 @@
lightbox-gallery created under test project, to provide gallery option in lightbox+iviewer intergation.
Using lightbox-gallery, all images that are in gallery will be grouped, so that navigation from one image to other is possible from lightbox itself.
Anchors tag of image that are to be added in gallery, shuld have attribute rel="gallery".

79
web/js/iviewer/test/lightbox-gallery/style.css Normal file
View file

@ -0,0 +1,79 @@
* {
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 .controls .next { background-image: url('img/btn_next.png'); }
#iviewer .info {
position: fixed;
bottom: 0;
width: 300px;
left: 50%;
margin-left: -150px;
display: block;
text-align:center;
color: #ccc;
font-size: 18px;
padding: 0;
z-index: 2;
}
#iviewer .info p {
display:inline;
vertical-align: top;
}
#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;
}