Help: Gallery within a page

[myleszey]

Hello!

I've been fiddling with my gallery for some time now trying to get it to look fancy like a lot of websites have, what with being able to click on one image and then it appearing in the center of the page with arrows on each side to scroll between them. Right now I'm using code from this website to display my images in neat rows, but no implementation of the lightbox.js stuff seems to work.

For reference, this is what I currently have, and I'd like to have the overlay-centered image appear rather than a direct link to the file.

HTML

Code

<section class="image-gallery">
 <a target="_blank" href="gallery/dog.png">
  <img src="/gallery/dog.png" title="Cerise" alt="Cerise the Dog" class="gallery" height="200px">
 </a>
</section>

CSS

Code

.gallery img {
  height: auto;
  width: 100%;
  max-width: none;
  border: 2px solid;
  padding: 2px;
  transition: 0.15s;
}

.image-gallery img{
  height: min(30vh, 25vw);
  width: auto;
  max-width: none;
  border: 2px solid;
  padding: 2px;
  transition: 0.15s;
}

.image-gallery img:hover{
  border: 2px solid;
  cursor: pointer;
}

[TheNothingMonster]

Your <img> tags need this attribute so they can be applied to the lightbox code: onclick="display(this);"
Also, you need to remove the <a> tags around your images. These basically attempt to open the image's source in a new tab which is something you don't want!

So your images' code will look something like this:

Code

<section class="image-gallery">
<img src="/gallery/dog.png" title="Cerise" alt="Cerise the Dog" class="gallery" height="200px" onclick="display(this);">
</section>

And make sure to add the lightbox.js code underneath your page's body!
You could do this either by directly inserting the code within a <script> tag in your page or by creating a new file with this script in your site and linking it with the <script> tag's source attribute in your page: <script src="insert_path_here/lightbox.js"></script>

(If you happen to have trouble finding the lightbox code, here it is:)

Spoiler

Code

function display(imgs){
        //show left and right arrows
        document.getElementById("prev").style.display = "block";
        document.getElementById("next").style.display = "block";
        //show image caption
        var imgText = document.getElementById("imgtext");
        imgText.innerHTML = imgs.title;
        document.getElementsByTagName("body")[0].style.overflow = "hidden";//prevent scrolling
        var expandImg = document.getElementById("expandedImg");
        expandImg.src = imgs.src;
        if (expandImg.width > expandImg.height){
          document.getElementById("expandedImg").style.maxWidth = "90%";
          document.getElementById("expandedImg").style.height = "auto";
        }else{
          document.getElementById("expandedImg").style.width = "auto";
          document.getElementById("expandedImg").style.maxHeight = "90%";
        }
        expandImg.parentElement.style.display = "block";
      }
      function plusSlides(next){
        event.stopPropagation();//don't click through and close by mistake
        var expandImg = document.getElementById("expandedImg");
        expandImg.parentElement.className = "container";
        var gallery = document.getElementsByClassName("gallery");
        var slideNo = 0;
        for (var i = 0; i<gallery.length; i++){
          if (gallery[i].src === expandImg.src) slideNo = i;
        }
        console.log(slideNo+next);
        if(slideNo+next > -1 && slideNo+next < gallery.length){
          display(gallery[slideNo+next]);
        }else{
          expandImg.parentElement.className = "container " + getGallery; //save gallery class for later
        }
      }
      function closeModal() {
        console.log("close");
        document.getElementById("imagebg").style.display = "none";
        document.getElementsByTagName("body")[0].style.overflow = "";
        document.getElementById("prev").style.display = "none";
        document.getElementById("next").style.display = "none";
      }

[close]

Let me know if you jump into any issues.

[Melooon]

I actually just made this kinda viewer for my new gallery maker! You're welcome to use the code from it ^^



Its very simple, when you click an image, it will stop the new tab from opening, then display the image on top of your gallery with  next and back buttons - if you click outside the image or press esc, it will close the viewer!

(It depends on every image being inside an <a> with a href link to the image and all the <a>s being next to each other; but that seems to be what you have!)

The only change you need to make is add id="photos" to your image-gallery section, add the CSS, then link this script at the bottom of your page 

CSS:

Code

#js-viewer {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.612);
    display: flex;
    justify-content: center;
}

#js-viewer div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

#js-viewer div img {
    width: 95%;
}

Script:

Code

// +++ Melon's Micro Gallery Viewer v0.1 +++
let al = {};

// Inject viewer code to the end of the body!
document.body.insertAdjacentHTML("beforeend", '<div id="js-viewer"><div><img id="js-viewer-img" src="" /><span><button id="js-viewer-prev" type="button">Previous</button> <button id="js-viewer-next" type="button">Next</button></span></div></div>');

al.html = {};
al.html.viewer = document.getElementById("js-viewer");
al.html.viewer.style.display = "none";

al.html.viewerImg = document.getElementById("js-viewer-img");
al.html.viewerPrev = document.getElementById("js-viewer-prev");
al.html.viewerNext = document.getElementById("js-viewer-next");

al.selectedPhoto = undefined;

document.addEventListener("click", (e) => {
    // Photo Viewing Event!
    if (e.target.parentElement.tagName == "A" && e.target.parentElement.parentElement.id == "photos") {
        e.preventDefault();
        viewPhoto(e.target.parentElement);
    }
    // Viewer Hide!
    if (e.target.id == "js-viewer") {
        al.html.viewer.style.display = "none";
    }
    // Prev Button Event
    if (e.target.id == "js-viewer-prev") {
        viewPhoto(al.selectedPhoto.previousElementSibling);
    }
    // Next Button Event
    if (e.target.id == "js-viewer-next") {
        viewPhoto(al.selectedPhoto.nextElementSibling);
    }
});

document.addEventListener("keyup", (e) => {
    // Close the viewer is Esc is pressed!
    if (e.key === "Escape") {
        al.html.viewer.style.display = "none";
    }
});

// Open the viewer and display a photo!
function viewPhoto(photo) {
    al.selectedPhoto = photo;
    al.html.viewerImg.src = al.selectedPhoto.href;
    al.html.viewer.style.display = "";
    al.html.viewerPrev.style.display = "";
    al.html.viewerNext.style.display = "";
    if (al.selectedPhoto.previousElementSibling == undefined) al.html.viewerPrev.style.display = "none";
    if (al.selectedPhoto.nextElementSibling == undefined) al.html.viewerNext.style.display = "none";
}

[myleszey]

Your <img> tags need this attribute so they can be applied to the lightbox code: onclick="display(this);"
Also, you need to remove the <a> tags around your images. These basically attempt to open the image's source in a new tab which is something you don't want!

This is what I was trying earlier, but it didn't work as intended - instead of showing the image in an overlay above the page, it just appeared underneath the section. Not only that, it didn't resize or respect the screen resolution despite the @media tags set in the stylesheet. I have the code written just as you have it typed out.

Spoiler

Code

<section class="image-gallery">
				<img src="gallery/dog.png" title="Cerise" alt="Cerise the Dog" class="gallery" height="200px" onclick="display(this);">
			  </section>
				<div class="container" id="imagebg"  onclick="closeModal()">
			  <h4 id="imgtext" >caption...</h4>
			  <a id="prev"  onclick="plusSlides(-1)" style="display:none">❮</a>
			  <a id="next"  onclick="plusSlides(1)" style="display:none">❯</a>
			  <img src="" alt="" id="expandedImg" style="border:0px">
			</div>
			<script src="lightbox.js"></script>

[close]

I actually just made this kinda viewer for my new gallery maker! You're welcome to use the code from it ^^

This works pretty well how I was trying to get it to work! Thank you!! Though the images are quite huge... Maybe I need to scale down everything in the gallery on the backend so that it shows up at a reasonable size? Though it's still going to be massive on mobile. Sometimes it's so big I can't click outside the bounding box to close it.

Spoiler

[close]

[Melooon]

gallery on the backend so that it shows up at a reasonable size?

I have actually re-designed this already since I ran into the biggie tallie issue too 

Thankfully the new version is actually a little cleaner than the old one and fixes a few small bugs!
You can hotlink some live versions if you like, or pull the code out of them and copy them to your site ^^

Code

<link href="https://melonking.net/scripts/gallery.css" rel="stylesheet" type="text/css" media="all" /><script src="https://melonking.net/scripts/gallery.js"></script>

EDIT: This is better explained in this post, read it to learn about the script ~ https://forum.melonland.net/index.php?topic=443.msg47135#msg47135