Add Photo Gallery to Modal

This topic has 5 replies, 2 voices, and was last updated 5 years, 9 months ago by Support. This post has been viewed 1313 times

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts

November 12, 2020 at 8:02 pm #10035062

Participant

Hi there,

i would like to add a photo gallery with full width inside modal. When i copy the code under elements-image-gallery (as per below) it doesnt show on the modal. i am not sure what i am doing wrong.
and if i increase the col-lg -4 to 12 it also has a strange behaviour as i would like to have a full width.

please advise.


<div class="col-lg-4 mx-auto">

                    <div class="thumb-gallery-wrapper">
                        <div class="thumb-gallery-detail owl-carousel owl-theme manual nav-inside nav-style-1 nav-dark mb-3 owl-loaded owl-drag">

                            <div class="owl-stage-outer owl-height" style="height: 350px;"><div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 2520px;"><div class="owl-item active" style="width: 350px; margin-right: 10px;"><div>
                                            <img src="img/projects/project.jpg" class="img-fluid" alt="Presentation">
                                        </div></div><div class="owl-item" style="width: 350px; margin-right: 10px;"><div>
                                            <img src="img/projects/project-1.jpg" class="img-fluid" alt="Porto Watch">
                                        </div></div><div class="owl-item" style="width: 350px; margin-right: 10px;"><div>
                                            <img src="img/projects/project-2.jpg" class="img-fluid" alt="Identity">
                                        </div></div><div class="owl-item" style="width: 350px; margin-right: 10px;"><div>
                                            <img src="img/projects/project-27.jpg" class="img-fluid" alt="Porto Screens">
                                        </div></div><div class="owl-item" style="width: 350px; margin-right: 10px;"><div>
                                            <img src="img/projects/project-4.jpg" class="img-fluid" alt="Three Bottles">
                                        </div></div><div class="owl-item" style="width: 350px; margin-right: 10px;"><div>
                                            <img src="img/projects/project-5.jpg" class="img-fluid" alt="Company T-Shirt">
                                        </div></div><div class="owl-item" style="width: 350px; margin-right: 10px;"><div>
                                            <img src="img/projects/project-6.jpg" class="img-fluid" alt="Mobile Mockup">
                                        </div></div></div></div><div class="owl-nav"><button type="button" role="presentation" class="owl-prev disabled"></button><button type="button" role="presentation" class="owl-next"></button></div><div class="owl-dots disabled"></div></div>
                        <div class="thumb-gallery-thumbs owl-carousel owl-theme manual thumb-gallery-thumbs owl-loaded owl-drag">

                            <div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 639px;"><div class="owl-item active selected" style="width: 76.25px; margin-right: 15px;"><div>
                                            <span class="d-block cur-pointer">
                                                <img alt="Presentation" src="img/projects/project.jpg" class="img-fluid">
                                            </span>
                                        </div></div><div class="owl-item active" style="width: 76.25px; margin-right: 15px;"><div>
                                            <span class="d-block cur-pointer">
                                                <img alt="Porto Watch" src="img/projects/project-1.jpg" class="img-fluid">
                                            </span>
                                        </div></div><div class="owl-item active" style="width: 76.25px; margin-right: 15px;"><div>
                                            <span class="d-block cur-pointer">
                                                <img alt="Identity" src="img/projects/project-2.jpg" class="img-fluid">
                                            </span>
                                        </div></div><div class="owl-item active" style="width: 76.25px; margin-right: 15px;"><div>
                                            <span class="d-block cur-pointer">
                                                <img alt="Porto Screens" src="img/projects/project-27.jpg" class="img-fluid">
                                            </span>
                                        </div></div><div class="owl-item" style="width: 76.25px; margin-right: 15px;"><div>
                                            <span class="d-block cur-pointer">
                                                <img alt="Three Bottles" src="img/projects/project-4.jpg" class="img-fluid">
                                            </span>
                                        </div></div><div class="owl-item" style="width: 76.25px; margin-right: 15px;"><div>
                                            <span class="d-block cur-pointer">
                                                <img alt="Company T-Shirt" src="img/projects/project-5.jpg" class="img-fluid">
                                            </span>
                                        </div></div><div class="owl-item" style="width: 76.25px; margin-right: 15px;"><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="owl-nav disabled"><button type="button" role="presentation" class="owl-prev"><span aria-label="Previous">‹</span></button><button type="button" role="presentation" class="owl-next"><span aria-label="Next">›</span></button></div><div class="owl-dots disabled"></div></div>
                    </div>

                </div>

Template Version: 8.0

November 13, 2020 at 12:14 am #10035063

Support

Keymaster

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

November 16, 2020 at 11:13 pm #10035082

Tsokotsa-mz

Participant

Hi, thank you for your reply. The proposed solution did not solve the issue. I did follow your instructions above however i still cant see the images on the modal.

November 17, 2020 at 12:06 am #10035086

Support

Keymaster

Hello,

Please send a online test link with your website to us. So we can inspect your code, do some tests and discover where’s the issue.

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

November 17, 2020 at 12:44 am #10035088

Tsokotsa-mz

Participant

This reply has been marked as private.

November 17, 2020 at 6:38 am #10035095

Support

Keymaster

Hello,

Thanks for the link!

The problem is the JS code of thumb gallery wrapper.

I sent to you the code of 8.1.0 version of Porto and now I saw you have the 8.0.0. We changed the code of thumb gallery wrapper in the latest update.

Please try changing all code of examples.gallery.js with this new below:
https://pastebin.com/raw/DKpRAxds

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

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

This topic is marked as "RESOLVED" and can not rceive new replies.

Support Center

My Account

Add Photo Gallery to Modal

Company

Support

Subscribe to Our Newsletter