Image Addon: How To Make Whole Image Clickable ---> Lightbox - Question | JoomShaper
Back to the questions

Image Addon: How To Make Whole Image Clickable ---> Lightbox

EF

Ernst Frank

SP Page Builder 3 years ago

Hey, I want to make the image clickable as a whole. In the moment you have to click the magnifying glass to open the lightbox. I want that you can click anywhere in the image to open it. Can somebody give me a hint or the solution for this problem?

Another thing would be to change the magnifying glass to another icon.

Website: http://hwc.hosting138274.a2e55.netcup.net/index.php/component/sppagebuilder/?view=form&layout=edit&tmpl=component&id=5&Itemid=0

Thank you

0
Website
http://hwc.hosting138274.a2e55.netcup.net/
3 Answers
Order by
Oldest Newest Votes
Pavel
Pavel
Accepted Answer
3 years ago #3066

Not need customize site.php. Enough custom css code. Set image overlay as transparent. Add this class in image addon whole-image-clickable. Add this code in template custom.css file.

.whole-image-clickable .sppb-addon-image-overlay-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    font-size: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
}

To add font awesome icon use this code

.whole-image-clickable .sppb-addon-image-overlay-icon::before {
    content: "\f00e";
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
}

It will looks like this

1
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 3 years ago #3052

Hello Ernst Frank

You need to customize the addon. Please go to this location: components\com_sppagebuilder\addons\image and customize site.php file.

Best regards

0
EF
Ernst Frank
Accepted Answer
2 years ago #56126

Hey... sorry for the late reply.... I found a other solution back then but needed it for the new project. Pavels solution is good THX

0