I'm working image gallery page Sitecore MVC platform. The razor page I'm working on have should display first 8 image only on default. When user click the load more button. It'll display all images.
The first 8 image would be stack and it should be in columns of 4. The rest of the images should be 4 across and expand downwards when the Load More button is clicked
I decided to use 2 Divs and JavaScript to achieve the Load More function. E.g One div is show 8 and the other to show all.
The first 8 is showing with the correct styling but when I hide and show the other div with exact same style its not being render correctly. Instead of 4 columns they are all stack into 1.
Please help.....
@{
//to handle id must start with letter compatibility. HTML5 removed this restriction tho
var minimisedDivId = ENU.SitecoreHelper.Resources.HTMLHelpers.EnsureGuidStartsWithLetter(Guid.NewGuid());
var loadMoreDivId = ENU.SitecoreHelper.Resources.HTMLHelpers.EnsureGuidStartsWithLetter(Guid.NewGuid());
}
<head>
<script>
function toggleDiv() {
var minimised = document.getElementById("@minimisedDivId");
var loadMore = document.getElementById("@loadMoreDivId");
if (minimised.style.display === "none") {
minimised.style.display = "block";
loadMore.style.display = "none";
} else {
minimised.style.display = "none";
loadMore.style.display = "block";
}
}
</script>
<style>
.imagegallery-container {
margin: 0px;
padding: 0px;
position: relative;
text-align: center;
}
.imagegallery-area {
margin: 0px;
padding: 0px;
}
.imagegallery {
margin: 0px;
padding: 0px;
}
.image-area {
/* margin: 0px;
padding: 0px;*/
}
.thumbnail {
margin: 0px;
padding: 0px;
}
.imageText {
position: relative;
bottom: 10%;
left: 50%;
transform: translate(-50%, -50%);
}
.loadMore {
margin: 0 auto; /*center*/
}
</style>
</head>
<div class="row imagegallery-container">
<div class="col"> </div>
<!-- TODO: Load first 8 -->
<div class="imagegallery-area row col-8" id="@minimisedDivId">
@if (Model.IsInEditMode)
{
foreach (var item in Model.Children.ToList().Select((value, index) => new { value, index }))
{
<span class="col-3 editor">
@Html.Glass().Editable(item.value, x => x.Thumbnail)
</span>
}
}
@if (Model.Children.Any())
{
<!-- TODO: I need to take the first 8 of and display them-->
foreach (var item in Model.Children.ToList().Take(8).Select((value, index) => new { value, index }))
{
<a class="col-3 thumbnail" data-toggle="modal" data-target="#carouselModal" style="border:2px red">
@*<img src="@item.value.ThumbnailUrl" />*@
@Html.Glass().RenderImage(item.value, x => x.Thumbnail, new { w = 200, h = 200, mw = 200, mh = 200 }, isEditable: true)
<div class="imageText">@Html.Glass().Editable(item.value, x => x.Text)</div>
</a>
}
}
<div class="loadMore">
<button onclick="toggleDiv()">LOAD MORE</button>
</div>
</div>
<!-- TODO: Load all -->
<div class="imagegallery-area row col-8" id="@loadMoreDivId" style="display:none;">
@if (Model.IsInEditMode)
{
foreach (var item in Model.Children.ToList().Select((value, index) => new { value, index }))
{
<span class="col-3 editor">
@Html.Glass().Editable(item.value, x => x.Thumbnail)
</span>
}
}
@if (Model.Children.Any())
{
// Display max of 8 items, 4 across and stacking to 2
foreach (var item in Model.Children.ToList().Select((value, index) => new { value, index }))
{
//Carousel should have a closed button,top right. Image number buttom right e.g 1 of 8
<a class="col-3 thumbnail" data-toggle="modal" data-target="#carouselModal" style="border:2px red">
<img src="@item.value.ThumbnailUrl" />
@Html.Glass().RenderImage(item.value, x => x.Thumbnail, new { w = 200, h = 200, mw = 200, mh = 200 }, isEditable: true)
<div class="imageText">@Html.Glass().Editable(item.value, x => x.Text)</div>
</a>
}
}
<div class="loadMore">
<button >Collapsed</button>
</div>
</div>
<!-- TODO: I would then display all the elements if LOAD MORE is clicked -->
<!-- LOAD MORE-->
<!-- This would show all the rows-->
<!-- Modal -->
<div class="modal fade" id="carouselModal" tabindex="-1" role="dialog" aria-labelledby="carouselModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselControls" data-slide-to="0" class="active"></li>
<li data-target="#carouselControls" data-slide-to="1"></li>
<li data-target="#carouselControls" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
@if (Model.Children.Any())
{
//get the first imageItem for "active" class
<div class="carousel-item active">
<img class="d-block w-100" src="@Model.Children.ToList().First().ImageUrl" alt="@Model.Children.ToList().First().Title" />
<div class="imageText">@Model.Children.ToList().First().Text)</div>
</div>
Model.Children.ToList().Skip(1);
//The carry on the rest in the look with no active
foreach (var item in Model.Children.ToList().Select((value, index) => new { value, index }))
{
<div class="carousel-item">
<img class="d-block w-100" src="@item.value.ImageUrl" alt="@item.value.Title" />
<div class="imageText">@Html.Glass().Editable(item.value, x => x.Text)</div>
</div>
}
}
</div>
<a class="carousel-control-prev" href="#carouselControls" 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="#carouselControls" 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 class="modal-footer">
x of x
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col"> </div>
</div>
Try editing this row (in both locations): div class="imagegallery-area row col-8"
And move row into its own div: div class="imagegallery-area col-8" div class="row">
A div should be a row or a col, not both.