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. List of links, showing background image, when doing rollover, js+css

List of links, showing background image, when doing rollover, js+css

Scheduled Pinned Locked Moved General Discussion
4 Posts 3 Posters 752 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.
  • soyfranasensioS Offline
    soyfranasensioS Offline
    soyfranasensio
    wrote on last edited by soyfranasensio
    #1

    Hi. I am trying to create a list of links to my works, in which when doing rollover on each one of my links, an image appears in the background of the centered page. I give you an example of what I want.

    http://chrissutevski.com/

    I have tried to recreate it with css, with css and js, but I can not. Could you help me?
    I am very grateful!

    I have included this code in my custom css & html:

    <script>

    window.laytheme.on("newpageshown", function(layoutObj, type, obj){
    if(type == "page" && obj.id == starwarscards){
    	$(document).ready(function() {
      $('body').css({
    'background-repeat': 'no-repeat', 'background-position' : '50% 50%', 'background-size' : '60%', 'background-attachment' : 'fixed'
    

    });

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

    var $body = $('body');

     $('.starwarscards').hover(function(){
        $body.css('background-image', 'url(http://soyfrancis.co/img/6.jpg)')
    }, function() {
        $body.css('background-image', '')
    })
    }
    

    });

    </script>

    DMBD 1 Reply Last reply
    0
    • soyfranasensioS soyfranasensio

      Hi. I am trying to create a list of links to my works, in which when doing rollover on each one of my links, an image appears in the background of the centered page. I give you an example of what I want.

      http://chrissutevski.com/

      I have tried to recreate it with css, with css and js, but I can not. Could you help me?
      I am very grateful!

      I have included this code in my custom css & html:

      <script>

      window.laytheme.on("newpageshown", function(layoutObj, type, obj){
      if(type == "page" && obj.id == starwarscards){
      	$(document).ready(function() {
        $('body').css({
      'background-repeat': 'no-repeat', 'background-position' : '50% 50%', 'background-size' : '60%', 'background-attachment' : 'fixed'
      

      });

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

      var $body = $('body');

       $('.starwarscards').hover(function(){
          $body.css('background-image', 'url(http://soyfrancis.co/img/6.jpg)')
      }, function() {
          $body.css('background-image', '')
      })
      }
      

      });

      </script>

      DMBD Offline
      DMBD Offline
      DMB
      wrote on last edited by
      #2

      @soyfranasensio

      I am no expert in jQuery at all, but I do know that in Lay you cannot write '$'. Try replacing '$' with 'jQuery' for a start. There is further documentation here about it:

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

      Best,

      D

      1 Reply Last reply
      0
      • soyfranasensioS Offline
        soyfranasensioS Offline
        soyfranasensio
        wrote on last edited by
        #3

        Thanks DMB, but I have not managed well to put the code that indicates the tutorial of Lay Theme. :(

        1 Reply Last reply
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          Hey soyfranasensio,

          please use "jQuery" instead of "$".

          Do not insert jQuery by yourself using <script src="jquery.js"></script>", because jQuery is already included. If you insert jQuery another time, this will cause bugs.

          You can put all of your custom JavaScript into "Lay Options" → "Custom CSS & HTML" → "Custom <head> content". Don't forget to wrap your JavaScript with <script> … </script>.

          Did that help?

          Many wishes!

          Marius

          www.mariusjopen.world

          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