benjaminternational
Member-
Posts
7 -
Joined
-
Last visited
Content Type
Forums
Downloads
Store
Events
Blogs
Gallery
Profiles
Everything posted by benjaminternational
-
@tuanphan I assigned each image with the appropriate #link and filled in the corresponding code into the footer, changing the # and block ID's for each of the 20. It didn't work. I am wondering if maybe it's because in the tutorial I followed, all three texts that were clicked to reveal more text were in the same block? And each of my images using to trigger the text are separate blocks? Here's the code I have in the footer: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("#block-0b7a02dd2c85f175322c").addClass("show"); // One $('.html-block a[href="#one"]').click(function(){ $("#block-0b7a02dd2c85f175322c").addClass("show"); $('div:not(#block-0b7a02dd2c85f175322c)').removeClass('show'); } ); // Two $('.html-block a[href="#two"]').click(function(){ $("#block-6f4b5e061432958cb0b6").addClass("show"); $('div:not(#block-6f4b5e061432958cb0b6)').removeClass('show'); } ); // Three $('.html-block a[href="#three"]').click(function(){ $("#block-d3b4bbf7faca9ffce4f7").addClass("show"); $('div:not(#block-d3b4bbf7faca9ffce4f7)').removeClass('show'); } ); // Four $('.html-block a[href="#four"]').click(function(){ $("#block-c0b09d04b6a3582346a8").addClass("show"); $('div:not(#block-c0b09d04b6a3582346a8)').removeClass('show'); } ); // Five $('.html-block a[href="#five"]').click(function(){ $("#block-5271881fc2d21e6ae00c").addClass("show"); $('div:not(#block-5271881fc2d21e6ae00c)').removeClass('show'); } ); // Six $('.html-block a[href="#six"]').click(function(){ $("#block-c7e44d4ff3efa537cb99").addClass("show"); $('div:not(#block-c7e44d4ff3efa537cb99)').removeClass('show'); } ); // Seven $('.html-block a[href="#seven"]').click(function(){ $("#block-0d7423fe1daaab31936a").addClass("show"); $('div:not(#block-0d7423fe1daaab31936a)').removeClass('show'); } ); // Eight $('.html-block a[href="#eight"]').click(function(){ $("#block-24d2c726d7d2ad97d825").addClass("show"); $('div:not(#block-24d2c726d7d2ad97d825)').removeClass('show'); } ); // Nine $('.html-block a[href="#nine"]').click(function(){ $("#block-56df435772c9325b22a0").addClass("show"); $('div:not(#block-56df435772c9325b22a0)').removeClass('show'); } ); // Ten $('.html-block a[href="#ten"]').click(function(){ $("#block-860fc5bcbead12e0f5ab").addClass("show"); $('div:not(#block-860fc5bcbead12e0f5ab)').removeClass('show'); } ); // Eleven $('.html-block a[href="#eleven"]').click(function(){ $("#block-b51e033a74c3216782f7").addClass("show"); $('div:not(#block-b51e033a74c3216782f7)').removeClass('show'); } ); // Twelve $('.html-block a[href="#twelve"]').click(function(){ $("#block-96e63a3f052729fe6f29").addClass("show"); $('div:not(#block-96e63a3f052729fe6f29)').removeClass('show'); } ); // Thirteen $('.html-block a[href="#thirteen"]').click(function(){ $("#block-fb133884d63f0b03e172").addClass("show"); $('div:not(#block-fb133884d63f0b03e172)').removeClass('show'); } ); // Fourteen $('.html-block a[href="#fourteen"]').click(function(){ $("#block-057f810f3a451851694d").addClass("show"); $('div:not(#block-057f810f3a451851694d)').removeClass('show'); } ); // Fifteen $('.html-block a[href="#fifteen"]').click(function(){ $("#block-6dcf57ee364cca147d9d").addClass("show"); $('div:not(#block-6dcf57ee364cca147d9d)').removeClass('show'); } ); // Sixteen $('.html-block a[href="#sixteen"]').click(function(){ $("#block-5d7b73f4d74d86d6dccc").addClass("show"); $('div:not(#block-5d7b73f4d74d86d6dccc)').removeClass('show'); } ); // Seventeen $('.html-block a[href="#seventeen"]').click(function(){ $("#block-0a3a6f11d4961ffdcd84").addClass("show"); $('div:not(#block-0a3a6f11d4961ffdcd84)').removeClass('show'); } ); // Eighteen $('.html-block a[href="#eighteen"]').click(function(){ $("#block-858a16f05c26e1f08aed").addClass("show"); $('div:not(#block-858a16f05c26e1f08aed)').removeClass('show'); } ); // Nineteen $('.html-block a[href="#nineteen"]').click(function(){ $("#block-74acbaff8d58b5939dbf").addClass("show"); $('div:not(#block-74acbaff8d58b5939dbf)').removeClass('show'); } ); // Twenty $('.html-block a[href="#twenty"]').click(function(){ $("#block-cd598cd8b64cfa51aeae").addClass("show"); $('div:not(#block-cd598cd8b64cfa51aeae)').removeClass('show'); } ); }); </script> <style> #block-0b7a02dd2c85f175322c, #block-6f4b5e061432958cb0b6, #block-d3b4bbf7faca9ffce4f7, #block-c0b09d04b6a3582346a8, #block-5271881fc2d21e6ae00c, #block-c7e44d4ff3efa537cb99, #block-0d7423fe1daaab31936a, #block-24d2c726d7d2ad97d825, #block-56df435772c9325b22a0, #block-860fc5bcbead12e0f5ab, #block-b51e033a74c3216782f7, #block-96e63a3f052729fe6f29, #block-fb133884d63f0b03e172, #block-057f810f3a451851694d, #block-6dcf57ee364cca147d9d, #block-5d7b73f4d74d86d6dccc, #block-0a3a6f11d4961ffdcd84, #block-858a16f05c26e1f08aed, #block-74acbaff8d58b5939dbf, #block-cd598cd8b64cfa51aeae. { opacity: 0; transition: all 0.1s ease; } .show { opacity: 1 !important; transition: all 0.1s ease; } </style>
-
Site URL: https://brass-sphere-xyd7.squarespace.com/milestone-map Password: squarespace1 I have a page on my site with a series of 20 image blocks containing numbered gems. There are hover effects applied to the image blocks. But I am wondering if it is also possible to add a feature where when you click on one of the numbered gems, a different text block will reveal itself in the middle? I've attached a screenshot below. @tuanphan I see you did something similar for this user, where clicking on 4 different headlines revealed 4 different text boxes. I tried duplicating using my image blocks instead but I couldn't figure it out. I saw you asked the user to create the 4 text blocks. I created 20 text blocks that I would like to have all hidden, only to be revealed when their corresponding numbered gem is clicked. Is this possible? Thank you!
-
I'm trying to use css to create an effect so that when you hover over the images in a section, each image scales up with a drop shadow so it looks like it comes forward. The images are close together so when they scale, I want the hovered image to always be in the front so it is stacked above the images it is next to as it's hovered over. I found information about changing the z-index to a low number and then changing it to a higher number upon hover (which I did in the code I'm using). But maybe something is overriding this because still only one image will actually come forward above the others. The code I am using is listed below. Any help would be greatly appreciated! Code: section[data-section-id="67028027e84796476b768b81"] { .sqs-block-image { transform:scale(1); transition:ease-in-out 500ms; opacity:.65; z-index: 1; position: relative; &:hover { transform:scale(1.1); -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s; opacity:1; box-shadow: 7px 7px 30px #000000; z-index: 1000; } } }
-
custom thumbnails for Slideshow gallery
benjaminternational replied to Dipingo's topic in Fonts, colors and images
@tuanphan I just came across this thread and was wondering if there was a code to change the thumbnails to a custom image under a slide show? Thanks!