Lightbox within portfolio

[Ric Anthony]

Hi,
On my portfolio page which i have provided the link to above, I am trying to make a thumbnail image open up in a lightbox with the larger version of the image and title text (instead of, or as well as opening up the product detail page). I cannot get this to work.
Can you let me know how to do this please.

Thank you!
Ric

---

[Support]

This reply has been marked as private.

[Ric Anthony]

Hi Jonas…
Thank you!
– However, even though i only applied that code to one thumbnail image (the first photo of the table, on this page : http://www.boutiquelautonome.com/tempsite/prod_fauteil.html) , it seems to make all the thumbnails open in a lightbox, which may not be a bad thing anyway. But is it supposed to just apply to one image at a time or is it supposed to apply to all images on that page?
– Also, is it possible to have text at the bottom of the image… a description of the product or title of the product?
– And, is it possible to have a smoother opening of the lightbox, like we see in the shortcodes page … on the “modal” option?

I appreciate your help!
Ric

---

[Support]

Hello, OK, great, so you need to set the lightbox only in the item itself, like this:

<ul class="portfolio-list sort-destination" data-sort-id="portfolio">
	<li class="col-md-3 isotope-item acc_cac">
		<div class="portfolio-item img-thumbnail">
			<a href="link-to-image.jpg" class="thumb-info lightbox" data-plugin-options='{"type":"image"}'>
				<img alt="" class="img-responsive" src="photos_forms/photos/Chambre_a_coucher/accessoires_chambre_a_coucher/Galeo photo.jpg">
				<span class="thumb-info-title">
					<span class="thumb-info-inner">SEO</span>
					<span class="thumb-info-type">Website</span>
				</span>
				<span class="thumb-info-action">
					<span title="Universal" href="#" class="thumb-info-action-icon"><i class="icon icon-link"></i></span>
				</span>
			</a>
		</div>
	</li>
	<li class="col-md-3 isotope-item acc_cac">
		<div class="portfolio-item img-thumbnail">
			<a href="link.html" class="thumb-info">
				<img alt="" class="img-responsive" src="photos_forms/photos/Chambre_a_coucher/accessoires_chambre_a_coucher/Galeo photo.jpg">
				<span class="thumb-info-title">
					<span class="thumb-info-inner">SEO</span>
					<span class="thumb-info-type">Website</span>
				</span>
				<span class="thumb-info-action">
					<span title="Universal" href="#" class="thumb-info-action-icon"><i class="icon icon-link"></i></span>
				</span>
			</a>
		</div>
	</li>
	...

1) You can create a custom style for a paragraph with the description (into the portfolio-item div):

<p class="product-desc">Description here...</p>

Than customize it via CSS.

2) Unfortunately not, the modal works in a different way (not for images like the lightbox)

Kind Regards.

---

[Author]

Posts