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. Addons
  3. Imagehover on Element Grid + Lightbox on Carousel

Imagehover on Element Grid + Lightbox on Carousel

Scheduled Pinned Locked Moved Addons
imagehovercarouselpluginlightboxelement grid
5 Posts 3 Posters 728 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.
  • R Offline
    R Offline
    rioma7
    wrote on last edited by
    #1

    I have read a couple of things about that but I am not sure and I was wondering if there is the possibility to use the image hover plugin on the Element Grid and the Lightbox option on the carousel slideshow.

    If not, is there a possibility to code it? Thanks in advance!

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

      Dear @rioma7

      You are correct that currently the Imagehover function works separately from the Element Grid, as well as the mix of Lightbox & Carousel.

      However i wish to help and set you in the right direction :)

      This workaround will require some basic knowledge of HTML, CSS and a little JS.

      We can add Custom Code through 'Lay-Options - Custom CSS & HTML' in the admin panel.

      Screen Shot 2020-09-14 at 2.51.54 PM.png

      We must remember that any JS, jQuery added to Lay Theme is done by wrapping it in a 'newpage event':
      https://laytheme.com/documentation.html#custom-javascript

      And some info on CSS & Developer tools if needed:
      https://www.khanacademy.org/computing/computer-programming/html-css

      https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

      Ok :)

      So within the Element Grid we can choose some example text, Add the desired link and then go into "Source Code"
      Screen Shot 2020-10-07 at 8.03.15 PM.png

      Here within the Link tags <a> we can add a class called whatever we wish - i called mine 'special' :
      Screen Shot 2020-10-07 at 8.03.09 PM.png

      & now on our frontend we can see that indeed the link now has a class that we can target called 'special' :
      Screen Shot 2020-10-07 at 8.04.54 PM.png

      Now we need to create an image separately ( the downside to this option sorry ), Then i can right click the image in the gridder and set a Custom Class or ID to it:
      Screen Shot 2020-10-07 at 8.16.18 PM.png

      I named mine 'magical' and indeed it has shown up:
      Screen Shot 2020-10-07 at 8.17.59 PM.png

      Now we need to go to "Lay-options-Custom CSS & HTML" and add some code like this for example:

      .magical {
          display: none;
      }
      
      .magical.cool{
          display:block !important;
      }
      

      Now with jQuery: When we Hover over "special" a class called 'cool' gets added to "magical"

       jQuery(".special").hover(function () {
          jQuery(".magical").toggleClass("cool");
       });
      

      We must set the common ( $ ) sign to ( jQuery ) with wordpress.

      Our Image that was invisible is now made visible when you hover over your text.
      As for Styling the Image how you wish that is up to you and your design needs :)

      I hope this Helps, Best of luck in your Lay Theme Journey and have a wonderful day

      Best
      Richard

      R 1 Reply Last reply
      0
      • J Offline
        J Offline
        jennysslattery
        wrote on last edited by
        #3

        Hi,

        I just recently purchased the Image Hover plug-in which works in the gridder but not when I'm using Element Grid. I now see here that currently this function doesn't work with Element Grid but was wondering if this was something that you were working on at all?

        Thanks!

        1 Reply Last reply
        0
        • RichardR Richard

          Dear @rioma7

          You are correct that currently the Imagehover function works separately from the Element Grid, as well as the mix of Lightbox & Carousel.

          However i wish to help and set you in the right direction :)

          This workaround will require some basic knowledge of HTML, CSS and a little JS.

          We can add Custom Code through 'Lay-Options - Custom CSS & HTML' in the admin panel.

          Screen Shot 2020-09-14 at 2.51.54 PM.png

          We must remember that any JS, jQuery added to Lay Theme is done by wrapping it in a 'newpage event':
          https://laytheme.com/documentation.html#custom-javascript

          And some info on CSS & Developer tools if needed:
          https://www.khanacademy.org/computing/computer-programming/html-css

          https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

          Ok :)

          So within the Element Grid we can choose some example text, Add the desired link and then go into "Source Code"
          Screen Shot 2020-10-07 at 8.03.15 PM.png

          Here within the Link tags <a> we can add a class called whatever we wish - i called mine 'special' :
          Screen Shot 2020-10-07 at 8.03.09 PM.png

          & now on our frontend we can see that indeed the link now has a class that we can target called 'special' :
          Screen Shot 2020-10-07 at 8.04.54 PM.png

          Now we need to create an image separately ( the downside to this option sorry ), Then i can right click the image in the gridder and set a Custom Class or ID to it:
          Screen Shot 2020-10-07 at 8.16.18 PM.png

          I named mine 'magical' and indeed it has shown up:
          Screen Shot 2020-10-07 at 8.17.59 PM.png

          Now we need to go to "Lay-options-Custom CSS & HTML" and add some code like this for example:

          .magical {
              display: none;
          }
          
          .magical.cool{
              display:block !important;
          }
          

          Now with jQuery: When we Hover over "special" a class called 'cool' gets added to "magical"

           jQuery(".special").hover(function () {
              jQuery(".magical").toggleClass("cool");
           });
          

          We must set the common ( $ ) sign to ( jQuery ) with wordpress.

          Our Image that was invisible is now made visible when you hover over your text.
          As for Styling the Image how you wish that is up to you and your design needs :)

          I hope this Helps, Best of luck in your Lay Theme Journey and have a wonderful day

          Best
          Richard

          R Offline
          R Offline
          rioma7
          wrote on last edited by
          #4

          @Richard-Keith thanks Richard. I'll try!

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

            Dear @rioma7

            Good luck! :)
            Let me know how you go

            Best
            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