Enable fancy zoom view for all content types embedding images
Purpose
Images are big, too big for a full-size inclusion, but on the other hand the interested reader might want to zoom into the image. To do this, you can use fancy zoom view product. With this product, the user can zoom the image without a new page being opened for just the image. Unfortunately, the fancy zoom view product comes with no view templates for content types like event, Rich Document or Page.
Prerequisites
Tested with plone 3.3 and fancy zoom view 0.4.1, which must be installed in your plone site. You should have some knowledge of page templates. This How-To is not totally all-explaining, but rather gives directions.
Step by step
Make sure that for kupu, you have the "image captioning" feature enabled. Customized the default view of your content type, e.g. event_view.pt for events or richdocument_view.pt for RichDocument. At top insert the following to load the javascript of fancy zoom view:
<body>
<!-- insert begin -->
<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('.da_fancy_zoom a').fancyZoom({closeOnClick: true})
});
</script>
</metal:javascript>
<!-- insert end -->
<div metal:fill-slot="main">
Customize kupu_captioned_image.pt to something like the following:
<dl tal:attributes="class options/class">
<dt><a tal:omit-tag="options/isfullsize" rel="lightbox"
tal:attributes="href python:'#' + str(options['image'].UID());"
tal:content="structure options/tag">[image goes here]</a></dt>
<dd class="image-caption"
tal:attributes="style string:width:${options/width}px;"
tal:content="options/caption|nothing">
</dd>
</dl>
<div tal:omit-tag="options/isfullsize" tal:attributes="id python:str(options['image'].UID());" style="display: none;">
<img tal:omit-tag="options/isfullsize" tal:attributes="width python:options['fullimage'].width; height python:options['fullimage'].height; src options/url_path; title options/caption|nothing; alt options/caption|nothing"/>
</div>
If you want to have a captioning in the zoom view and also a "zoom/magnify" image (you need to add this tiny magnify image beforehand to your "portal_skins/custom" folder), then this would be appropriate for kupu_captioned_image.pt:
<tal:block tal:define="do_zoom not:options/isfullsize">
<dl tal:attributes="class options/class">
<dt class="da_fancy_zoom"><a tal:omit-tag="options/isfullsize" rel="lightbox"
tal:attributes="href python:'#' + str(options['image'].UID());"
tal:content="structure options/tag">[image goes here]</a></dt>
<dd class="image-caption" tal:attributes="style string:width:${options/width}px;">
<tal:block tal:condition="do_zoom">
<div class="da_fancy_zoom">
<a class="image-right" title="vergrößern" tal:attributes="href python:'#' + str(options['image'].UID());">
<img width="15" height="11" tal:attributes="src string:${context/portal_url}/magnify-clip.png"/>
</a>
</div>
</tal:block>
<span tal:omit-tag="" tal:content="options/caption|nothing"></span>
</dd>
</dl>
<tal:block tal:condition="do_zoom">
<div tal:attributes="id python:str(options['image'].UID());" style="display: none;">
<img tal:attributes="width python:options['fullimage'].width; height python:options['fullimage'].height; src options/url_path; title options/caption|nothing; alt options/caption|nothing"/>
<div class="captioned zoom-caption" tal:omit-tag="not:options/caption" tal:attributes="style string:width:${options/fullimage/width}px;" tal:content="options/caption|nothing"></div>
</div>
</tal:block>
</tal:block>
For testing: You will need to edit your content type and then save it, to see any effect (this is because the "image captioning" and hence also the fancy zoom view are only embedded (as a "transform") when you save the content type).
Further information
An example for fancy zoom, with magnify image and the zoomed image being captioned, can be seen here (click on the images. If the image is already full size, then no zoom is done).
Visit our