Canvas Support

Plus icons on lightbox image

1 reply·opened Apr 20, 2016
B
brocosApr 20, 2016

Hi there,

How can I get the plus on the image for a lightbox gallery?

Thank you!

S
SemiColonWebSTAFFApr 21, 2016

Hello,

You can consider using the following code for an Image Gallery with a Plus Icon on the Images:

<div class="masonry-thumbs col-5 clearfix" data-big="3" data-lightbox="gallery">
&#x9;<a href="images/portfolio/4/1.jpg" data-lightbox="gallery-item">
&#x9;&#x9;<img src="images/portfolio/4/1.jpg" alt="Gallery Image">
&#x9;&#x9;<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
&#x9;</a>
&#x9;<a href="images/portfolio/4/2.jpg" data-lightbox="gallery-item">
&#x9;&#x9;<img src="images/portfolio/4/2.jpg" alt="Gallery Image">
&#x9;&#x9;<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
&#x9;</a>
&#x9;<a href="images/portfolio/4/3.jpg" data-lightbox="gallery-item">
&#x9;&#x9;<img src="images/portfolio/4/3.jpg" alt="Gallery Image">
&#x9;&#x9;<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
&#x9;</a>
&#x9;<a href="images/portfolio/4/4.jpg" data-lightbox="gallery-item">
&#x9;&#x9;<img src="images/portfolio/4/4.jpg" alt="Gallery Image">
&#x9;&#x9;<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
&#x9;</a>
&#x9;<a href="images/portfolio/4/5.jpg" data-lightbox="gallery-item">
&#x9;&#x9;<img src="images/portfolio/4/5.jpg" alt="Gallery Image">
&#x9;&#x9;<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
&#x9;</a>
&#x9;<a href="images/portfolio/4/6.jpg" data-lightbox="gallery-item">
&#x9;&#x9;<img src="images/portfolio/4/6.jpg" alt="Gallery Image">
&#x9;&#x9;<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
&#x9;</a>
&#x9;<a href="images/portfolio/4/7.jpg" data-lightbox="gallery-item">
&#x9;&#x9;<img src="images/portfolio/4/7.jpg" alt="Gallery Image">
&#x9;&#x9;<div class="overlay"><div class="overlay-wrap"><i class="icon-line-plus"></i></div></div>
&#x9;</a>
</div>

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard