的fancybox显示图片

Question

的特定文件夹我有图像的文件夹8每个文件夹命名为不同的，并且每个文件夹中的图像被命名为从其他文件夹不同。

实施例：

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

我想页面上使用的图像为每个文件夹可激活图像库中进行链接，每个文件夹中，与页面上的每个图像对应，而不必这样做。

<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> 

的JScript

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

CSS

.hidden { 
    display: none; 
} 

而不是列出所有的图像在html ...
是否有针对刚通过名字图像的方式而不是扩展名（.jpg）？

Answer 1

使用jQuery，您可以使用document.createElement("a")与$(var).prop()组合来分配财产标签，如src和alt

所有你neeed是做一个循环或东西，通过所有的字母，然后所有的数字回路，并将其组合在一起转换为我在下面的代码片段中创建的函数。

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

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); 
 
    } 
 
}

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

 
</div>