Skip to content

Commit

Permalink
Bog Fix and minor css change
Browse files Browse the repository at this point in the history
Bug Fix : zoomBoxExecute() now works fine for dynamic site.
UI : "close" icon is bit smaller now.
  • Loading branch information
ashkr808 authored Apr 23, 2020
1 parent c71bcda commit 895ef71
Show file tree
Hide file tree
Showing 16 changed files with 783 additions and 5 deletions.
1 change: 1 addition & 0 deletions css/zoombox.css
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
position: absolute;
top: 5%;
right: 5%;
height: 23px;
}

.zoombox-next, .zoombox-prev {
Expand Down
2 changes: 1 addition & 1 deletion css/zoombox.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

228 changes: 228 additions & 0 deletions dest/css/zoombox.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,228 @@
.zoombox-box {
display: none;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: rgba(34, 34, 34, 0.8);
-webkit-transition-duration: '.2s';
transition-duration: '.2s';
-webkit-animation-duration: '.2s';
animation-duration: '.2s';
z-index: 100;
font-weight: 300;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.zoombox-close-bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}

.zoombox-image {
position: absolute;
max-height: 90%;
max-width: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
opacity: 1;
}

.slide {
-webkit-animation: in ease;
animation: in ease;
}

.zoombox-controls {
height: 30px;
width: auto;
cursor: pointer;
}

.zoombox-close {
position: absolute;
top: 5%;
right: 5%;
height: 23px;
}

.zoombox-next, .zoombox-prev {
position: absolute;
bottom: 3%;
left: 5%;
}

.zoombox-next {
right: 5%;
left: auto;
}

.zoombox-play {
position: absolute;
top: 5%;
left: 5%;
}

.zoombox-zoom-out, .zoombox-zoom-in {
position: absolute;
bottom: 15%;
right: 5%;
height: 40px;
}

.zoombox-zoom-in {
bottom: 25%;
}

.zoombox-caption {
text-align: center;
font-size: 19px;
color: #fff;
position: absolute;
bottom: 10%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-shadow: 1px 1px 3px #000;
}

.zoombox-count {
color: #aaa;
position: absolute;
top: 2%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

.zoombox-load {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 80px;
}

.zoombox-zoomValue {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 5px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
font-weight: 200;
-webkit-transition-duration: .7s;
transition-duration: .7s;
opacity: 0;
}

.zoombox-about {
position: absolute;
top: 0;
left: 0;
color: #555;
font-size: 0.7rem;
}

.zoombox-preview {
position: absolute;
bottom: 1%;
left: 47.5%;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transform: translateX(1);
transform: translateX(1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.preview-box {
height: 60px;
width: 60px;
margin: 0px 5px;
opacity: 0.3;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}

.preview-box[zoombox-active=yes] {
opacity: 1;
}

.preview-image {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}

@media only screen and (min-width: 2000px) {
.zoombox-controls {
height: 55px;
}
}

@media only screen and (max-width: 500px) {
.zoombox-caption {
font-size: 15px;
}
.zoombox-preview {
left: 40%;
}
.preview-box[zoombox-active=yes] {
-webkit-transform: scale(1);
transform: scale(1);
margin: 0px 5px;
}
}

@-webkit-keyframes in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@-webkit-keyframes out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

@keyframes out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
1 change: 1 addition & 0 deletions dest/css/zoombox.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added dest/images/close.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 49 additions & 0 deletions dest/images/load.svg
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 dest/images/next.png
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 dest/images/pause.png
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 dest/images/play.png
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 dest/images/prev.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions dest/images/zoom-in.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions dest/images/zoom-out.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 895ef71

Please sign in to comment.