Question

我正在尝试让js动态生成带有标题和放大器的缩略图库。对this question I asked earlier的div的描述。

我认为list.js可能效果最好，因为它会给我分类和分页。我使用他们的启动脚本尝试将我的变量放入正确的div中，但我一直遇到问题，尤其是在输出img src时。

我想使用别名作为文件名来自动在正确的路径中找到缩略图 - 例如，对于别名alias1，img src将是img / thumb / alias1.jpg。如何让javascript根据别名生成此路径并将其和其他变量插入到正确的div中？

这是我的代码。关于如何使这项工作或更好的解决方案的任何想法？

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>

Answer 1

我不完全确定，因为我无法看到文件结构，但假设js文件位于项目的根目录（图像文件夹所在的文件夹中），您将需要追加./在根变量中定义的文件路径的开头。

我希望这是有道理的

使用js变量作为img src

1 个答案: