BatuhanPALALI

  • 29 Ağu 2019
  • 24 Ağu 2019 tarihinde katıldı
  • 0 tartışma
  • 2 gönderi
  • 0 en iyi yanıt
  • 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;
    }
Hadımköy Kombi Servisi Minecraft Türk Sunucular