0

私はこのフォーマットのいくつかのhtmlを持っています：

<div id="logos" class="downloadlist">
    <ul>
        <li><a href="/toolkit/logos/download.jpg" data-image="images/toolkit/logos/one.jpg">First Logo</a></li>
        <li><a href="/toolkit/logos/download.jpg" data-image="images/toolkit/logos/two.jpg">Second Logo</a></li>
        <li><a href="/toolkit/logos/download.jpg" data-image="images/toolkit/logos/three.jpg">Third Logo</a></li>
    </ul>
</div>

私はそれをステップスルーして、このようにFancyboxに提供したいと思います。

私はこれまで持っていますが、それはまっすぐに機能していません：

downloadList = $('#logos ul li a');

var downloadArray = {};

downloadJSON = '';

$.each(downloadList, function(d)
{
    var download = $(this);
    var href = download.data('image');
    var title = download[0].innerText;
    var link = download[0].href;

    downloadArray[d] = {};
    downloadArray[d].href = href;
    downloadArray[d].title = "<a href=\'" + link + "\'>"+title+"</a>";

    downloadJSON += JSON.stringify(downloadArray[d])+',';
});

downloadJSON = downloadJSON.slice(0, -1);

$.fancybox.open([downloadArray]);

downloadJSONは私に：

{"href":"images/toolkit/logos/one.jpg","title":"<a href='http://example.com/toolkit/logos/download.jpg'>First Logo</a>"},{"href":"images/toolkit/logos/two.jpg","title":"<a href='http://example.com/toolkit/logos/download.jpg'>Second Logo</a>"},{"href":"images/toolkit/logos/three.jpg","title":"<a href='http://example.com/toolkit/logos/download.jpg'>Third Logo</a>"}

JSON.stringify-downloadArrayオブジェクトを実行すると次のようになります。

{"0":{"href":"images/toolkit/logos/one.jpg","title":"<a href='http://example.com/toolkit/logos/download.jpg'>First Logo</a>"},"1":{"href":"images/toolkit/logos/two.jpg","title":"<a href='http://example.com/toolkit/logos/download.jpg'>Second Logo</a>"},"2":{"href":"images/toolkit/logos/three.jpg","title":"<a href='http://example.com/toolkit/logos/download.jpg'>Third Logo</a>"}}

どんな助けでもいただければ幸いです。

4

2 に答える 2

2 
links = [];
$('#logos ul li a').each(function() {
   links.push({
      href: $(this).attr('data-image'),
      title: "<a href=\'" + $(this).attr('href') + "\'>"+$(this).html()+"</a>"
   });
});
//JSON.stringify(links);
$.fancybox.open(links);
于 2013-01-14T18:08:33.760 に答える
1

@エイドリアンの答えに基づく私の拡張された答え：

選択したリンクに従って適切なロゴをダウンロード（fancyboxに表示）するためindexに、次の微調整された拡張コードのように APIオプションを使用します。

links = [];
$('#logos ul li a').each(function (indx) {
  // Adrain's code tweaked
  links.push({
    href: $(this).data('image'),
    title: "<a href=\'" + $(this).data('image') + "\'>" + $(this).html() + "</a>"
  });
  // extended to catch click on links
  $(this).on("click", function (e) {
    e.preventDefault();
    $.fancybox.open(links, {
      index: indx // starts gallery with index of the clicked link
    });
  });
});
//JSON.stringify(links);
//$.fancybox.open(links); // would open fancybox on page load

JSFIDDLEを参照してください

于 2013-01-15T00:18:31.250 に答える