Porto – HTML5 Old & New

[monneyman]

Hi There,

I previously bought your Porto – Responsive HTML5 Template, but I can see that you have added updated features to the template (including the lightbox gallery, which has been a major answer to my prayers) and have downloaded that version.

I just wanted to find out.. does this mean now that I will now have to restart the modifications I have made on the previous to the updated template? or can I just copy and paste my modifications over to the updated template I have just downloaded.

The reason I ask is that when I tried to copy and paste the html code for the lightbox portfolio page onto my existing template, the lightbox feature did not work.

The updated template seems to have some features which I have been struggling to do by myself and would like to use some of these features, but I started working on the original template I downloaded last year and I’m hoping I don’t have to start all over again on the new template.

My knowledge of coding is a bit limited, so any help you could provide would be majorly appreciated.

---

[Support]

Hello, can you please confirm which version you used on your website?

If it’s not too old you can try this:

<ul class="portfolio-list sort-destination" data-sort-id="portfolio" id="lightbox-gallery">
	<li class="col-md-3 isotope-item websites">
		<div class="portfolio-item img-thumbnail">
			<a href="img/projects/project.jpg" class="thumb-info">
				<img alt="" class="img-responsive" src="img/projects/project.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 brands">
		<div class="portfolio-item img-thumbnail">
			<a href="img/projects/project.jpg" class="thumb-info">
				<img alt="" class="img-responsive" src="img/projects/project-1.jpg">
				<span class="thumb-info-title">
					<span class="thumb-info-inner">Okler</span>
					<span class="thumb-info-type">Brand</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 logos">
		<div class="portfolio-item img-thumbnail">
			<a href="img/projects/project.jpg" class="thumb-info">
				<img alt="" class="img-responsive" src="img/projects/project-2.jpg">
				<span class="thumb-info-title">
					<span class="thumb-info-inner">The Fly</span>
					<span class="thumb-info-type">Logo</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>
</ul>

(js/custom.js)

$(document).ready(function() {
	$('#lightbox-gallery').magnificPopup({
		delegate: 'a',
		type: 'image',
		tLoading: 'Loading image #%curr%...',
		mainClass: 'mfp-img-mobile',
		gallery: {
			enabled: true,
			navigateByImgClick: true,
			preload: [0,1] // Will preload 0 - before current, and 1 after the current image
		},
		image: {
			tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
			titleSrc: function(item) {
				return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
			}
		}
	});
});

Make sure the magnificPopup script is add in the HTML file;

Let me know if you have any questions.

Kind Regards, Jonas

---

[Author]

Posts