Jump to content

nowicluk

Circle Member
  • Posts

    70
  • Joined

  • Last visited

Posts posted by nowicluk

  1. Solved myself, below is the code I used from another member: 

     

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // configure the classes we're looking for
        const listClass = "div.gallery figure";
        const linkClass = "div.gallery-strips-item-wrapper a, div.gallery-grid-item-wrapper a, div.gallery-masonry-item-wrapper a";
        const lightBoxCaption = "lightbox-caption";
        const lightboxSlideSelector = "div.gallery-lightbox-list figure[data-slide-url='{0}']"
        // select all gallery elements, find their captions
        // if they exist then extract the slide id and add a new caption element
        // to the lightbox slide
        const n = document.querySelectorAll(listClass);
        for (var i = 0; i < n.length; i++) {
          const a = n[i].querySelector(linkClass);
          const c = n[i].querySelector("figcaption");
          if (a && a.href && c) {
            const id = a.href.split("=")[1];
            const lbSelector = lightboxSlideSelector.replace("{0}",id);
            const lb = document.querySelector(lbSelector);
            const cp = document.createElement("figcaption");
            cp.className = lightBoxCaption;
            cp.innerHTML = c.innerHTML;
            lb.appendChild(cp);
          }
        }
      });
    </script>
    <style>
    figcaption.gallery-caption {
      display:none;
    }
    figcaption.lightbox-caption {
      bottom:0;
      font-family: "Europa", serif;
      font-style: regular;
      font-size: 16px;
      line-height: 1.4em;
      color: #061A37;
      text-align:justify;
    }
    </style>

  2. For the website https://octahedron-tiger-52rc.squarespace.com/afghanistan-up-close (password: tcl2022) I am using the following codes which work perfectly fine except the caption gets cut off automatically. It seems there is a limited word count. How do I avoid captions to be cut? Please check the first image of the link provided above. I attached a screenshot below.

    image.thumb.png.52db860e8acf6ad7abfb61416c83bae4.png

    Code Injection > Footer:

    <script>
    /**
     * Add descriptions/captions to galleries in Squarespace 7.1.
     * JavaScript
     * © @brandon (Squarespace Forum User)
     * This software is provided "as is", without warranty of any kind, express or implied.
     */
    document.addEventListener("DOMContentLoaded", function() {
      addGalleryItemDescriptions(".gallery-lightbox");

      function addGalleryItemDescriptions(gs, gdzs) {
        var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs));
      }
    });
    </script>

    CSS: 

    /
    / Caption in Lightbox //

    body {
      width: 100%;
    }
    section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) {
      position: relative;
     }
    .gallery-item-description {
      font-family: "Europa", serif;
      font-style: regular;
      font-size: 16px;
      line-height: 1.4em;
      color: #061A37;
    }
    .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow {
      .gallery-item-description {
        position: absolute;
        width: 100%;
        bottom: 0;
        background-color: rgba(255, 255, 255, 1);
        padding: 2% 6%;
        box-sizing: border-box;
      }
    }
    .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel {
      .gallery-item-description {
        padding: 10px 10px;
        opacity: 1;
        transition: opacity 0.2s;
      }
      .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] {
        .gallery-item-description {
          opacity: 0;
        }
      }
    }
    .gallery-slideshow {
      .gallery-slideshow-list {
        position: static;
      }
      .gallery-slideshow-item-wrapper, .gallery-item-description {
        flex: 1 1 auto;
      }
    }
    .gallery-reel {
      .gallery-item-description {
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
      }
      &[data-width="inset"], &[data-width="inset"] {
        .gallery-item-description {
          max-width: 88vw;
        }
      }
      &[data-width="full-bleed"] {
        .gallery-item-description {
          max-width: 100vw;
        }
      }
    }
    .gallery-lightbox .gallery-item-description {
      margin-top: 1em;
      padding: 1em 1em;
      background-color: #ffffff;
      transition: opacity 0.1s ease-out;
    }
    .gallery-lightbox-item[data-in=false] .gallery-item-description {
      opacity: 0;
    }

  3. Hi, I used a code posted by @tuanphan for a website to show captions for photos in the lightbox. Everything worked perfectly fine until I discovered that the text is limited and automatically cut. Does anyone have a solution so all the text is displayed fully? Below is the link to the website and the password. The first photo of the gallery has the example of the caption being cute in the lightbox on desktop and mobile. Appreciate the help. Thank you.

    https://octahedron-tiger-52rc.squarespace.com/afghanistan-up-close

    Password: tcl2022

  4. 3 hours ago, nowicluk said:

    @Beyondspace thank you heaps. The code worked. Would you be able to help me adapt it? Below are screenshots of the desktop and mobile view. I would need the text box to be under the photo and not cover it. I tried adapting the code but when I position it properly, the text gets cut off, especially on mobile.

     

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

    Thank you. I coded it myself.

  5. @Beyondspace thank you heaps. The code worked. Would you be able to help me adapt it? Below are screenshots of the desktop and mobile view. I would need the text box to be under the photo and not cover it. I tried adapting the code but when I position it properly, the text gets cut off, especially on mobile.

     

    <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>
  6. 17 hours ago, Ziggy said:

    Given I've just looked at and replied to your other question, this gallery has the same left and right padding of 200px. I'm not sure if this is intentional, or how this is being applied, but I would look to remove the 200px padding value from the Custom CSS.

    If you want to copy that code and paste it here, I can try and see what you do want the 200px padding for and help you re-target it more narrowly (if that's the problem).

    Thank you for looking into this. I don't use a Custom CSS for the gallery. Any other way other suggestion why this is displayed incorrectly on mobile?

  7. On 4/26/2023 at 1:31 PM, tuanphan said:

    Can you enable photo lightbox? I can't click image to open lightbox here.

    Also, if you use Gallery Section, you can follow this

    https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two

    When you follow the link https://octahedron-tiger-52rc.squarespace.com/afghanistan-up-close you see the first photo which has lightbox activated. The link to the discussion which you sent does not work for me unfortunately. 

×
×
  • 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.