Lightbox in ajax content page

[ibabic]

Hi,

I’am trying to put lightbox into portfolio-ajax-project.html.

From my main page Im calling ajax content with code below. Ajax content loads properly, lightbox is shown and CSS is working, but when I click on item it does not open it as pop-up, instead it opens it directly in browser. Lightbox works properly when I put in main html page, but when is in Ajax this is happing. Please advise how to put lightbox in ajax content?

<div class="portfolio-item">
	<a href="#">
		<span class="thumb-info thumb-info-lighten border-radius-0">
			<span class="thumb-info-wrapper border-radius-0">
				<img src="img/projects/project.jpg"
					class="img-fluid border-radius-0" alt="">
				<span class="thumb-info-title">
					<span class="thumb-info-inner"></span>
					<span class="thumb-info-type">Kitchen</span>
				</span>
				<span class="thumb-info-action">
					<span class="thumb-info-action-icon bg-dark opacity-8"><i
							class="fas fa-plus"></i></span>
				</span>
			</span>
		</span>
	</a>
</div>

---

• This topic was modified 1 year, 2 months ago by Support.
• This topic was modified 1 year, 2 months ago by Support.

Template Version: 12.0

[Support]

Hello, thanks for your purchase.

Sorry but I could not understand the question very well, is it related to this page? https://www.okler.net/previews/porto/12.1.0/portfolio-ajax-modal.html

If so, please note that the JS file is required: /js/examples/examples.portfolio.js – In that file you will find this part “Ajax on Modal”, that JS must be called to make the lightbox to work. It will make the link with the attribute “data-ajax-on-modal” to be as lightbox.

---

[ibabic]

Hi,
Thanks for quick answer.
It is related to page https://www.okler.net/previews/porto/12.1.0/portfolio-ajax-page.html

From that page it is dynamically loaded portfolio-ajax-project-1.html

Problem is if I put this code in portfolio-ajax-project-1.html
<div class=”lightbox”
data-plugin-options=”{‘delegate’: ‘a’, ‘type’: ‘image’, ‘gallery’: {‘enabled’: true}, ‘mainClass’: ‘mfp-with-zoom’, ‘zoom’: {‘enabled’: true, ‘duration’: 300}}”>
<a class=”d-inline-block img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon mb-1 me-1″
href=”img/portfolio/kitchen-1-1.png”>
<img class=”img-fluid” src=”img/portfolio/kitchen-thumb-1-1.png” alt=”Project Image” width=”110″
height=”110″>

<a class=”d-inline-block img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon mb-1 me-1″
href=”img/portfolio/kitchen-1-2.png”>
<img class=”img-fluid” src=”img/portfolio/kitchen-thumb-1-2.png” alt=”Project Image” width=”110″
height=”110″>

<a class=”d-inline-block img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon mb-1 me-1″
href=”img/portfolio/kitchen-1-3.png”>
<img class=”img-fluid” src=”img/portfolio/kitchen-thumb-1-3.png” alt=”Project Image” width=”110″
height=”110″>

</div>

It will show thumbnails, but when I click on it it opens image directly in browser. However if I put this div in page that is not ajax loaded it works perfectly, it seems that something extra I need to put on ajax page?

Br,
Ivan

---

[Support]

Hello,

That’s because you need to restart the lightbox function after ajax completed.

Add this in that file ( /js/examples/examples.portfolio.js ):

// Lightbox
if ($.isFunction($.fn['themePluginLightbox']) && ( $('[data-plugin-lightbox]').length || $('.lightbox').length )) {
	theme.fn.execOnceTroughEvent( '[data-plugin-lightbox]:not(.manual), .lightbox:not(.manual)', 'mouseover.trigger.lightbox', function(){
		const $this = $(this);
		let opts;

		const pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
		if (pluginOptions)
			opts = pluginOptions;

		$this.themePluginLightbox(opts);
	});
}

---

[ibabic]

It is working.
Thank you very much!

---

[Author]

Posts