Question

我正在使用一个可爱的Lightbox插件，每个图像需要以下代码

<a href="images/portfolio/full/1.jpg"
   data-target="flare"      
   data-flare-plugin="shutter"
   data-flare-scale="fit"   
   data-flare-gallery="portfolio"
   data-flare-thumb="images/portfolio/thumbs/1.jpg"
   data-flare-bw="images/portfolio/bw/1.jpg"
   class="kleur multiple">    
       <img src="images/portfolio/thumbs/1.jpg" width="375px" height="250px"   />    
</a>

我想和你们中的一些人一起编写一段Javascript / jQuery脚本，它可以编写上述代码的一些部分。

让我解释一下：

- full image (href),
- blackwhite version (data-flare-bw=""),
- lightbox thumb (data-flare-thumb="")
- and the page thumb (<img src=""/>)

都有一个共同点：文件名相同，只有路径不同。所以我想编写一个脚本，根据var自动编写这些代码行。不仅是SRC，还有属性本身，因此href=""，data-flare-bw=""，data-flare-thumb=""和<image src=""/>

由于我不是Jquery大师，我会尝试写下代码，我想有些会让你们知道应该发生什么：

$function(InsertAttributesAutomaticcly() {
    var filenames = $('#container a').attr('data-flare-title', this')

    $('#container a').each(function() {
        $(this).append('href', 'images/portfolio/full/' + 'filenames' + '.jpg');
        $(this).append('data-flare-bw', 'images/portfolio/blackwhite/' + 'filenames' + '.jpg');
        $(this).append('data-flare-thumb', 'images/portfolio/thumb/' + 'filenames' + '.jpg');
        $(this).html('<img src=" 'images/portfolio/thumb/' + 'filenames' + '.jpg'">');
    });
});

让我解释一下代码：它会在#container内搜索a，然后使用src / url / href图像位置向其附加href，data-flare-thumb，data-flare-bw标记，将是+ var（与data-flare-title=""相同）+ .jpg。插入这三个属性后，它会在<img>标记中插入a，其中src为<path> + var (as before) + '.jpg'

我很确定这并不难写，但遗憾的是，我不熟练创建一个有效的脚本。

谢谢你们！

奖金任务：那些成功编写上述代码的人，包括跟踪拇指大小（宽度+高度）的脚本，并写下旁边的代码，将获得我的啤酒！

Answer 1

请注意，您有这样的链接，例如：

<div id="container">
  <a href="#" data-flare-title="1.jpg"></a>
  <a href="#" data-flare-title="2.jpg"></a>
  <a href="#" data-flare-title="3.jpg"></a>
</div>

这是一种可行的方法：

$(function(){

  $('#container a').each(function(){

    var $link = $(this),
        title = $link.data('flare-title');

    $link.attr('href', 'images/portfolio/full/' + title);
    $link.attr('data-flare-bw', 'images/portfolio/blackwhite/' + title);
    $link.attr('data-flare-thumb', 'images/portfolio/thumbs/' + title);

    $link.append($('<img>', {
      src     : 'images/portfolio/thumbs/' + title,
      width   : '375px',
      height  : '250px'
    }));

  });

});

修改：see fiddle。

根据var创建JavaScript填充href

1 个答案: