Portfolio - Click to Enlarge.

3 replies·opened Oct 1, 2019

IdeodomikiOct 1, 2019

I like the overlay effect,and the icon on the center.

Still,I would like to be able to click ANYWHERE on the square to enlarge the image/gallerie.

This is how my code is written

<article class="portfolio-item">
							<div class="portfolio-image">
								<div class="fslider" data-arrows="false" data-autoplay="false">
									<div class="flexslider">
										<div class="slider-wrap">
											<div class="slide"><img src="images/portfolio/abc.jpg" alt="alt text"></div>											
										</div>
									</div>
								</div>
								<div class="portfolio-overlay" data-lightbox="gallery">
                                    <a href="images/portfolio/x.jpg" class="center-icon" data-lightbox="gallery-item"><i class="icon-zoom-in2"></i></a>
                                    <a href="images/portfolio/y.jpg" class="center-icon" data-lightbox="gallery-item"><i class="icon-zoom-in2"></i></a>
                                    <a href="images/portfolio/z.jpg" class="center-icon" data-lightbox="gallery-item"><i class="icon-zoom-in2"></i></a>
								</div>
							</div>
							<div class="portfolio-desc">
								<h3>Header Name</h3>
								<span>Place | 2019</span>
							</div>
						</article>

SemiColonWebSTAFFOct 2, 2019

Hello,

Consider using the following Code for the Portfolio Items:

<article class="portfolio-item">
	<div class="portfolio-image">
		<div class="fslider" data-arrows="false" data-autoplay="false">
			<div class="flexslider">
				<div class="slider-wrap">
					<div class="slide"><img src="images/portfolio/abc.jpg" alt="alt text" /></div>
				</div>
			</div>
		</div>
		<div class="portfolio-overlay" data-lightbox="gallery">
			<a href="images/portfolio/x.jpg"><i class="icon-zoom-in2"></i></a>
			<a href="images/portfolio/y.jpg"><i class="icon-zoom-in2"></i></a>
			<a href="images/portfolio/z.jpg"><i class="icon-zoom-in2"></i></a>
		</div>
		<a href="images/portfolio/abc.jpg" data-lightbox="image" class="portfolio-overlay-link"></a>
	</div>
	<div class="portfolio-desc">
		<h3>Header Name</h3>
		<span>Place | 2019</span>
	</div>
</article>

and then use the following CSS code:

.portfolio-overlay-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	z-index: 3;
}

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

IdeodomikiOct 3, 2019

I've used this code before. Didn't match my needs.

I want THE GALLERY to show up after the click. If I use the code you suggest I can only display ONE picture.

SemiColonWebSTAFFOct 4, 2019

Hello,

The Functionality you are seeking is also possible. Consider using the following code:

<article class="portfolio-item">
    <div class="portfolio-image" data-lightbox="gallery">
        <div class="fslider" data-arrows="false" data-autoplay="false">
            <div class="flexslider">
                <div class="slider-wrap">
                    <div class="slide"><img src="images/portfolio/abc.jpg" alt="alt text" /></div>
                </div>
            </div>
        </div>
        <div class="portfolio-overlay">
            <a href="images/portfolio/x.jpg" data-lightbox="gallery-item"><i class="icon-zoom-in2"></i></a>
            <a href="images/portfolio/y.jpg" data-lightbox="gallery-item"><i class="icon-zoom-in2"></i></a>
            <a href="images/portfolio/z.jpg" data-lightbox="gallery-item"><i class="icon-zoom-in2"></i></a>
        </div>
        <a href="images/portfolio/abc.jpg" data-lightbox="gallery-item" class="portfolio-overlay-link"></a>
    </div>
    <div class="portfolio-desc">
        <h3>Header Name</h3>
        <span>Place | 2019</span>
    </div>
</article>

This will definitely work fine. Hope this Helps!

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