Jump to content

Lightbox captions only?

Recommended Posts

59 minutes ago, HoaLT said:

 

5 hours ago, GabrielD said:

Hi,

I've used the code from @tuanphan , and it works perfectly on desktop. However, on mobile, the arrows are on top of the images and don't align very well. What I want to do instead is hide the arrows and use a swipe to switch between images on mobile. I tried to ask ChatGPT for help, but it can't figure it out without messing up the captions.

Does anyone here know a solution to this problem?

Thanks!

Expand  

Can you share your URL here so we can check it more easily?

 

Sorry, forgot that.

https://bumblebee-harp-k75n.squarespace.com/automotive

Password: rayan

Link to comment
7 minutes ago, GabrielD said:

Sorry, forgot that.

https://bumblebee-harp-k75n.squarespace.com/automotive

Password: rayan

This is the best thing i can set style for the arrow on mobile

@media only screen and (max-width: 767px){
  .gallery-lightbox-control[data-previous] button {
    margin-left: -5.5vw;
  }

  .gallery-lightbox-control[data-next] button {
    margin-right: -5.5vw;
  }
}

The action to pinch zoom on lightbox I have no idea

Edited by HoaLT

Press 👍  or mark my comment as solution if you find my sharing useful

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

Link to comment
32 minutes ago, HoaLT said:

This is the best thing i can set style for the arrow on mobile

@media only screen and (max-width: 767px){
  .gallery-lightbox-control[data-previous] button {
    margin-left: -5.5vw;
  }

  .gallery-lightbox-control[data-next] button {
    margin-right: -5.5vw;
  }
}

Thank you. This worked in order to get the arrows further out, but when looking more closely on mobile and desktop the arrows don't align the same on both sides.

 

34 minutes ago, HoaLT said:

This is the best thing i can set style for the arrow on mobile

@media only screen and (max-width: 767px){
  .gallery-lightbox-control[data-previous] button {
    margin-left: -5.5vw;
  }

  .gallery-lightbox-control[data-next] button {
    margin-right: -5.5vw;
  }
}

The action to pinch zoom on lightbox I have no idea

Oh, that I don't want, sorry if I was unclear. What I do want if possible is to hide the arrows on mobile and use swipe instead.

Link to comment
  • 3 weeks later...
4 hours ago, Ceccarelli said:

Hi @tuanphanI tried the new code to create captions for light boxed images but it doesn't seem to be working... 

could you help see where I am going wrong? 🙂

Thank you! https://www.coreyceccarelli.com/home

 

Which code are you using? Can you share it here?

Press 👍  or mark my comment as solution if you find my sharing useful

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

Link to comment
21 hours ago, Ceccarelli said:

Hi @tuanphanI tried the new code to create captions for light boxed images but it doesn't seem to be working... 

could you help see where I am going wrong? 🙂

Thank you! https://www.coreyceccarelli.com/home

 

It doesn't work because you haven't enabled Caption yet

image.png.e319cd24771a7c94fbf390f59d804d25.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
21 hours ago, HoaLT said:

Which code are you using? Can you share it here?

Thank you! I am using this code: 

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

Link to comment
20 hours ago, Ceccarelli said:

yes in the simple grid gallery on the homepage they are enabled 

Your code missing jQuery Library Link. If code has not this library, it won't work.

image.thumb.png.13bd8aaf0b0ea528dbd744620df31876.png

add this line to top of Code Injection Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
5 hours ago, tuanphan said:

Your code missing jQuery Library Link. If code has not this library, it won't work.

image.thumb.png.13bd8aaf0b0ea528dbd744620df31876.png

add this line to top of Code Injection Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

 

Thank you that worked! Any idea why it would work for some images but not the others? Also can you advise on how I could get the captions to appear below the image instead of across it?  🙂 Thank you 🙂 

Link to comment
7 minutes ago, Ceccarelli said:

Thank you that worked! Any idea why it would work for some images but not the others? Also can you advise on how I could get the captions to appear below the image instead of across it?  🙂 Thank you 🙂 

 

6 hours ago, tuanphan said:

Your code missing jQuery Library Link. If code has not this library, it won't work.

image.thumb.png.13bd8aaf0b0ea528dbd744620df31876.png

add this line to top of Code Injection Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

 

Also the wrong captions are appearing for the image. For example Image 1 is showing Image 14's caption? 

Link to comment
  • 2 weeks later...
On 8/23/2024 at 5:27 AM, tuanphan said:

Try this new code

 

Hi @tuanphuan and thread, this still isn't working for me unfortunately - now I have 2 captions on Lightbox but its the wrong caption for each image and some have none too - you can check it out if you take a look at the first gallery on the homepage here www.coreyceccarelli.com - thanks in advance 🙂

Link to comment
19 minutes ago, Ceccarelli said:

Hi @tuanphuan and thread, this still isn't working for me unfortunately - now I have 2 captions on Lightbox but its the wrong caption for each image and some have none too - you can check it out if you take a look at the first gallery on the homepage here www.coreyceccarelli.com - thanks in advance 🙂

Figured it out 🙂

Link to comment
  • 3 weeks later...
18 hours ago, hello_studiofrey said:

Hello

I am having the same issues. I tried implementing your code in the Code Injection but it's not working.
Could you please help me out? https://dreisicht.squarespace.com/home-1 pw: SF2024.

I added descriptions to the images in the gallery but they don't appear in the Lightbox. 

Thank you very much!
Natasa

Screenshot 2024-09-24 at 14.31.52.png

/home-1 doesn't work. Can you check url again?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi! It would be so incredibly helpful if someone would be able to let me know how I could make the caption under the images in this portfolio gallery visible in lightbox. Thank you in advance for your help! 

https://www.mirakallio-tavin.com/paintings/project-one-ephnc-4f5cb

I'm afraid I can't share login details but even general suggestions would help. For instance, is it enough to use the image's uploaded file name to target the specific image in CSS? 

Edited by Aada
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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