Smith
Eklenti kurmadan kod ile işlem yapmak için;
Görünüm> Harici Başlık Eklenecek kodlar;
<script type="text/javascript">
function clickHandler(e) {
var elm, evt = e ? e:event;
if (evt.srcElement) elm = evt.srcElement;
else if (evt.target) elm = evt.target;
if (elm.tagName.toUpperCase() == "IMG" && elm.parentElement.parentElement.className == "Post-body") {
var modal = document.getElementById("imgModal");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("imgCaption");
modal.style.display = "block";
modalImg.src = elm.src;
captionText.innerHTML = elm.alt;
}
return true;
}
document.onclick = clickHandler;
</script>
<div id="imgModal" class="imgModal">
<button id="imgClose01" class="imgClose" type="button" onclick="document.getElementById('imgModal').style.display='none'">Kapat</button>
<!-- Modal Content (The Image) -->
<img id="img01" class="imgModal-content">
<!-- Modal Caption (Image Text) -->
<div id="imgCaption"></div>
</div>
Görünüm> Harici CSS Eklenecek kodlar;
/* MODAL POPUP IMAGES */
/* Style the Image Used to Trigger the Modal */
.Post-body > p img {
cursor: pointer;
transition: 0.5s;
}
.Post-body > p img:hover {
opacity: 0.5;
}
/* The Modal (background) */
.imgModal {
display: none;
position: fixed;
z-index: 2000;
padding-top: 55px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
/* Modal Content (Image) */
.imgModal-content {
z-index: 3000;
margin: auto;
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
.imgModal-content:active {
border: 10px solid #00ff00;
border-radius: 10px;
cursor: all-scroll;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#imgCaption {
margin: auto;
display: block;
width: 80%;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.imgModal-content, #imgCaption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.5s;
animation-name: zoom;
animation-duration: 0.5s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.imgClose {
position: absolute;
top: 5px;
right: 5px;
z-index: 4000;
color: #000000;
background-color: #bababa;
font-size: 24px;
font-weight: bold;
transition: 0.5s;
}
.imgClose:hover,
.imgClose:focus {
color: #bababa;
background-color: #000000;
text-decoration: none;
cursor: pointer;
}
