peterbjerg

11 hours ago, tuanphan said:

Can you remove the script code? I will try test some code

Remove ALL code from header? 

Sure

(Remember.. goal is, only to show captions in Lightbox mode, and to captions change instantly when going from one image to the next. I dont mind "ease out", but I dint want delay/overlapping.)

PLEASE, could any one solve this problem of captions not changing fast enough with image shift in lightbox view.

" when the next or previous image is chosen in lightbox, the caption for the previous image still shows for 1/2 seconds overlapping with the caption for the current image."

Site/page: https://arnoldmikkelsen.squarespace.com/europa

Password: Citron 

I only added captions to two first images on page, but that is enough to reveal the "hanging captions" problem 

Code I use (including Java scrips). Injected into Header

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

position: relative;

    margin-right: auto;

    margin-left: auto;

    width: auto;

    bottom: auto;

    max-width: 1000px;

  font-family: source code pro;

  color:grey;

    font-size: 14px;

}

</style>

<style>

.gallery-lightbox-background {

    opacity: 1.0;

}

  </style>

<style>

.gallery-lightbox-item[data-in=false] .gallery-item-description {

  opacity: 0;

  transition: opacity 0.1s ease-out;

}

  </style>

Any one knows a solution to this problem?

" when the next or previous image is chosen in lightbox, the caption for the previous image still shows for 1/2 seconds overlapping with the caption for the current image."

On 2/2/2022 at 4:15 PM, bangank36 said:

Can you share your url slug?

I let it be for now, O am not activating that page. Thanks for your patience!!

Dear @tuanphan 

I just used your code here to expand lightbox.  

But there is a problem. The larger light box shown is in landscape mode, and severely crops the original square image. Is there a way to simply make the light box larger, but adopt to the original image format? (or otherwize SQUARE lightbox, OR that image in lightbox automatically adjust content to fit lightbox, to fit lightbox frame? 

Site and page: https://gatsstudio.squarespace.com/art-shop/p/leaving-pompeii

Password: Lemon

Sincerely.. Peter

The code I used

.gallery-lightbox-item img {
    object-fit: cover !important;
}

Thankyou @bangank36 for looking into it, I made it a hidden page until I know If I can use it: 

https://anja-bo-site.squarespace.com/config/pages/61f6e72c31741318d0990c36

password to site is Appelsin! 

Site URL: https://peterbjerg.dk

I would like some tips and advice on setting up a Squarcespace  site for best  possible basic LinkedIn integration. 

For example: 

- How to make blog post also "automatically" appear on LinkedIn, do I manually control which blogposts also post on LinkedIn? (similar to the facebook option) 

- How to make sure blog image layout/format looks correct on LinkedIn

- What text will be posted on LInkedin, the full text? or my summary text? 

- And how can I share the other way around, ie. from LinkedIn to the squarespace site?

IMPORTANT Its for a client for whom I make a squarespace 7.1 site. I cant really test it with her LInkedIn account. 

But I can test it with my own site (that is the older version of squarespace). Does it make a difference if its the older type or 7.1?

Site URL: https://anja-bo-site.squarespace.com

How IS IT, that I change font color for specific text only on a specific page?

I know I can inject code under "settings > advanced" But I have forgotten everything I have learned from  @tuanphan about injecting code. Not his fault, Ive just been way from it to long , but I can pick it up quickly if helped 🙂

The page is a portefolio page with four headlines that each link to a subpage:

This is the page:

https://anja-bo-site.squarespace.com/ydelser-alt

SITE CODE IS: Appelsin!

Now it has black fonts, I want some not yet chosen color (say red), so that its still readable when background photo is active. 

I ONLY want to change the four headlines on this page, not the menu or anything else general. 

Thanks guys! 

Wonderfull, THAT worked!!

Could you also tell me what code to add to center the image/alt logo horizontally?

@tuanphan I tried, but it did not work. 

Site: https://arenastrategy.squarespace.com/cover-page

Password: Arenasite

All together, the exiting code for this page is: 

<style>
  /* hide footer */
  footer#footer-sections {
    display: none;
}

  /* remove padding top first section */
  article>section:First-child {
    padding-top: 0 !important;
}

  /* hide burger menu */
.burger-box, .header-nav-list, .header-actions {
display:none !important;
}

  /* hide logo */
  .header-title-logo img {
    visibility: hidden;
}

</style>

ADDING your code, but with link to my image,  looks like this, but didnt work 😞 Maybe you can help?

<style>
  /* hide footer */
  footer#footer-sections {
    display: none;
}
  /* remove padding top first section */
  article>section:First-child {
    padding-top: 0 !important;
}
  /* hide burger menu */
.burger-box, .header-nav-list, .header-actions {
display:none !important;
}
  /* hide logo */
  .header-title-logo img {
    visibility: hidden;
}
  .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/5e3832dd5baacc6c9cad3ad6/t/5e7d04f045189a6da48c2121/1585251568273/Arena-logo-white.png);
    background-size: cover;
    background-repeat: no-repeat;
}
</style>

Hi @tuanphan, 

Can I use this script for a version 7.1 site too? Client want different color site logo ONLY on landing page/"cover page".

I also need to know how to center the logo. 

I should change the image location url to what ever I get as url adress from uploading alt version of site logo, correct?

Hi @brandon 

MAYBE this is just what I need. Not sure yet. This code has great styling of text for light box view,

BUT.. I need to show my gallery in Simple Slideshow mode. And in this mode, the image description text is missing the semi-transparent backgound box, and also, the text appears as one long line and doesnt include all the text. 

Can you help me to correct the script, so that I will get all the text in a nice way in Simple Slideshow view?

Site: https://arena-2.squarespace.com/approach   4th section (only slide show gallery on that page). 

Password: Arenasite

I already added your code to the site wide footer and with the CSS editor.

Thanks!!

With this transparency turned OFF 😞

.tweak-transparent-header:not(.header--menu-open) .header-announcement-bar-wrapper {
    background: transparent !important;
}

@tuanphan

Hmm... Transparency only works on some of the pages. 

For example, on this page: https://amal-testsite.squarespace.com/services2  The header background turns solid black??? 

Thank YOU.. You ARE THE BEST!!

Site URL: https://amal-testsite.squarespace.com

Hi all

In Squarespace 7.1, there is already build in options to choice both “fixed position” and “transparent” in EDIT SITE HEADER. 

BUT, it doesn’t work. When header is fixed, then transparency doesn’t work. Instead Is has default or choosen background color. 
 

so how do I set or code to get transparent header/navigation menu when it’s also fixed? 
 

test site:

https://amal-testsite.squarespace.com 

password is: abcabc 

Yes the site is https://arena-2.squarespace.com, its pasword protected with: Arenasite

I presumes code should inject into footer, is that correct?

Wow FAST :-).. But its not a "site title" but a site logo

What to do (which code) for sites made in Squarespace 7.1? Code examples above do not work