Make a Gallery

[chokochokorito]

Hi, I´m trying to do a Gallery, that when I click on One single Image displays the Images within, using the owl-carousel and Lightbox. An example of this http://www.clubcasablanca.com.mx/Galeria_Atizapan.html#!prettyPhoto

Thanks a lot for your support

---

[Support]

Hello, sure, you can do that, here’s what you can do:

HTML:

<ul class="nav nav-pills sort-source" data-sort-id="portfolio" data-option-key="filter">
	<li data-option-value="*" class="active"><a href="#">Show All</a></li>
	<li data-option-value=".websites"><a href="#">Websites</a></li>
	<li data-option-value=".logos"><a href="#">Logos</a></li>
	<li data-option-value=".brands"><a href="#">Brands</a></li>
</ul>

<hr />

<div class="row">

	<ul class="portfolio-list sort-destination" data-sort-id="portfolio">
		<li class="col-md-3 col-sm-6 col-xs-12 isotope-item websites">
			<div class="portfolio-item img-thumbnail">
				<a href="#" class="thumb-info" id="openGallery1">
					<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" class="thumb-info-action-icon"><i class="fa fa-link"></i></span>
					</span>
				</a>
			</div>
		</li>
		<li class="col-md-3 col-sm-6 col-xs-12 isotope-item brands">
			<div class="portfolio-item img-thumbnail">
				<a href="#" class="thumb-info" id="openGallery2">
					<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" class="thumb-info-action-icon"><i class="fa fa-link"></i></span>
					</span>
				</a>
			</div>
		</li>
	</ul>
</div>

JS (js/custom.js):

$('#openGallery1').magnificPopup({
    items: [{
        src: 'http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg',
        title: 'Image 1'
    },{
        src: 'http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg',
        title: 'Image 2'
    },{
        src: 'http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg',
        title: 'Image 3'
    }],
    gallery: {
        enabled: true
    },
    type: 'image'
});

$('#openGallery2').magnificPopup({
    items: [{
        src: 'http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg',
        title: 'Image 2'
    },{
        src: 'http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg',
        title: 'Image 3'
    }],
    gallery: {
        enabled: true
    },
    type: 'image'
});

Please note that each link must have a different ID, openGallery1, openGallery2, …

Let me know if you have any questions.

Thanks.

---

[Author]

Posts