nickbarr

Hey all, Really appriciate some feedback on my site speed, it is very image heavy on the main page, with css for each image (image overlay). Love to know if it is painful to view my site in waiting time for the images / site to load. https://www.nickbarr.co/ Many thanks!

Thanks again for you help. It all looks great, minus the site is very slow with loading. Is there anything that might help with this, understand the man page is heavy with images? Many thanks!

Made a few changes to the above but not much luck still, few issues. 1. I would like the GIF to display full screen on both desktop and mobile. I have one GIF for Desktop, and one for Mobile. 2. Mobile it is not full screen and not centre (down from the top) screen grab attached. 3. Anyway to have the scroll bar on the left not show when on the loading page? But appear once the loading screen has disappeared. 4. I only want loading screen to play once when someone visits the site, not on every page. Think I have fixed this. Though you have to reset cache to see it working. Note: I have taken the code out of advanced, not having the Navigation Bar issue. Not sure code was supposed to be in there in the first place. I have placed the code back on the site if you want to have a look. www.nickbarr.co Many thanks!

Thank you for responding. Almost there, just a few issues. 1. I would like the GIF to display full screen on both desktop and mobile, I tried a change in code div#loader-container img { max-width:100%; Mobile GIF is 1080 × 1920 Desktop GIF is 2010 × 1200 2. Mobile it is not full screen and not centre (down from the top) screen grab attached. 3. My Navigation Bar at the top is now white (used to be black on main page) on the Overview page, it used to change color depending on what page it is showing. Site styles seems to not want to load anymore to check it. 4. Anyway to have the scroll bar on the left notshow when on the loading page? 5. I only want loading screen to play once when someone visits the site, not on every page. Code seen below is what I currently have: Footer: <!-- Container for the splash screen with a specified ID --> <div class="splash-wrapper" id="loader-container"> <!-- Lottie animation player --> <img src="https://static1.squarespace.com/static/5eb3110e12c2b51022acb382/t/66088d79b1e9b9435da0df3d/1711836538317/NickBarr_Loading_Screen.gif"/> </div> <style> @media screen and (max-width:767px) { .splash-wrapper img { content: url(https://static1.squarespace.com/static/5eb3110e12c2b51022acb382/t/66098f299f2dd00a3a22b62f/1711902506375/NickBarr_Loading_Mobile.gif); } } div#loader-container img { max-width:100%; } /* Loader animation styles */ .splash-wrapper { display: none; /* Initially hidden */ position: fixed; z-index: 9999; background-color: black; height: 100vh; width: 100vw; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; animation-name: slideOut; animation-fill-mode: forwards; animation-duration: 1s; animation-delay: 4.8s; } @keyframes slideOut { from { margin-left: 0vw; } to { margin-left: -100vw; } } @media screen and (max-width:767px) { div#loader-container { background-size: cover; } div#loader-container img { max-width: 300px; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function () { setTimeout(function(){ $('.splash-wrapper img').fadeIn(500); }, 3000); }); </script> Advanced (Overview page): <!-- Container for the splash screen with a specified ID --> <div class="splash-wrapper" id="loader-container"> <!-- Lottie animation player --> <img src="https://static1.squarespace.com/static/5eb3110e12c2b51022acb382/t/66088d79b1e9b9435da0df3d/1711836538317/NickBarr_Loading_Screen.gif"/> </div> <style> @media screen and (max-width:767px) { .splash-wrapper img { content: url(https://static1.squarespace.com/static/5eb3110e12c2b51022acb382/t/66098f299f2dd00a3a22b62f/1711902506375/NickBarr_Loading_Mobile.gif); }

Hey, Thank you for explaining the different options. Option 2 please. Much appreciated!!!!

Hey, Wanting to have a loading page (one time only when directed to the website). Is it possible to have a separate GIF for computer screen, and a different .GIF for mobile? I have one for landscape (computer) and one vertical (mobile). They are both .GIF animations. Mobile is 5.2MB. Computer screen is 4.4MB. Are these too big for quick loading? Like to fill the frame, or at least have black background behind to fill the page behind animation. I do like the loading page transition you have mentioned in the past, exits quickly to the left, example below... https://tuanphan3.squarespace.com/lottie-loading-one?noredirect Many thanks!!! P.S It will not let me upload the .GIF files to show you an example, even though they are 5MB and under.

Hey, So code is working great, thank you very much!!! Just a couple of notes: -The background image when on hover appears a little pixelated / crunchy (if that help describe it). -When the browser is set to a different size, e.g. not full screen or an odd size you do sometime see the background image appear underneath by a pixel or two. Very rarely, just out of interest why.

Great, thank you. Only slight issue I see now is with different browser sizes... that the overlay is a pixel or two bigger, you see a slight border especially at the bottom. And is there a way to disable it on mobile, so the hover image does not flash up when you click the image? So I can keep all my previous code and just replace the below with the new supplied code. a.gallery-masonry-image-link[href="/ssense-stories-2024"]:hover img { content: url(https://cdn.pixabay.com/photo/2023/08/11/04/51/fireworks-8182800_1280.jpg); }

Wow, works amazingly! Very much appreciated. Just a side note, when hovering over the image for the first time there is a slight flash of a black and or slow loading tine for the hover image. Assuming nothing that can be done about that. Website loading etc...? Here is my other code in the CSS, slight hover zoom, nothing crazy. @media screen and (min-width:768px) { /* masonry-gallery-image-grow-on-hover sqs.7.1 */ .gallery-masonry-wrapper :hover img { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s ; transition-duration: 0.3s ; -webkit-transition-property: transform; transition-property: transform; } .gallery-masonry-wrapper :hover img, .gallery-masonry-wrapper:active img { -webkit-transform: scale(1.0) ; transform: scale(1.02) ;} } .header-nav-item a:hover { text-decoration: underline; } .header-nav-wrapper a { background-image: none !important; } @media screen and (max-width:767px) { .homepage { .gallery-masonry-wrapper { height: auto !important; } figure.gallery-masonry-item { position: static !important; width: 100% !important; transform: unset !important; margin-bottom: 20px; } .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry-item img { width: 100% !important; } } } /* Gallery one column */ @media screen and (max-width:767px) { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; margin-bottom: 20px; } .gallery-masonry-item-wrapper { height: auto !important; } } /* END Gallery One Column */ /* spacing site title - next section */ section.products.collection-content-wrapper { padding-top: 0; } .homepage #page section:first-child { padding-top: 80px !important; } [data-section-id="6052c0d10d9ceb298c75d305"] { padding-bottom: 20px !important; } [data-section-id="6052c0d10d9ceb298c75d305"] { padding-top: 90px !important; } [data-section-id="5eb335cef2e2f001a99b8bcd"] { padding-top: 90px !important; } [data-section-id="5eb335cef2e2f001a99b8bcd"] { padding-bottom: 20px !important; } #collection-6373e6025f63a91d1e47e50d header {display:none} /* Masonry one item on mobile */ @media screen and (max-width:767px) { .gallery-masonry-item-wrapper { height: auto !important; margin-bottom: 10px !important; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } .gallery-masonry { padding-left: 10 !important; padding-right: 10 !important; }}

Hey, I am a little naive when it comes to this stuff so to me this is the same thing, obviously it is not. I would like to hover over the image and a new image appears, once you take the hover off the original images returns. The images is also a clickable link if that changes anything. Thank you!!!!!

Hey, Correct with the above. Below is the page with images in Masonry that I would like to have image hover that changes image. https://www.nickbarr.co Many thanks!

I found this code below. A note below this code... #img-hover { background-image: url('first-image-url'); height: 20vw; width: 20vw; background-size:contain; } #img-hover:hover { background-image: url('second-image-url'); } But I am unable to add the code injection into the gallery section for the above code to work <div id="img-hover"></div>

Hey, Is it possible to have an image overlay so that it changes the image on hover? From what I can tell it is not possible with Masonry Grid. I have 30+ images on the page that I want to have a rollover on. Many thank in advance! https://www.nickbarr.co/

Hey, Is it possible to have an image overlay so that it changes the image on hover? From what I can tell it is not possible with Masonry Grid. I have 30+ images on the page that I want to have a rollover on. Many thank in advance!

Hey, Must have been an update on Sqaurespace, images don't show up full page width on mobile. Obvisly check on mobile device to see the issue. https://www.nickbarr.co/glossier-ultralip-generation-g I do have some code in Custom CSS, not sure if that is causing a new issue, it didnt before.