Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Project thumbnails - disable links on specific elements

Project thumbnails - disable links on specific elements

Scheduled Pinned Locked Moved General Discussion
10 Posts 4 Posters 776 Views
  • 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 Offline
    F Offline
    fabiofrl
    wrote on last edited by
    #1

    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
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      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
      0
      • F Offline
        F Offline
        fabiofrl
        wrote on last edited by
        #3

        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
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          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
          0
          • S Offline
            S Offline
            Sophie
            wrote on last edited by
            #5

            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
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #6

              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
              0
              • S Offline
                S Offline
                Sophie
                wrote on last edited by
                #7

                @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
                0
                • RichardR Offline
                  RichardR Offline
                  Richard
                  Global Moderator
                  wrote on last edited by
                  #8

                  Dear @Sophie

                  Thank you for the kind reply and for using Lay Theme

                  Have a wonderful Day
                  Richard

                  1 Reply Last reply
                  0
                  • S Offline
                    S Offline
                    Sophie
                    wrote on last edited by
                    #9

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

                    1 Reply Last reply
                    0
                    • RichardR Offline
                      RichardR Offline
                      Richard
                      Global Moderator
                      wrote on last edited by
                      #10

                      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
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      I also code custom websites or custom Lay features.
                      šŸ’æ Email me here: šŸ’æ
                      info@laytheme.com

                      Before you post:
                      1. When using a WordPress Cache plugin, disable it or clear your cache.
                      2. Update Lay Theme and all Lay Theme Addons
                      3. Disable all Plugins
                      4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                      This often solves issues you might run into

                      When you post:
                      1. Post a link to where the problem is
                      2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                      3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                      Online Users
                      Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                      laytheme.com
                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Search