最初の画像をTumblrフォトセットから引き出しますか？

Question

TumblrのPhotoset機能を使用してポートフォリオサイトを作成したい結婚式の写真家のテーマをデザインしています。

最初の画像をフォトセットからプルするにはどうすればよいですか？サムネイルのプレビューを1つずつ作成して、各セットにリンクするホームページを作成できますか？

おかげで、 Parri

Answer 1

Tumblrのマークアップ：

{block:Photoset} 
    <div class="photoset-wrap"> 
    {block:Photos} 
     <img src="{PhotoURL-500}" /> 
    {/block:Photos} 
    </div> 
{/block:Photoset} 

注：があなたの代わりに500pxなどの画像の出力平方プレビューに{PhotoURL-75sq}が必要であってもよく、

CSS：ユーザーが最初はそう代わりに、私は最初の画像を注入するためにjqueryのを使用しました示されているにもかかわらず、すべての画像をダウンロードする必要があるため、

.photoset-wrap img { display: none; } 
.photoset-wrap img:first-child { display: block; } 

Answer 2

上記の例では、欠陥があります。

HTML（簡体字）：

{block:Photoset} 
    <div class="photoset"> 
     {block:Photos} 
      <div class="photoPlaceholder" imgsrc="{PhotoURL-500}"></div> 
     {/block:Photos} 
    </div> 
{block:Photoset} 

ジャバスクリプト（簡体字）：

$(document).ready(function() { 
    $(".photoset .photoPlaceholder").first().each(function (i) { 
     var src = $(this).attr("imgsrc"); 
     $(this).html('<a href="#"><img src="'+ src +'" /></a>'); 
    }); 
}); 

これは、最初のイメージがロードされている...あなたはいつもにおける上記の他のCSSの例を持つことができます保証しますnoscriptタグは、JavaScriptをオフにしています。

あり、それらを制限する方法ではないようですが、あなたはそれらををコメントアウトすることができます

Answer 3

に役立ちます願っています。このソリューションは、隠された画像を利点は、すべてのにロードされることはありませんし、それはどんなjavascriptの

{block:Photoset} 
    <!-- Go through each Photo in the Photoset --> 
    {block:Photos} 
     <img src="{PhotoURL-HighRes}" class="highres"> 
     <!-- 
    {/block:Photos} 
    --> 

    {block:Caption} 
     <p>{Caption}</p> 
    {/block:Caption} 
{/block:Photoset} 

を必要としない{/block:Photos}前に、その<!--を参照してください？最初の画像の直後にHTMLコメントが表示されるので、ループ内の残りの画像はコメントになり、目に見えなくなります。ループの後、私たちは-->でコメントを閉じます。完了すると、最初の写真セットの後のフォトセット内のすべてのイメージが非表示になります。