The implemented function is to click on the picture on the page to display it in the light box, click the button to switch up and down, and click the light box to exit the display. The effect is shown in the following GIF.
The implementation steps are still the same. The three aspects of work are CSS, JavaScript, and HTML. The following is a step-by-step implementation. Finally, you can download the complete source code.
1. CSS part. This part mainly defines the style, which is the appearance we see. The background is black and 60% transparent, switching buttons up and down, mouse styles, loading images, etc. Main code:
[myth-image=active]{
cursor: pointer;cursor: zoom-in;}
.myth-image{
top: 0;left: 0;right: 0;bottom: 0;z-index: 66;position: fixed;user-select: none;animation: fade-in .3s both;-webkit-animation: fade-in .3s both;}
.myth-image.loading{
cursor: wait }
.myth-image.remove:before{
animation: fade-off .3s both; -webkit-animation: fade-off .3s both;}
.myth-image:before{
top: 0;left: 0;right: 0;bottom: 0;content: '';position: absolute;background: rgba(0, 0, 0, .6);}
.myth-image .myth-prev, .myth-image .myth-next{
top: 0;bottom: 0;width: 10%;height: 5em;margin: auto;max-width: 5em;cursor: pointer;position: absolute;transition: opacity .3s, transform .3s;}
.myth-image .myth-prev:hover{
transform: translateX(-.5em) }
.myth-image .myth-next:hover{
transform: translateX(.5em) }
.myth-image .myth-prev{
left: 0;
background: center/60% no-repeat url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjkpIj48cGF0aCBkPSJNMzI0LjIxMTUxNyA1MTEuODA1NjMxIDc4Ny44ODk1OTQgNzMuMDgyNTgzYzE2LjE5NDIyLTE2LjYzMDM2NSAxNi4xOTQyMi00My45NzQ3MDQgMC02MC42MDUwNjgtMTYuMTk0MjItMTYuNjMwMzY1LTQyLjQ5NTYwNy0xNi42MzAzNjUtNTguNjEzOTc2IDBMMjM1Ljc1MDExMyA0NzkuMzYwMzAyYy04LjY0NzAzMSA4Ljk2OTM5OC0xMi4zNDQ3NzUgMjAuOTM0OTE3LTExLjcxOTAwMyAzMi40NDUzMjktMC42NDQ3MzUgMTEuOTA4NjMgMy4wNzE5NzIgMjMuODc0MTQ5IDExLjcxOTAwMyAzMi44MjQ1ODVsNDkzLjUwNjU0MiA0NjYuODgyNzg4YzE2LjExODM2OSAxNi42NDkzMjcgNDIuNDM4NzE4IDE2LjY0OTMyNyA1OC42MTM5NzYgMCAxNi4xOTQyMi0xNy4wODU0NzEgMTYuMTk0MjItNDMuOTc0NzA0IDAtNjAuNjA1MDY4TDMyNC4yMTE1MTcgNTExLjgwNTYzMSI+PC9wYXRoPjwvc3ZnPg==);
}
.myth-image .myth-next{
right: 0;
background: center/60% no-repeat url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC45KSI+PHBhdGggZD0iTTEzNi43LDEwMGwtOTAuNiw4NS44Yy0zLjIsMy4yLTMuMiw4LjUsMCwxMS44YzMuMiwzLjMsOC4zLDMuMywxMS40LDBsOTYuNC05MS4yYzEuNy0xLjcsMi40LTQuMSwyLjMtNi40YzAuMS0yLjItMC42LTQuNi0yLjMtNi4zTDU3LjYsMi40Yy0zLjEtMy4yLTguMy0zLjItMTEuNCwwcy0zLjIsOC42LDAsMTEuOEwxMzYuNywxMDAiLz48L3N2Zz4NCg==);
}
.myth-image .ended{
opacity: .5;cursor: no-drop;}
.myth-image .myth-ball{
top: 1em;right: 1em;width: 2em;height: 2em;opacity: 0;border-radius: 66%; position: absolute; pointer-events: none;transition: opacity .3s;border: .5em #fff solid;border-left-color: #3498db;border-left-color: var(--primary); animation: rotate .5s linear infinite paused;-webkit-animation: rotate .5s linear infinite paused;}
.myth-image.loading .myth-ball{
opacity: 1;animation-play-state: running;}
.myth-image img, .myth-image video{
top: 0;left: 0;right: 0;bottom: 0;margin: auto;max-width: 80%;max-height: 90%;cursor: zoom-out;position: absolute;transition: transform .3s;animation: fade-small-large .3s backwards;-webkit-animation: fade-small-large .3s backwards;}
.myth-image video{
cursor: auto;}
.myth-image img:not([src]), .myth-image video:not([src]){
display: none;}
.myth-image.remove img, .myth-image.remove video, .myth-image.remove .myth-prev, .myth-image.remove .myth-next{
animation: fade-large-small .3s both;-webkit-animation: fade-large-small .3s both;}
.myth-image img[src$=".jpg"], .myth-image video{
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);}
2. JavaScript part. This part mainly implements the image click to expand the light box and achieves a series of display effects such as switching. The specific code is as follows. This part of the code should be placed in the corresponding location of Myth.js we wrote before.
image:function(){
var that = this;
var image_box = {
img: that.create("img"),
prev: that.create("div", {
class: "myth-prev"}),
next: that.create("div", {
class: "myth-next"}),
ball: that.create("div", {
class: "myth-ball"})
};
image_box.wrap = that.create("div", {
class: "myth-image", child: [
image_box.prev, image_box.img, image_box.next, image_box.ball
]});
image_box.wrap.onclick = function (e) {
image_box.wrap.classList.add("remove");
setTimeout(function () {
try{
document.body.removeChild(image_box.wrap);
image_box.wrap.classList.remove("remove");
}
catch (err){
}
}, 300);
};
image_box.img.onload = function () {
image_box.wrap.classList.remove("loading");
};
// 设置按钮
image_box.prev.onclick = function (e) {
e.stopPropagation();
if(current - 1 >= 0) current--;
actions.set();
};
image_box.next.onclick = function (e) {
e.stopPropagation();
if(current + 1 < that.dom.length) current++;
actions.set();
};
var current = 0;
var actions = {
ori: function (obj, num) {
obj.setAttribute("myth-image", "active");
obj.onclick = function () {
current = num;
actions.set();
document.body.appendChild(image_box.wrap);
};
},
set: function () {
var img = that.dom[current];
current === 0 ? image_box.prev.classList.add("ended") : image_box.prev.classList.remove("ended");
current === that.length - 1 ? image_box.next.classList.add("ended") : image_box.next.classList.remove("ended");
if(img.getAttribute("myth-original") !== null){
image_box.img.src = img.getAttribute("myth-original");
}
else if(img.src){
image_box.img.src = img.src;
}
else{
console.error("This image has no valid tag!");
}
image_box.wrap.classList.add("loading");
}
};
this.each(function(item){
if(item.src ){
actions.ori(item, item.index);
}
});
}
3. HTML part, this part is how to use the code of the first and second parts.
<div class="mythBox mid">
<p><img src="img/1.png" title="one" myth-image="active" class="myth-picbox" myth-original="img/1.png"></p>
<p><img src="img/2.png" title="one" myth-image="active" class="myth-picbox" myth-original="img/2.png"></p>
<p><img src="img/3.png" title="one" myth-image="active" class="myth-picbox" myth-original="img/3.png"></p>
<p><img src="img/4.png" title="one" myth-image="active" class="myth-picbox" myth-original="img/4.png"></p>
</div>
<script type="text/javascript">
myth('.myth-picbox').image();
</script>
This part of the code is divided into two parts, one is the page image display, and the other is JS call to achieve the lightbox effect.
Source code download: please click