Resimlerin pop-up seklinde açılması mümkün mü?

Smith · 21 Tem 2019

Merhab. Belki cok ince bir detay gibi gelebilir ancak benim icin onemli bir hususta yardim bekliyorum. Cevap kisminda eklenen resimlere tiklandigi zaman yeni sekmede aciliyor. Ben bunun yeni sekmede degil pop-up seklinde olmasini istiyorum. Yani kullanici siteden ayrilmadan resme tiklandiginda kucuk bir oencerede resme baksin ve carpiya tiklayarak yaziyi okumaya devam etsin… Boyle bir sey mumkun mu?

mekici · 22 Tem 2019

Smith Evet mümkün. Bunun için Fancybox adlı eklentiyi kurman lazım. Kurulum için aşağıdaki komutu çalıştır.

composer require squeevee/flarum-ext-fancybox

Smith · 22 Tem 2019

mekici Flarum harika, siz harikasiniz Tesekkurler.

SanalAnsiklopedim · 22 Tem 2019

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;
}