I am trying to create a carousel using cms:masterpage and not repeatable templates.
I successfully got my masonry and lightbox to display the images and line up neatly, but I can't get the carousel to work.
It works fine with static images. I want to use the masterpage method because I don't want to have to upload my images in two places and I already use the masterpage method elsewhere on the site.
The images just stack vertically instead of rotating. I'm not sure if I placed the masterpage and /page tags correctly, or if it just can't be done.
and here is the code
I successfully got my masonry and lightbox to display the images and line up neatly, but I can't get the carousel to work.
It works fine with static images. I want to use the masterpage method because I don't want to have to upload my images in two places and I already use the masterpage method elsewhere on the site.
The images just stack vertically instead of rotating. I'm not sure if I placed the masterpage and /page tags correctly, or if it just can't be done.
and here is the code
- Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap-grid.css" rel="stylesheet">
<style>
.container {
padding: 10px;
margin: 0 auto;
}
.block {
display: inline-block;
width: 200px;
margin: 10px;
}
img {
width: 200px;
}
.mfp-close { cursor: pointer!important; }
</style>
</head>
<body>
<div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol><cms:pages masterpage='test.php' limit='3'>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="<cms:show carousel />">
</div></cms:pages>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div>
<div class="container popup-gallery"><cms:pages masterpage='test.php'>
<a href="<cms:show image />" title="<cms:show k_page_title />" class="block"><img src="<cms:show thumb />"></a>
</cms:pages>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.1/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.bundle.js"></script>
<script>
$(window).on('load', function(){
$ ('div.container').masonry({
columnWidth: 'a.block',
itemSelector: 'a.block',
fitWidth: true
});
});
</script>
<script>
$(document).ready(function() {
$('.popup-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 Katie Cirone Spagnuolo</small>';
}
}
});
});
</script>
</body>
</html>