Question

我有8个图像文件夹，每个文件夹的名称不同，每个文件夹中的图像命名与其他文件夹不同。

示例：

名为A的文件夹里面的所有图像都被命名为A-1.jpg，A-2.jpg等等...... 名为B的下一个文件夹具有相同的命名（B-1.jpg等）。

我想在页面上使用每个文件夹的图像作为链接来激活图像库，在每个文件夹中，与页面上的每个图像对应而不必执行此操作。

SELECT some_other_column_other_than_EMAIL FROM table

的JScript

<a class="fancybox" href="fancybox/A/A-1.jpg">
    <img src="fancybox/A/A-1.jpg" alt=""/>
</a>

<div class="hidden">
    <a class="fancybox" href="fancybox/A/A-2.jpg">
        <img src="fancybox/A/A-2.jpg" alt=""/>
    </a>
    <a class="fancybox" href="fancybox/A/A-3.jpg">
        <img src="fancybox/A/A-3.jpg" alt=""/>
    </a>
</div>

CSS

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding : 0
    });

而不是必须列出html中的所有图像...
有没有办法按名称而不是扩展名（.jpg）定位图像？

Answer 1

使用jQuery，您可以使用document.createElement("a")与$(var).prop()相结合来分配属性标记，例如src和alt

你需要做的就是做一个循环或循环遍历所有字母然后所有数字的东西，并将它们组合成一个函数，就像我在下面的代码片段中创建的那样。

我假设你问如何制作一个画廊，即使问题目前只是询问它是否可能

＆＃13;

function create_image(imgLetter, imgNum) {

  var container = document.querySelector("#container"); // container
  var link = document.createElement("a"); // make a new a tag
  var img = document.createElement("img"); // make an img tag

  $(link).addClass("fancybox"); // add class to a tag

  /* create the string for the link HREF part by using "" and + with parameters from function*/
  $(link).prop("href", "fancybox/" + imgLetter + "/" + imgLetter + "-" + imgNum + ".jpg");  

  
  $(img).prop("src", $(link).prop("href")); // src="" part to match HREF
  $(img).prop("alt", "");

  $(img).appendTo(link); // add image to link
  $(link).appendTo(container);  // add link to container
}

var letters = ["A", "B", "C", "D", "E", "F", "G", "H"];

for (var L = 0; L < letters.length; L++) {
  var letter = letters[L];
  for (var i = 1; i < 9; i++) {
    create_image(letter, i);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

</div>

＆＃13;

fancybox显示特定的图像文件夹

1 个答案: