Reply To: Add Photo Gallery to Modal

[Support]

Hello,

You are copy/pasting the html code from developer tools, that’s a wrong way. You should copy the source code instead.

Also include this owl carousel image gallery inside a modal requires some customization. Please follow the instructions below:

1) First use this HTML for modal and image gallery:

<button class="btn btn-modern btn-primary" data-toggle="modal" data-target="#defaultModal">
	Launch Default Modal
</button>

<div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="defaultModalLabel">Default Modal Title</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			</div>
			<div class="modal-body">
				<div class="thumb-gallery-wrapper overflow-hidden opacity-0" data-thumbs-items="4" data-thumbs-center="true" style="height: 600px;">
					<div class="thumb-gallery-detail owl-carousel owl-theme owl-hidden manual nav-inside nav-style-1 nav-dark mb-3">

						<div>
							<img src="img/projects/project.jpg" class="img-fluid" alt="Presentation">
						</div>

						<div>
							<img src="img/projects/project-1.jpg" class="img-fluid" alt="Porto Watch">
						</div>

						<div>
							<img src="img/projects/project-2.jpg" class="img-fluid" alt="Identity">
						</div>

						<div>
							<img src="img/projects/project-27.jpg" class="img-fluid" alt="Porto Screens">
						</div>

						<div>
							<img src="img/projects/project-4.jpg" class="img-fluid" alt="Three Bottles">
						</div>

						<div>
							<img src="img/projects/project-5.jpg" class="img-fluid" alt="Company T-Shirt">
						</div>

						<div>
							<img src="img/projects/project-6.jpg" class="img-fluid" alt="Mobile Mockup">
						</div>

					</div>
					<div class="thumb-gallery-thumbs owl-carousel owl-theme owl-hidden manual thumb-gallery-thumbs">

						<div>
							<span class="d-block cur-pointer">
								<img alt="Presentation" src="img/projects/project.jpg" class="img-fluid">
							</span>
						</div>

						<div>
							<span class="d-block cur-pointer">
								<img alt="Porto Watch" src="img/projects/project-1.jpg" class="img-fluid">
							</span>
						</div>

						<div>
							<span class="d-block cur-pointer">
								<img alt="Identity" src="img/projects/project-2.jpg" class="img-fluid">
							</span>
						</div>

						<div>
							<span class="d-block cur-pointer">
								<img alt="Porto Screens" src="img/projects/project-27.jpg" class="img-fluid">
							</span>
						</div>

						<div>
							<span class="d-block cur-pointer">
								<img alt="Three Bottles" src="img/projects/project-4.jpg" class="img-fluid">
							</span>
						</div>

						<div>
							<span class="d-block cur-pointer">
								<img alt="Company T-Shirt" src="img/projects/project-5.jpg" class="img-fluid">
							</span>
						</div>

						<div>
							<span class="d-block cur-pointer">
								<img alt="Mobile Mockup" src="img/projects/project-6.jpg" class="img-fluid">
							</span>
						</div>

					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

2) Add this code below at (js/custom.js):

$('#defaultModal').on('shown.bs.modal', function () {
	setTimeout(function(){
		$('#defaultModal .thumb-gallery-wrapper').css('height', '');

		setTimeout(function(){
			$('#defaultModal .thumb-gallery-wrapper').removeClass('opacity-0');
		}, 300);
	}, 500);
});

* This will prevent some flickering issues on first open of modal.

3) Add this script below on footer of page:

<!-- Examples -->
<script src="js/examples/examples.gallery.js"></script>

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---