2009/12/14

FancyZoomView

collective.fancyzoomviewjQuery 為基礎,提供 Plone 放大顯示圖片的功能。

以 News Item 為例,它會去修改 page template 內容,先加上一段:

<metal:javascript fill-slot="javascript_head_slot">
<script type="text/javascript"
tal:attributes="src
string:${context/++resource++collective.fancyzoomview.javascript/fancyzoom.js};">
</script>
<script type="text/javascript" charset="utf-8">
jq(document).ready(function() {
jq('div.newsImageContainer a').fancyZoom({closeOnClick: true})
});
</script>
</metal:javascript>

把 tal:attributes="href string:$here_url/image/image_view_fullscreen" 改成 tal:attributes="href string:#news_item_image;"

再加上

<div id="" tal:attributes="id string:news_item_image">
<img tal:replace="structure python: here.tag(scale='large', css_class='newsImage')" src="" alt="" />
</div>

No comments: