-
Posts
70 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by nowicluk
-
-
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.
<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;
} -
@brandon would you be able to help here?
-
@tuanphan can you help me resolve this issue? I am desperately trying to figure this out so the text is not being cut automatically. I appreciate you support!
-
-
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
-
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.
-
@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>
-
On 5/6/2023 at 7:41 PM, tuanphan said:
I don't know this, maybe you will need to use script code.
I have fixed it myself. Thank you anyways.
-
-
I figured it all out. Thank you.
-
I figured it all out. Thank you.
-
-
17 hours ago, Ziggy said:
You seem to be adding 200px of left and right padding to the menu, which on mobile forces everything to start from the middle, you'll want to remove this from the Custom CSS:
.header-menu-nav-item {
padding-left: 200px;
padding-right: 200px;
}Same here, I am not using Custom CSS to add padding. 😕
-
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?
-
Hi there, as you can see below, I used a preset Squarespace section, which I assume is a photo carousel. On mobile I can't adjust it and display it correctly.
https://octahedron-tiger-52rc.squarespace.com/
Password: tcl2022
-
Hi there, my mobile navigation menu is displayed in two lines and if I center it, it doesn't change.
https://octahedron-tiger-52rc.squarespace.com/
Password: tcl2022
-
When I apply the instructions provided from the forum discussion you shared, it messes all up. Have a look now.
-
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.
-
@tuanphan Do you have any suggestion for this one?
-
On 4/20/2023 at 7:42 PM, nowicluk said:
Hi there, in the Featured Galleries section of my website, is it possible instead of rotating one image after another to rotate three images at the same time?
https://octahedron-tiger-52rc.squarespace.com/
Password: tlc2022
Sorry, password is tcl2022.
-
On 4/22/2023 at 12:09 PM, tuanphan said:
Password incorrect
tcl2022
-
Hi there, in the Featured Galleries section of my website, is it possible instead of rotating one image after another to rotate three images at the same time?
https://octahedron-tiger-52rc.squarespace.com/
Password: tlc2022
-
Hi there, I am trying to implement photo descriptions in the lightbox under each photo only (website wide) instead of under the photo in the gallery view. I have reviewed a few discussions here but none work. Can anyone help?
https://octahedron-tiger-52rc.squarespace.com/afghanistan-up-close
Password: tlc2022
-
On 12/24/2022 at 8:20 PM, tuanphan said:
Add to Design > Custom CSS
.header-display-desktop { align-items: flex-end; }
Thank you for this. Could you check once more. The icons are in line with the navigation, but the button is still higher. It only moved a bit.
Coded caption under photo in lightbox is being cut
in Pages & Content
Posted
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>