So I have been working on this website for some time now and had just finished making an image gallery with a modal. Now I am working on a video gallery with modal, as well as an iframe gallery with a modal. I am using shortcodes to make it easier to embed youtube and vimeo videos onto the website. For the video gallery, I wish to have a custom image for the thumbnails, then when it is clicked I want it to open a modal up to the video. But so far, when I try to do a clonable or a repeatable page, to make a gallery, I get a problem that it replaces the shortcode with the images code. As the code stands down below, it can have one image and one embedded video, and run fine, besides the video continuing to play after the modal is closed.
Html
JS
It would be much appreciated if I could get some pointers sooner rather than later. Thank you, and I apologize for the messy coding.
Html
- Code: Select all
?php require_once( '../couch/cms.php' ); ?>
<cms:template title='Film Gallery'>
<cms:editable
name='film_poster'
label='Poster'
desc="Place Film Posters Here"
show_preview='1'
width='500'
type='image'
/>
<cms:editable
name='film_content'
label='Films'
desc="Place Video Url's Here"
type='textarea'
no_xss_check='1'
/>
</cms:template>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href='../../css/style.css'>
<script src="/js/jquery-3.3.1.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/modal_02.js"></script>
</head>
<body class="film-bg">
<nav>
<div id="navbar">
<ul>
<li>
<a class="uno" href="../../index.php">Home</a>
</li>
<li class="dropdown">
<a class="dropbtn" href="../../works.php">Work</a>
<div class="dropdown-content">
<a href="../../works/3d.php">3D</a>
<a href="../../works/animation.php">Animation</a>
<a href="../../works/art.php">Art</a>
<a href="../../work0s/film.php">Film</a>
</div>
</li>
<li>
<a class="tres" href="../../news.php">News</a>
</li>
<li>
<a class="quatro" href="../../contact.php">Contact</a>
</li>
</ul>
</div>
</nav>
<div id="container">
<div class="film-content">
<cms:pages masterpage='works/film.php'
paginate='1'
limit='8'
>
<a href="#" class="film-pop">
<img class="img-size" src="<cms:show film_poster />" >
<div class="hr clearfix"> </div>
</a>
<div class="hr clearfix"> </div>
<cms:paginator id="page"/>
</cms:pages>
</div>
<footer class="clrfix">
<p class="wrap">##########</p>
</footer>
</div>
<div class="modal fade" id="filmmodal" tabindex="-1" role="dialog" hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<cms:do_shortcodes><span class="filmpreview"><cms:show film_content /></span></cms:do_shortcodes>
</div>
</div>
</div>
</div>
</body>
</html>
<?php COUCH::invoke(); ?>
JS
- Code: Select all
$(function () {
$('.film-pop').on('click', function () {
$('.filmpreview').attr('src',
$(this).find('img').attr('src'));
$('#filmmodal').modal('show');
});
});
It would be much appreciated if I could get some pointers sooner rather than later. Thank you, and I apologize for the messy coding.