Jump to content

peterbjerg

Circle Member
  • Posts

    61
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

peterbjerg's Achievements

  1. 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.)
  2. 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>
  3. 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."
  4. I let it be for now, O am not activating that page. Thanks for your patience!!
  5. 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; }
  6. 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!
  7. 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?
  8. 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!
  9. Wonderfull, THAT worked!! Could you also tell me what code to add to center the image/alt logo horizontally?
  10. @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>
  11. 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?
  12. 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!!
  13. With this transparency turned OFF 😞 .tweak-transparent-header:not(.header--menu-open) .header-announcement-bar-wrapper { background: transparent !important; }
  14. @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???
×
×
  • 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.