Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Ptphotography

Text to appear on click

Question

20 answers to this question

Recommended Posts

  • 1

Hi. Have you solved it yet?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 1
Posted (edited)

This is more a usability/concept issue - hover do not exist on mobile, so  you cannot click on the image to make the text appears when the click action is used as a navigation item.
An alternative would be that on mobile, you display the text under the image? 
Or do you want only to have the text and no link behind the images? 

Edited by GSv

Share this post


Link to post
  • 1

Im sorry, I was just giving some examples for  alternative solutions but I can't really code that - it would take quite some time.
You might need to hire an expert to get a custom-made solution, or use a different type of gallery if your template allows it. 
Just curious: what template are you using? 

Share this post


Link to post
  • 1

I see you solved?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 1

I can write something up to display the text when the photo is on the screen. So as you scroll though the text shows up and goes away as you scroll past.

Would that work?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 1

Might take me some time.

Unrelated, when your page loads, this flashes on the screen.

image.png.aeea49c26898fa95ec8b00f5e55e5791.png


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 1

I have this mostly figured out.  Still fine tuning something.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 1

Alight, give this a go.

Sorry for the run about, but I am tracking the plugin views to see what is popular.

Head to my website: https://ultraoutlook.com/

Click the codepen link at the bottom.

Then click scroll to hover.

You will need to add the CSS to design -> CSS

Then add the JS to the page code injection (don't for get to add the <script> and </script> tags.

You already have jQuery on your page, so you don't need to do anything with that.

Let me know how this works. The formula for the scroll location was one I found online, I didn't have time to write a different one, hopefully its ok.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 1

The shop will need a different code. It doesn't use the same elements as the other page. I will check it out asap.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 1

I will try to get to this later today. The shop is more complicated and I have been crazy busy lately.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

@GSv Thank you so much for giving me those options! Please, I would truly appreciate it if you can help me with the code to display the text under the image. I would like to keep the link on the images on click if possible. 

Best regards,
P

Share this post


Link to post
  • 0

@gsv thank you for this. I am using Mark Novo 7.1. 

The portfolio page is built in so I am at lost as to where to proceed. But appreciate your help. It's nice to see I have got options. 

Share this post


Link to post
  • 0
1 hour ago, rwp said:

Might take me some time.

Unrelated, when your page loads, this flashes on the screen.

image.png.aeea49c26898fa95ec8b00f5e55e5791.png

@rwp lol, it is a code I have hidden. I have taken it out now.

No rush. You have been very helpful to me, please take your time 🙏

 

 

Share this post


Link to post
  • 0

@Ptphotography sent you a message


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...