Question

我有一个我正在处理的网站但是我正在处理一些照片库，但有一些问题。

问题是大约有30张图片，我不希望有30块代码输入图像。我想缩放它，所以当我有每张约100张照片的相册时，我可以放手。

我想用Javascript和JQuery插件来做这件事。我怎么能这样做？

以下是代码：

<div id="main">
            <h1>Suicide Run 2008</h1>
            <div class="panel">
                <ul id="images">
                    <li><a href="images/gallery/2008suiciderun/srun1.jpg"><img src="images/gallery/2008suiciderun/thumbs/srun_t1.jpg" title="" /></a></li>
                </ul>
                <div id="controls"></div>
                <div class="clear"></div>
            </div>
            <div id="exposure"></div>           
            <div class="clear"></div>
            <div id="slideshow"></div>      
</div>

有没有办法可以编写一些Javascript让它生成一个代码块（从开头的UL标签到最终的UL标签），将其填入我文件夹中的每张图片？

换句话说，如果我在Java中这样做，我可以这样做：

for(int i = 0; i < amountOfPictures; i++)
{
System.out.println("<a href="images/gallery/2008suiciderun/srun"+i+".jpg">");
} etc...

但我如何在Javascript中完成？

非常感谢！我确定我的解释很糟糕。

Answer 1

在服务器端，您需要收集图像的所有URL。然后我会使用任何模板引擎来遍历这些URL。但是，如果你必须使用jQuery，那么你可以尝试jQuery的template plugin。

Answer 2

您也可以这样做：

$('<div id="main"></div>')
    .append($('<h1></h1>').text(titleVariable))  
    .append($('<div class="panel"></div>'))  
    .appendTo('body');

这不是全部，但它会起作用。我建议为初始加载生成代码服务器端，然后如果你通过ajax或其他东西加载更多，你可以这样做。

虽然生成所有HTML服务器端可能会更快。

Answer 3

在javascript中有更优雅的方法可以做到这一点，但这是等效的代码。

<div id="main">
  <h1>Suicide Run 2008</h1>
  <div class="panel">
      <ul id="images">
        <script type="text/javascript">
        var numPictures = 100; // You'll need to set this yourself.
        for (var i=0, l=numPictures; i < l; i++) {
          document.write('<li><a href="images/gallery/2008suiciderun/srun' + i + '.jpg"><img src="images/gallery/2008suiciderun/thumbs/srun_t' + i + '.jpg" title="" /></a></li>');
        }
        </script>
      </ul>
      <div id="controls"></div>
      <div class="clear"></div>
  </div>
  <div id="exposure"></div>           
  <div class="clear"></div>
  <div id="slideshow"></div>      
</div>

使用jQuery的一个稍微更干净的版本，如最初要求的那样：

<script type="text/javascript">
window.onload = function() {
  var numPictures = 100; // You'll need to set this yourself.
  var pathPrefix = 'images/gallery/2008suiciderun/srun';
  var thumbPrefix = 'images/gallery/2008suiciderun/thumbs/srun_t';
  var container = $('#images');
  for (var i=0, l=numPictures; i < l; i++) {
    var li = $('<li>');
    var img = $('<img>').attr('src', thumbPrefix + i + '.jpg');
    var link = $('<a>').attr('href', pathPrefix + i + '.jpg');
    link.append(img);
    li.append(link);
    container.append(li);
  }
}
</script>

<div id="main">
  <h1>Suicide Run 2008</h1>
  <div class="panel">
      <ul id="images">
      </ul>
      <div id="controls"></div>
      <div class="clear"></div>
  </div>
  <div id="exposure"></div>           
  <div class="clear"></div>
  <div id="slideshow"></div>      
</div>

当然，正如其他几个人所指出的那样，如果您可以使用服务器端脚本，则不必依赖文件名约定或确切知道有多少图像，因为您可以直接访问文件系统。

Answer 4

实际上，javascript是一个不正确的解决方案。

您已经需要知道服务器级别的每个文件夹中有多少图像，这意味着某种服务器可执行代码（PHP，Java，.Net，等等）。

您应该动态编写页面（如此PHP示例）：

...
<ul id="images">
  <?php 
   $files = glob($folderspec.'*.php');
   for ($ii=0; $ii = count($files); $ii++)
   {
     echo '<li><a href="images/gallery/'.$folderspec.'/srun'.$ii.'.jpg" ...[ etc ]
   }
 ?>
</ul>
...

这对于客户端，自动抓取工具（谷歌）以及其他所有内容都更好。虽然它可以使用上面的许多解决方案以Javascript的形式完成，但通常不应该这样做。

如何使用Javascript和JQuery扩展此HTML

4 个答案: