Lay Theme Forum

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

    Lightbox Addon - Call a specific image from a link

    Addons
    2
    5
    56
    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.
    • deMenouillard
      deMenouillard last edited by

      Hi there,

      I know it's a long shot here.
      I'd like to know if there's any viable way of calling a specific image in the lightbox from a link in the page ?

      Essentially, the idea behind it would be to make a archive list of images from a artist and reveal the light box on click.
      See draft here : https://www.mohamedbourouissa.com/category/photographs/

      Thanks in advance !

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

        Dear @deMenouillard

        Cool website :)

        I'm looking into it now and noticed you achieved some of the effect using The Image-hover Addon.

        Is this the desired effect you were looking for?

        All the best
        Richard

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

          Hi there !

          Actually, the thumbnail system was implemented before the image-hover addon was release. It'll come now quite in handy. 👌

          What I am hoping to achieve only concerns the trigger to call a lightbox. The normal behavior is to click on an image to see it in the lightbox. I'd like to alter this system by clicking on some text instead of the said-image - its caption perhaps ?

          I was wondering if Armin hid some options that could help me do that easliy without getting too depp in the code or doing some dirty workaround.

          Thanks for the help !

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

            Dear @deMenouillard

            The Short answer no, At the moment there is no built in option to link the Lightbox images with a respective "text" :

            The start of an option if it suits you, but were getting dirty...

            I know you didn't want to get too cod'e...

            Giving my text element is own Custom Class or #id

            Screen Shot 2020-08-24 at 10.57.01 PM.png

            For the example ive used "special"

            Screen Shot 2020-08-24 at 10.57.13 PM.png

            Now the Lightbox becomes visible when the classes "hide-images", "transparent" & "hide" are removed from the lightbox-region.

            Screen Shot 2020-08-24 at 11.01.37 PM.png

            Before ^ ^ ^

            Screen Shot 2020-08-24 at 11.02.03 PM.png

            After ^ ^ ^ Lightbox is visible.

            Adding jQuery code into "Custom CSS & HTML" within "Lay Options"
            I can target my text "Special" that when clicked makes the Lightbox visible

            jQuery(".special").click(function(){
              jQuery("#lightbox-region").removeClass("hide-images transparent hide");
            });
            
            

            be sure to use "jQuery" instead of the default "$".

            Now this is only One half of the process, but if getting "too dirty" the option would be to seek the aid of a developer to reach further,
            Im sorry i don't have a simpler solution at this point

            Sincerely
            Richard

            Extra long sentences if it helps....

            The Lightbox Shows the correct slide based on its position along the the carousel, calculated based on my screen size a slide comes to 1265px wide.

            When the prev or next button are pushed

            Screen Shot 2020-08-24 at 11.32.39 PM.png
            See the - "translate3d" CSS transform - we move nicely along the carousel: 0, -1265px, -2530px, -3795px and so on,

            Screen Shot 2020-08-24 at 11.32.45 PM.png

            You would need to find a way that when the text is clicked it would know where along the carousel it was meant to be and take you there,
            So the aid of a developer is what i suggest if you do need this.

            Thanks for reading through all this, maybe it wasn't necessary

            • Sorry i cant help you further at this point :)
            1 Reply Last reply Reply Quote 0
            • Richard
              Richard Global Moderator last edited by

              Hey @deMenouillard

              Also! i was thinking that using the Imagehover-addon that you already have:

              As the text is hovered a semi-transparent box with the width and height of the browser could be displayed,
              This could be an easier option for you :)

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

              Try this to fix issues 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

              G
              M
              I
              M
              L

              Recent Topics

              • text underline

              • open all links in a thumbnail grid in a new tab

              • lazy loading affects project thumbnail mouseover images

              laytheme.com