Can You Enlarge Specific Images when Clicked on?

[core365]

Hi, I’m working on a website where there’s a mix of screen grabs and images and I need to have a feature for the screen grabs, that when clicked on enlarges the images just like a lightbox. These are individual images that are within the text on various pages, so creating a gallery isn’t an option. I can’t figure out how to add an image to a page and enable the lightbox feature, as when you use the Image element in Cornerstone, no other option comes up when inserting an image. I’ve tried to find a solution in your forum, but the only one I could see was this post using the Responsive Lightbox shortcode which is totally confusing!

http://demo.theme.co/integrity-1/shortcodes/responsive-lightbox/#themeco

Hope you can help!

Thanks

[Joao]

Hi There,

Here you have a more in deptht explanation of the lightbox functionality.

Use Shortcodes | Themeco Docs

I would suggest doing the following

Add a classic image element. on the bottom of the image element add a class: light-1 - turn on the link functionality and add to the href box a link to the image itself.

Add a second image element and do the same but with a different class, example light-2

Do that as many times as you need.

You will than add a raw code element, and add multiple lightbox selectors there, one for each image/class.

So in our example you would add:

[lightbox selector=".light-1"]
[lightbox selector=".light-2"]

Hope it helps

[core365]

That’s great, thanks!

I’ve followed the steps and the lightbox is working. Would you be able to help me out with one more thing for it please?!! When you click on the image and view it in the lightbox, there’s a toolbox in the top left of the screen, I’ve tried to move it to the right but the CSS doesn’t work for me! Do you know how I can change it from the top left to top right of the screen?

Thanks!

[Joao]

Hi There,

Please provide your URL so we can take a closer look.

Also point which image you are using.

Thanks!

[core365]

Ok! I’ll put the info in a secure note as I’m still working on the site.

Thanks!

[Joao]

Hi There,

You can add the following code to Theme Options CSS

.ilightbox-toolbar.light {

         display: none !important;
}

.ilightbox-overlay.light {

background: black !Important;
}

.ilightbox-holder.light {
  
    background: black !Important;
    border-color: grey !Important;
}

Hope it helps

[core365]

Hi, thanks for that, but I still wanted the toolbox to show, but to be in the top right instead of the top left.

Cheers

[thai]

Hi There,

Please add this custom CSS also:

.ilightbox-toolbar.light {
    right: 8px;
    left: auto;
}

Hope it helps

[core365]

Brilliant, thanks!

I really appreciate the help, many thanks!

[thai]

You’re welcome.

[dbrinda]

Feature request: It would be great if the lightbox functionality was built into the Image element. Just an on/off toggle if you want the option to have it enlarge on-click.

[ruenel]

Hey There,

Thanks for updating this thread. Your feedback has been noted. We’ve added this as a feature request so it can be taken into consideration for future development.

Regards.

[JvP]

Yeah, that would be great. It’s a no-brainer.

[christopher]

Thank you for your comment.