Jump to content

BearVsShark

Circle Member
  • Posts

    13
  • Joined

  • Last visited

Posts posted by BearVsShark

  1. Hey so thank's for the code everyone.
     

    We're trying to figure out how to either adjust the image so it's fully visable above the text OR to only allow the text to show.

    Any ideas?

    https://polygon-coral-y2k5.squarespace.com

    PW: earthbound

     

    The code we're using 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <script>
    function createNodeCaption(textContent){
    	var divElement = document.createElement("div");
    	var pElement = document.createElement("p");
    	pElement.innerHTML = textContent;
    	divElement.classList.add("style-gallery-lightbox-text");
    	divElement.appendChild(pElement);
    	return divElement;
    }
    $( document ).ready(function() {
        var itemGallery = document.getElementsByClassName('gallery-grid-item');
    	var itemGalleryLightBox = document.getElementsByClassName('gallery-lightbox-item');
    	var countGalleryItem = itemGallery.length;
    
    	for(var i = 0; i < countGalleryItem; i++){
    		if(itemGallery[i].getElementsByTagName('p').length != 0){
    			var text = itemGallery[i].getElementsByTagName('p')[0].textContent;
    			var itemNeedCaption = itemGalleryLightBox[i].getElementsByClassName('gallery-lightbox-item-src')[0];
    			itemNeedCaption.appendChild(createNodeCaption(text));
    		}
    	}
    });
    
    </script>
    <style>
      figcaption.gallery-caption.gallery-caption-grid-simple {
        display: none;
    }
    .style-gallery-lightbox-text {
        padding: 10px 0px 25px 0px;
        display: block;
        position: absolute;
        left: 50%;
        top: 90%;
        width: 100%;
        transform: translate(-50%, -50%);
        font-size: .3em
        text-align: left;
    }
    
    .style-gallery-lightbox-text p {
        width: 90%;
        padding: 10px 15px;
        margin: auto;
        color: white;
        background-color: rgba(0,0,0,0.5);
    }
      @media screen and (max-width:767px) {
    .style-gallery-lightbox-text {
        top: 70%;
    }
    }
    </style>

     

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.