Lay Theme Forum

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

    Customize Lightbox-plugin arrows

    Addons
    6
    19
    2016
    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.
    • ArneRobot
      ArneRobot last edited by

      Hello Armin,

      is there a way to use custom images as arrows in the "Lightbox Addon"? Just as you can use them in the "Fullscreen Slider Addon"? There seems to be no option in the plugin configuration but maybe I can pimp the CSS.

      I would like it to look this way: http://spielmaninbadcompany.com/welcomes-you

      Thanks a ton!
      Cheers, Arne

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

        Hey Arne!
        Yeah I need to add that option. Try this css:

        #lightbox-region #lightbox-inner.cursor-left img {
            cursor: url("yourimageurl") 9 9, pointer !important;
        }
        
        #lightbox-region #lightbox-inner.cursor-right img {
            cursor: url("yourimageurl") 9 9, pointer !important;
        }
        

        The 9 9 are the x and y coordinates, they should be half of your cursor-image width and height

        1 Reply Last reply Reply Quote 0
        • ArneRobot
          ArneRobot last edited by ArneRobot

          Great, it works like a charm! Thank you and cheers, Arne

          1 Reply Last reply Reply Quote 0
          • L
            louisdebelle last edited by

            works fine as long as the pointer is in the image area. any way to keep the new arrow also outside?

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

              Hi Louis,

              possible but not really easy and probably not a clean solution.

              Can you make a screenshot of your page and mark the are which you want with another cursor?

              Best!

              Marius

              www.mariusjopen.world

              dustin 1 Reply Last reply Reply Quote 0
              • dustin
                dustin @mariusjopen last edited by

                @mariusjopen I'm looking for the same solution as Louis.
                Is there a way you guys can show us how?
                I'm also looking for a way to adjust the coordinates of the "X" icon for Lightbox.
                Will there be any indication when you guys are going to apply these options?

                Cheers,

                Dustin
                www.dustinthierry.com

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

                  Hi you two,

                  this might be a way to use the arrows also outside:

                  .cursor-left {
                      cursor: url("yourimageurl") 9 9, pointer !important;
                  }
                  
                  .cursor-right {
                      cursor: url("yourimageurl") 9 9, pointer !important;
                  }
                  
                  

                  If you look here, the class is changing depending on the position of the cursor.
                  So you can address it with the Custom CSS:

                  0_1501057183438_Bildschirmfoto 2017-07-26 um 10.18.32.png

                  0_1501057189103_Bildschirmfoto 2017-07-26 um 10.18.36.png

                  About the X in the lightbox
                  I just made a small test and you can hide the div which contains the X with Custom CSS and then put a new div box in to the <head> section and give it the same class like the X box had.
                  Of course that new box needs to be positioned fixed etc.

                  Let me know if you face trouble.

                  Best!

                  Marius

                  www.mariusjopen.world

                  1 Reply Last reply Reply Quote 0
                  • dustin
                    dustin last edited by dustin

                    Hey Marius,

                    Thanks, it works!

                    I dont know how to work with div's and do all the wizardry.
                    I only need the "X" to have the same top-right position as the the last letter of my menu bar.
                    I would also like to know how I could change it to "Close". (if I wanted to.)

                    And where can I change the maximum image size of the LightBox and have it perfectly centred?

                    Any help would be appreciated.

                    Cheers,

                    Dustin

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

                      Hi Dustin,

                      I really recommend you to learn the basic of CSS and HTML.

                      What you need is super basic

                      You want to make this course for free, try again and let me know if you still got trouble?
                      https://www.codecademy.com/learn/web

                      Today it is really helpful to know at least the basics of coding.

                      You can position elements like this:

                      .element {
                         position: fixed;
                         top: 20px;
                         left: 20px;
                      }
                      

                      position fixed makes them not scrollable.

                      All very very basic CSS :-)

                      You can do it :-)

                      Marius

                      www.mariusjopen.world

                      dustin 1 Reply Last reply Reply Quote 1
                      • dustin
                        dustin @mariusjopen last edited by

                        This post is deleted!
                        1 Reply Last reply Reply Quote 0
                        • O
                          Olga V last edited by

                          Hi guys,

                          I know this topic already appeared quite often and I read your suggestions how to change the lightbox arrows. I tried it with CSS but it didn't work out. Could you please give me a hint, what I did wrong?

                          I placed this CSS code in Customize CSS:

                          #lightbox-region #lightbox-inner.cursor-left img {cursor: url("http://tihanavuk.com/wp-content/uploads/2020/01/cursor_left2.png") 9 9, pointer !important;
                          }

                          #lightbox-region #lightbox-inner.cursor-right img {cursor: url("http://tihanavuk.com/wp-content/uploads/2020/01/cursor_right2.png") 9 9, pointer !important;
                          }

                          Thank you!
                          Olga

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

                            Dear @ArneRobot
                            Can you post a link to our website?
                            Then we can have a look and inspect that.

                            Marius

                            www.mariusjopen.world

                            O 1 Reply Last reply Reply Quote 0
                            • O
                              Olga V @mariusjopen last edited by

                              Hi @mariusjopen ,

                              yes here it is:
                              www.tihanavuk.com

                              pw for viewing: Sonnenbrille

                              thank you!
                              O.

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

                                Dear @Olga-V
                                there are no custom cursors for the lightbox. Just arrows for next and prev.

                                Best!

                                Marius

                                www.mariusjopen.world

                                O 1 Reply Last reply Reply Quote 0
                                • O
                                  Olga V @mariusjopen last edited by

                                  Hi @mariusjopen,

                                  yeah, well. i wanted to change the arrows. is that possible?
                                  if yes, which CSS code should I use?

                                  thank you for caring!
                                  best,
                                  O.

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

                                    Dear @Olga-V

                                    you can change the arrows in thew LayTheme settings or even in the plugin of Lay which you use.

                                    Best!

                                    Marius

                                    www.mariusjopen.world

                                    1 Reply Last reply Reply Quote 0
                                    • O
                                      Olga V last edited by

                                      Hi @mariusjopen,

                                      sorry, I really CAN'T find the setting option!
                                      I can see it in the carousel addon though, but not in lightbox.

                                      Here’s a screenshot from my interface.

                                      Screenshot_2020-01-23 Lightbox Addon ‹ Tihana Vukčević — WordPress.png

                                      Best,
                                      O.

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

                                        Dear @Olga-V
                                        oh! My bad! Then you need to use CUSTOM CSS to do this :-)

                                        Best!

                                        Marius

                                        www.mariusjopen.world

                                        O 1 Reply Last reply Reply Quote 0
                                        • O
                                          Olga V @mariusjopen last edited by

                                          @mariusjopen

                                          Yeah, well I already tried that code:

                                          #lightbox-region #lightbox-inner.cursor-left img {cursor: url("http://tihanavuk.com/wp-content/uploads/2020/01/cursor_left2.png") 9 9, pointer !important;
                                          }

                                          #lightbox-region #lightbox-inner.cursor-right img {cursor: url("http://tihanavuk.com/wp-content/uploads/2020/01/cursor_right2.png") 9 9, pointer !important;
                                          }

                                          I don't know why I didn't work. Is sth. wrong with it?

                                          Thanks,
                                          O.

                                          1 Reply Last reply Reply Quote 0
                                          • First post
                                            Last post
                                          Post a link to where the problem is if possible, please <3
                                          I don't answer or check forum DMs, please just post on the forum.
                                          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com

                                          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. When using a WordPress Cache plugin, disable it or clear your cache. Now see if your problem solved itself.
                                          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

                                          E

                                          Recent Topics

                                          • A

                                            website error

                                          • Website gone all blank after update 6.3.1

                                          • S

                                            can't update project category content

                                          • C

                                            lightbox: how to go back to project instead of home with back button

                                          laytheme.com