I'm trying to get js to dynamically generate a thumbnail gallery with titles & descriptions into the divs of this question I asked earlier.
I thought list.js might work best, as it will give me sort and pagination. I used their starter script to try and get my variables into the right divs, but I keep running into problems, especially with outputting an img src.
I want to use the alias as a filename to automatically locate the thumbnail in the correct path- for example, for the alias alias1, the img src would be img/thumb/alias1.jpg. How can I get the javascript to generate this path based on alias and insert it and my other variables into the correct divs?
Here's the code I have. Any ideas on how to make this work, or a better solution?
var options = {
valueNames: [ 'title', 'alias', 'description', 'url', 'image' ],
item: '<li><div class="hvrbox"><div class="hvrbox-title"><h5 class="title"></h3></div><div class="hvrbox-layer_bottom"><img id="image"><div class="hvrbox-layer_top hvrbox-layer_slideup"><a href class="url"><div class="hvrbox-text"><p class="description"></p></div><i class="fa fa-angle-double-right"></i></a></div></div></li>' };
var values = [
{ title:'Title 1', alias:'alias1', description:'Description of collection 1.', url:'#', },
{ title:'Title 2', alias:'alias2', description:'Description of collection 2.', url:'#', },
{ title:'Title 3', alias:'alias3', description:'Description of collection 3.', url:'#', }
];
var image = document.getElementById("image");
var root = 'img/thumb/';
var x = 'alias';
var y= '.jpg';
image.src = root + x + y;
var collectionList = new List('collection-list', options, values);.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline;
overflow: hidden;
height: auto;
width: 100%;
}
.hvrbox-title {
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
margin: 0;
top: 0;
min-width: 100%;
height: auto;
min-height: 12%;
padding-top: 1.5%;
padding-left: 1.5%;
padding-right: 1.5%;
text-align: center;
}
.hvrbox i {
position: absolute;
bottom:2%;
right:3%;
font-size: 3em;
color:#E6AA3C;
}
.hvrbox img {
width: 100%;
}
.hvrbox-text a {
text-decoration: none;
color: #ffffff;
font-weight: 700;
padding: 5px;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
width: 75%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179);
/* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.hvrbox .hvrbox-layer_slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="collection-list">
<ul class="list"></ul>
</div>
</div>