flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 02:10:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

added single image view to experiment...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2016-11-22 03:18:50 +03:00
parent b07624beb9
commit 50c5daeeaa
1 changed files with 37 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
ui (gen4)/experiments/centering-and-alignment.html
View File

@ -45,7 +45,7 @@
transform-origin: top left; transform-origin: top left;
transition: all 0.1s linear; transition: transform 0.1s linear;
} }
.ribbon-mover { .ribbon-mover {
position: relative; position: relative;
@ -53,7 +53,7 @@
top: 0px; top: 0px;
left: 0px; left: 0px;
transition: all 0.1s linear; transition: transform 0.1s linear;
} }
/* /*
@ -74,7 +74,7 @@
background: black; background: black;
transition: all 0.1s linear; transition: transform 0.1s linear;
/* XXX use vmin here... */ /* XXX use vmin here... */
margin-top: 2.5px; margin-top: 2.5px;
@ -118,6 +118,14 @@
} }
.single-image-mode .ribbon {
background: transparent;
}
.single-image-mode .image:not(.current) {
visibility: hidden;
}
</style> </style>
<script src="../ext-lib/jquery.js"></script> <script src="../ext-lib/jquery.js"></script>
@ -164,6 +172,30 @@ $(function(){
}) })
var ribbon_scale
var single_scale
$('.single-image-toggle')
.click(function(){
var ribbon_set = $('.ribbon-set')
if($('.viewer').hasClass('single-image-mode')){
single_scale = ribbon_set.attr('scale') || 5
} else {
ribbon_scale = ribbon_set.attr('scale') || 1
}
$('.viewer').toggleClass('single-image-mode')
if($('.viewer').hasClass('single-image-mode')){
ribbon_set.attr('scale', single_scale || 5)
} else {
ribbon_set.attr('scale', ribbon_scale || 1)
}
$('.current.image').click()
})
$('.zoom-reset') $('.zoom-reset')
.click(function(){ .click(function(){
@ -217,7 +249,8 @@ $(function(){
<body> <body>
<button class="single-image-toggle">&#128915;</button>
&nbsp;
<button class="zoom-in">+</button> <button class="zoom-in">+</button>
<button class="zoom-reset">1x</button> <button class="zoom-reset">1x</button>
<button class="zoom-out">-</button> <button class="zoom-out">-</button>