Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Project thumbnails - disable links on specific elements

    General Discussion
    4
    10
    394
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • F
      fabiofrl last edited by

      Hi there!

      I'm building the projects index page of my portfolio. There'll be a collection of project thumbnails, with titles always visibile and the images showing on rollover.

      Since there'll be also a few work in progress projects, the idea is to make these thumbnails not clickable (so you just see them among the work list as a little preview, but you can't reach the specific project page as it will be empty).

      I've tried this on the .thumb elements:

      .thumb  {
          pointer-events: none;
      }
      

      It pretty much does the job, but of course now every thumbnail link gets disabled.
      Is there a way to point out to specific .thumb elements?
      I've noticed that .thumb elements also have these tags, maybe is there a way to use them in the css selector?
      data-id="73" data-catid="1" data-title="Title here"

      Thanks!
      F

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Dear @fabiofrl
        no, this is not possible yet.

        I assume you are talking about the Thumbnail-Grid.

        I will write it down for the future.

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • F
          fabiofrl last edited by

          Dear @mariusjopen
          thank you!

          No I'm not using the Thumbnail-Grid.
          I prefer to use one-by-one single Project-Thumbnail to make it easier for me to customize the layout as I wish (eg. make a specifc project-thumbnail bigger or smaller to control hierarchy...).

          Thanks anyway!

          F

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Dear @fabiofrl
            perfect. Then it it possible. Have a look at the data-id.

            0_1536425522476_Bildschirmfoto 2018-09-08 um 18.51.33.png

            Best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • S
              Sophie last edited by

              Hello Marius, I try to do the same but maybe my code is wrong it dident' work :

              body[data-type="page"][data-id="1984"] .thumb {
              pointer-events: none;
              }

              I use the single Project-Thumbnail.
              I have also try to put some id but it didn't work either:

              .no .thumb {
              pointer-events: none;
              }

              Could you help me ? thanks.
              Sophie

              1 Reply Last reply Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                Dear @Sophie
                you can give those elements a class by using jQuery. In jQuery you can use those [data-type="page"][data-id="1984"] to select the elenemt.

                Once the element has a custom class, you can change it with CSS.
                Not very intuitive, but the way to go :-D

                Best!
                Marius

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 0
                • S
                  Sophie last edited by

                  @mariusjopen said in Project thumbnails - disable links on specific elements:

                  jQuery

                  Dear @mariusjopen
                  Thank you very much, I didn't receive notification of your answer !!
                  Unfortunately I dont' know well JQuery so I am note really sure to understand.

                  here is what I tried but it didn't seem good, it's not working...

                  jQuery:
                  <script>
                  jQuery( "a[data-type="project"][data-id="2632"]" ).thumb .addClass("future");
                  </script>

                  CSS:
                  .future .thumb {
                  pointer-events: none;
                  }

                  sorry to bother you with this, and thank you for your answer !

                  Sophie

                  1 Reply Last reply Reply Quote 0
                  • Richard
                    Richard Global Moderator last edited by

                    Dear @Sophie

                    Thank you for the kind reply and for using Lay Theme

                    Have a wonderful Day
                    Richard

                    1 Reply Last reply Reply Quote 0
                    • S
                      Sophie last edited by

                      Sorry but my soluton seems not working ... can you help me with javascript syntax ? thank you very much

                      1 Reply Last reply Reply Quote 0
                      • Richard
                        Richard Global Moderator last edited by

                        Dear @Sophie

                        If you haven't already you need to look into adding Custom Javascript to Lay Theme

                        http://laytheme.com/documentation.html#custom-javascript

                        Your Code Must first go within the surrounding code.

                        window.laytheme.on("newpageshown", function(layoutObj, type, obj){
                        
                        
                        });
                        
                        

                        Hope this helps

                        Sincerely
                        Richard

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post

                        Before you post

                        Use the Search Feature. Maybe there is already a solution to your issue.

                        1. Update Lay Theme and all Lay Theme Addons
                        2. Disable all Plugins
                        3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                        4. Now see if your problem solved itself
                        5. Go here, see if your problem is listed here:
                        Troubleshooting

                        When you post:
                        1. Post a link to where the problem is
                        2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                        Thanks!

                        Online Users

                        H
                        S
                        S

                        Recent Topics

                        • S

                          New fade-in / opacity bug?

                        • A

                          Unable to update lay theme / to login wp admin

                        • A

                          New button feature not available

                        • S

                          Theme crashed - because of Polylang?

                        laytheme.com