849699e3faa9e4e3fe564ed64cb3d3aea160f1bb
[Portfolio.git] / skins / photo_layout_macros.pt
1 <html xmlns:tal="http://xml.zope.org/namespaces/tal" xmlns:metal="http://xml.zope.org/namespaces/metal">
2 <head>
3 <title>Display macros for arbitrary set of photos</title>
4 <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
5 </head>
6 <body>
7 <div metal:define-macro="grid"
8 tal:define="slide_size portal_object/slide_size;"
9 i18n:domain="portfolio">
10 <div metal:use-macro="here/batch_macros/macros/navigation">batch navigation</div>
11 <div id="lightbox" class="lightbox photo-drop-target">
12 <span tal:repeat="info infos" tal:omit-tag="">
13 <span tal:define="size info/thumbSize;
14 margin_top python:(slide_size - size['height']) / 2;
15 margin_left python:(slide_size - size['width']) / 2;
16 selected info/selected|nothing"
17 tal:attributes="class info/className;
18 name info/cmf_uid">
19 <a class="slide" tal:attributes="href info/href; title info/title">
20 <img border="0" tal:attributes="src info/thumbUrl;
21 alt info/title;
22 height size/height;
23 width size/width;
24 style string:margin-top : ${margin_top}px ;;margin-left:${margin_left}px;"/>
25 </a>
26 <tal:block tal:condition="python:features.has_key('select')">
27 <span class="button slide-select" tal:condition="not:selected">
28 <a name="add_to_selection" title="Add to selection" i18n:attributes="title"
29 tal:attributes="href python:features['select'](info['o'], False)">
30 <img tal:attributes="src string:${portal_url}/transparent.gif" height="17" width="12"
31 alt="Add to selection" i18n:attributes="alt"/>
32 </a>
33 </span>
34 <span class="button slide-deselect" tal:condition="selected">
35 <a name="remove_to_selection" title="Remove to selection" i18n:attributes="title"
36 tal:attributes="href python:features['select'](info['o'], True)">
37 <img tal:attributes="src string:${portal_url}/transparent.gif" height="17" width="12"
38 alt="Remove to selection" i18n:attributes="alt"/>
39 </a>
40 </span>
41 </tal:block>
42 <span class="button slide-cart" tal:condition="python:info.get('buyable')">
43 <a name="add_to_cart" title="Add to cart" i18n:attributes="title"
44 tal:attributes="href python:features['cart'](info['o'])">
45 <img tal:attributes="src string:${portal_url}/transparent.gif" height="17" width="20"
46 alt="Add to cart" i18n:attributes="alt"/>
47 </a>
48 </span>
49 <span class="button slide-del" tal:condition="python:features.has_key('del')">
50 <a title="Delete" i18n:attributes="title"
51 tal:attributes="href python:features['del'](info['o'])">
52 <img tal:attributes="src string:${portal_url}/transparent.gif" height="19" width="18"
53 alt="Delete" i18n:attributes="alt"/>
54 </a>
55 </span>
56 <tal:block tal:condition="features/hideAnonymous|nothing">
57 <span class="button slide-hide" tal:condition="not:info/hiddenForAnonymous"
58 tal:define="mtop python:margin_top + 4;
59 mleft python:margin_left + size['width'] - 17"
60 tal:attributes="style python:'margin-top:%dpx;; margin-left:%dpx' % (mtop, mleft)">
61 <a title="Hide for anonymous" i18n:attributes="title"
62 name="hide_for_anonymous"
63 tal:attributes="href string:${info/href}/hideForAnonymous">
64 <img tal:attributes="src string:${portal_url}/transparent.gif" height="15" width="16"
65 alt="Hide for anonymous" i18n:attributes="alt"/>
66 </a>
67 </span>
68 <span class="button slide-show" tal:condition="info/hiddenForAnonymous"
69 tal:define="mtop python:margin_top + 4;
70 mleft python:margin_left + size['width'] - 17"
71 tal:attributes="style python:'margin-top:%dpx;; margin-left:%dpx' % (mtop, mleft)">
72 <a title="Show for anonymous" i18n:attributes="title"
73 name="show_for_anonymous"
74 tal:attributes="href string:${info/href}/resetHide">
75 <img tal:attributes="src string:${portal_url}/transparent.gif" height="15" width="16"
76 alt="Show for anonymous" i18n:attributes="alt"/>
77 </a>
78 </span>
79 </tal:block>
80 </span>
81 </span>
82 </div>
83 <br clear="all"/>
84 <div metal:use-macro="here/batch_macros/macros/navigation">batch navigation</div>
85 <script type="text/javascript">
86 // <!--
87 (function(){
88 var lb = document.getElementById('lightbox');
89 new Lightbox(lb);
90 new DDFileUploader(lb);
91 })();
92 // -->
93 </script>
94 </div>
95
96
97 <div metal:define-macro="film_bar" tal:omit-tag="">
98 <div id="film_bar">
99 <table cellspacing="0">
100 <tr tal:define="slide_size python:portal_object.thumb_height/2 + 10">
101 <td tal:repeat="info contextInfos/infos">
102 <a href="." tal:attributes="href info/href;
103 class info/className;
104 portfolio:position info/index"
105 ><img
106 tal:define="size info/thumbSize;
107 margin_top python:(slide_size - size['height']) / 2"
108 tal:attributes="src info/src;
109 alt info/title;
110 height size/height;
111 width size/width;
112 style string:margin-top : ${margin_top}px ;"/></a>
113 </td>
114 </tr>
115 </table>
116 </div>
117 <div class="jsslider">
118 <span id="slider"></span>
119 </div>
120 <script type="text/javascript" tal:content="python:'''
121 var startSlideShow, slideShowNext, stopSlideShow;
122 (function(){
123
124 var ctxInfos = {'filmLength': %(filmLength)s
125 ,'center': %(center)s
126 ,'slideSize': %(slideSize)d
127 ,'ctxUrlTranslation' : [%(reBaseCtxUrl)s, %(canonicalUrl)s]
128 };
129 var fs = new FilmSlider(document.getElementById('film_bar'),
130 document.getElementById('slider'),
131 ctxInfos,
132 document.getElementById('medium_image').getElementsByTagName('img')[0],
133 document.getElementById('image_toolbar'),
134 document.getElementById('Breadcrumbs'));
135 startSlideShow = function() {return fs.startSlideShow();};
136 stopSlideShow = function() {return fs.stopSlideShow();};
137 slideShowPrevious = function() {return fs.slideShowPrevious();};
138 slideShowNext = function() {return fs.slideShowNext();};
139 slideShowImageLoaded = function() {return fs.slideShowImageLoaded();};
140 })();
141 ''' % {'filmLength': len(contextInfos['infos'])
142 ,'center': index
143 ,'slideSize': portal_object.thumb_width/2 + 11
144 ,'reBaseCtxUrl':contextInfos['reBaseCtxUrl']
145 ,'canonicalUrl':contextInfos['canonicalUrl']
146 }">
147 </script>
148 </div>
149
150 </body>
151 </html>