javascript - FilmRoll 加载额外的

Question

我正在使用 straydogstudio 的 FilmRoll 在我的艺术协会网站上幻灯片绘画。绘画 URL 由加载到头文件中的数组组装而成，并写入 "film_roll"<div> 中的 html 中。 .
js代码为:
var SliderContent=""
for (var i=0; i<totalRows; i+=1)
SliderContent = SliderContent+'<div><a href="' + imagelist[i][painting] + '"><img src="' + imagelist[i][thumbnail] + '" border="1" height="150px"></img></a></div>';

FilmRoll 启动是:
$(document).ready(function () {
$(function() {
fr = new FilmRoll({
container: '#film_roll',
height: 150
})
})
})`

html 是:
...
<div id="film_roll">
<script>document.write(SliderContent);</script>
</div>
...

这会生成一排滑动的绘画缩略图但是它会在前面添加一个 <div>包含文本 document.write(SliderContent);并将其与图像一起滑动。该文本在图像的每个循环开始时重复。如果我注释掉 FilmRoll 启动代码，我会得到一列绘画缩略图(如预期，没有滑动)，但没有额外 <div> 中的文本，所以 FilmRoll 启动导致了问题，但我不知道它是如何做到的或如何停止它。有人有什么想法吗？
TIA。

Answer 1

我刚刚尝试了 FilmRoll，可能找到了一种解决方法 - 而不是

<div id="film_roll">
  <script>document.write(SliderContent);</script>
</div>

只需将空容器作为 html

<div id="film_roll">
</div>

并将您的代码更改为调整后的版本:

$(document).ready(function () {
  var imagelist = [ /* place your images here */ ];
  var SliderContent=""; 
  for (var i=0; i<imagelist.length; i+=1){
    SliderContent = SliderContent+'<div><a href="' + imagelist[i] + '">
                    <img src="' + imagelist[i] + '" border="1" height="150px">
                    </img></a></div>';
  }
  $("#film_roll").append(SliderContent);

  fr = new FilmRoll({
    container: '#film_roll',
    height: 150 });
}); 

“调整后的版本”的含义如下:显然，您的 imagelist包含 thumbnails 的图像/元素和paintings 。对于此示例，我仅在 Fiddle 中添加了一些虚拟图像。 (没有缩略图/绘画作为imagelist对象的一部分)所以你必须调整它。
因为我也不知道变量 totalRows在你的for ，循环，我刚刚将其替换为图像列表的长度(=此列表中的图像数量)。

由于我不知道是否有 FilmRoll 的在线资源，因此我将整个 filmroll.js 复制到 Fiddle 中，并将调整后的代码放在注释 /* your code here */ 下方的底部.

主要调整是没有<script>将 SliderContent 写入 div 内因为这显然会导致 FilmRoll 出现问题。相反，只需附加 SliderContent使用$("#film_roll").append(SliderContent); for之后循环附加 imagelist 中的图像到SliderContent然后初始化FilmRoll .