My Tutorials

        
<main>

<section class="canvas">
    <!-- Trigger the Modal -->
<img id="myImg" class="artwork" src="../../../assets/art/2024/1jan/vi_bg.jpg" 
alt="vi from Arcane">
</section>

<section class="canvas">
    <!-- Trigger the Modal second image -->
<img id="myImg2" class="artwork" src="../../../assets/art/2024/1jan/vi.jpg" 
alt="vi from Arcane">  
</section>

    
<section class="canvas">
    <!-- Trigger the Modal third image-->
<img id="myImg3" class="artwork" src="../../../assets/art/2024/1jan/vi_bg_shirt.jpg" 
alt="vi from Arcane">  
</section>



<!-- The Modal -->
<div id="myModal" class="modal">

<!-- The Close Button -->
<span class="close">×</span>

<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">

<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>

<!-- The Modal 2-->
<div id="myModal2" class="modal2">

<!-- The Close Button -->
<span class="close2">×</span>

<!-- Modal Content (The Image) -->
<img class="modal-content2" id="img02">

<!-- Modal Caption (Image Text) -->
<div id="caption2"></div>
</div>

<!-- The Modal 3-->
<div id="myModal3" class="modal3">

<!-- The Close Button -->
<span class="close3">×</span>

<!-- Modal Content (The Image) -->
<img class="modal-content3" id="img03">

<!-- Modal Caption (Image Text) -->
<div id="caption2"></div>
</div>


</main>

<script>
// Get the modal
const modal = document.getElementById("myModal");
const modal2 = document.getElementById("myModal2");
const modal3 = document.getElementById("myModal3");

// Get the image and insert it inside the modal - use its "alt" text as a caption
const img = document.getElementById("myImg");
const img2 = document.getElementById("myImg2");
const img3 = document.getElementById("myImg3");
const modalImg = document.getElementById("img01");
const modalImg2 = document.getElementById("img02");
const modalImg3 = document.getElementById("img03");

img.onclick = ()=>{
modal.style.display = "block";
modalImg.src = img.src;

}
img2.onclick = ()=>{
modal2.style.display = "block";
modalImg2.src = img2.src;
}
img3.onclick = ()=>{
modal3.style.display = "block";
modalImg3.src = img3.src;
}


// Get the <span> element that closes the modal
const span = document.getElementsByClassName("close")[0];
const span2 = document.getElementsByClassName("close2")[0];
const span3 = document.getElementsByClassName("close3")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = ()=> {
modal.style.display = "none";
}
span2.onclick = ()=> {
modal2.style.display = "none";
}
span3.onclick = ()=> {
modal3.style.display = "none";
}
</script>
        
        

        
/* Style the Image Used to Trigger the Modal */
#myImg, #myImg2, #myImg3, #myImg4, #myImg5 {
/* border-radius: 5px; */
cursor: pointer; /* switch with animation */
animation: 1s linear 0s cursoranimation;
animation-iteration-count: infinite;
transition: 0.3s;
}

#myImg:hover, #myImg2:hover, #myImg3:hover, #myImg4:hover, #myImg5:hover {filter: brightness(120%); }

/* The Modal (background) */
.modal, .modal2, .modal3, .modal4, .modal5 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 0px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content, .modal-content2, .modal-content3, .modal-content4, .modal-content5 {
margin: auto;
display: block;
max-width: 100vw;
max-height: 100vh;
object-fit: contain;
}


/* Add Animation - Zoom in the Modal */
.modal-content, #caption, .modal-content2, .modal-content3, .modal-content4, .modal-content5 #caption2 {
animation-name: zoom;
animation-duration: 0.6s;
}

@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}

/* The Close Button */
.close, .close2, .close3, .close4, .close5 {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 100px;
font-weight: bold;
transition: 0.3s;
}

.close:hover,
.close:focus,
.close2:hover,
.close2:focus, 
.close3:hover,
.close3:focus,
.close4:hover,
.close4:focus,
.close5:hover,
.close5:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content, .modal-content2, .modal-content3, .modal-content4, .modal-content5 {
    width: 100%;
}
}