モーダル内に投稿を表示するように tumblr ページを変更しています。モーダルを追加しましたが、投稿をクリックすると、投稿の詳細がモーダル内に表示されません。
石積みグリッドが適用された無料のテーマを使用し、ブログには投稿のグリッドが表示されます。
現在、{block:Posts} の外にモーダルがあります。{block:Posts} 内にモーダルがある場合、10 個のモーダルが重なり合って開きます。投稿の詳細はモーダル内に表示されますが。(10 は現在のページの投稿数です)。
{block:Photo} 内にモーダルがある場合、すべてのモーダルが石積みグリッド内に表示されます。
私のタンブラーの現在の状態: http://cnocle.tumblr.com/
どんな助け、提案、指示も素晴らしいでしょう!
コードを投稿する必要があるかどうかを教えてください。長くて投稿するかどうか迷っています。
以下のコードは、ありがとうの最初のセクションです
<body>
<script type="text/javascript" src="http://static.tumblr.com/ek9ly4s/Yfzmx9hib/jquery.ms.js"></script>
<link href="http://static.tumblr.com/ek9ly4s/0WMmx9ghw/homemade-ii.css" rel="stylesheet">
<div id="header">
<div class="xnav">
{block:ifshowblogtitle} <a href="/"><img src="http://static.tumblr.com/ksc6s4f/dWtnk041m/cnocle-logo.png"/></a> // {/block:ifshowblogtitle}
{block:ifshowdescription}
{block:Description}<p>{Description}</p> //{/block:Description} {/block:ifshowdescription}
<a href="/">Home</a> /
{block:AskEnabled}<a href="/ask" title="{AskLabel}">{text:Ask Title}</a> /{/block:AskEnabled}
{block:ifLinkOneTitle}
<a href="{text:Link One}">{text:Link One Title}</a> / {/block:ifLinkOneTitle}
{block:ifLinkTwoTitle}
<a href="{text:Link Two}">{text:Link Two Title}</a> / {/block:ifLinkTwoTitle}
{block:ifLinkThreeTitle}
<a href="{text:Link Three}">{text:Link Three Title}</a> / {/block:ifLinkThreeTitle}
{block:ifLinkFourTitle}
<a href="{text:Link Four}">{text:Link Four Title}</a> / {/block:ifLinkFourTitle}
{block:ifLinkFiveTitle}
<a href="{text:Link Five}">{text:Link Five Title}</a> / {/block:ifLinkFiveTitle}
{block:HasPages}{block:Pages}<a href="{URL}">{Label}</a> / {/block:Pages} {/block:HasPages}
{block:iftextonlineusercounter}
{text:text online user counter} /
{/block:iftextonlineusercounter}
<a href="/archive" title="View my blogging history." target=_"blank">Archive</a> /
<a href="http://homemadethemes.tumblr.com" title="Theme Maker">Theme</a>
</div><div class="spacer"> </div></div>
<div id="content">
{block:Posts}
<div class = "autopagerize_page_element" >
<div class="entry">
{block:Photo}
{block:IndexPage}
<div class="photo">
<img src="{PhotoUrl-250}" alt="{PhotoAlt}"/>
</div>
{/block:IndexPage}
{/block:Photo}
{block:PermalinkPage}
<div style="display:block;">
<img src="{PhotoUrl-500}" alt="{PhotoAlt}"/>
{block:NoteCount}{NoteCountWithLabel}
<div style="margin-top:5px;"></div>{/block:NoteCount}
{block:HasTags} · {block:Tags}<a href="{TagURL}"> #{Tag}</a>
<div style="margin-top:5px;"></div>{/block:Tags}{/block:hasTags}
{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
{block:PostNotes}
<div style="width:500px;height:250px;overflow-y:scroll;overflow-x:hidden;margin-left:-5px;">{PostNotes}</div>
{/block:PostNotes}
</div>
</div>
{/block:Posts}
<!--
Start of Modal
-->
<div class="modal-content drop-shadow">
<div class="product-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aliquam corporis distinctio ea in incidunt ipsum molestiae molestias mollitia officiis possimus quis quod, ratione veritatis voluptate voluptatibus? A, amet.</div>
<div class="product-image"><img src="" alt="{PhotoAlt}" /></div>
</div>
<div class="modal-overlay"></div>
<!--
End of Modal
-->
<script type="text/javascript">
$(document).ready(function() {
$(".entry").click(function(){
var imgSrc = $(".photo").children("img").attr("src");
$(".product-image img").attr("src",imgSrc);
$(".modal-overlay").addClass("modal-show");
$(".modal-content").addClass("modal-content-show");
});
$(".btn-modal-close").click(function() {
$(".modal-overlay").removeClass("modal-show");
});
$(".modal-overlay").click(function() {
$(".modal-overlay").removeClass("modal-show");
$(".modal-content").removeClass("modal-content-show");
})
});
</script>
</div>