Context Navigation

picture.tpl @ 13844

Last change on this file since 13844 was 13844, checked in by mistic100, 12 years ago
feature 2588: use jQuery to toggle derivatives and sort boxes + prevent boxes to overflow the page
Property svn:eol-style set to `LF`
File size: 14.1 KB

Line
1	{* Example of resizeable
2	{include file='include/autosize.inc.tpl'}
3	*}
4	{if isset($MENUBAR)}{$MENUBAR}{/if}
5	<div id="content" {if isset($MENUBAR)}class="contentWithMenu"{/if}>
6	{if isset($errors) or not empty($infos)}
7	{include file='infos_errors.tpl'}
8	{/if}
9	{if !empty($PLUGIN_PICTURE_BEFORE)}{$PLUGIN_PICTURE_BEFORE}{/if}
10
11	<div id="imageHeaderBar">
12	<div class="browsePath">
13	{$SECTION_TITLE}<span class="browsePathSeparator">{$LEVEL_SEPARATOR}</span><h2>{$current.TITLE}</h2>
14	</div>
15	</div>
16
17	<div id="imageToolBar">
18	<div class="imageNumber">{$PHOTO}</div>
19	{include file='picture_nav_buttons.tpl'\|@get_extent:'picture_nav_buttons'}
20	<div class="actionButtons">
21
22	{if count($current.unique_derivatives)>1}
23	{footer_script require='jquery'}{literal}
24	function changeImgSrc(url,typeSave,typeMap)
25	{
26	var theImg = document.getElementById("theMainImage");
27	if (theImg)
28	{
29	theImg.removeAttribute("width");theImg.removeAttribute("height");
30	theImg.src = url;
31	theImg.useMap = "#map"+typeMap;
32	}
33	jQuery('#derivativeSwitchBox .switchCheck').css('visibility','hidden');
34	jQuery('#derivativeChecked'+typeSave).css('visibility','visible');
35	document.cookie = 'picture_deriv='+typeSave+';path={/literal}{$COOKIE_PATH}{literal}';
36	}
37
38	$(document).ready(function() {
39	$("#derivativeSwitchBox").css({'top':0,'left':0});
40	var derivativeSwitchBox_width = $("#derivativeSwitchBox").outerWidth(true);
41	var derivativeSwitchBox_height = $("#derivativeSwitchBox").outerHeight(true);
42
43	$("#derivativeSwitchLink").click(function() {
44	$("#derivativeSwitchBox").toggle();
45
46	if ($(this).offset().left + derivativeSwitchBox_width > $(window).width()) {
47	$("#derivativeSwitchBox").css("left", $(window).width() - derivativeSwitchBox_width - 5);
48	} else {
49	$("#derivativeSwitchBox").css("left", $(this).offset().left);
50	}
51	$("#derivativeSwitchBox").css("top", $(this).offset().top + $(this).outerHeight(true));
52	});
53
54	$("#derivativeSwitchBox").bind("mouseleave click", function() {
55	$(this).hide();
56	});
57	});
58	{/literal}{/footer_script}
59	{strip}<a id="derivativeSwitchLink" title="{'Photo sizes'\|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
60	<span class="pwg-icon pwg-icon-sizes"> </span><span class="pwg-button-text">{'Photo sizes'\|@translate}</span>
61	</a>
62	<div id="derivativeSwitchBox" class="switchBox" style="display:none">
63	<div class="switchBoxTitle">{'Photo sizes'\|@translate}</div>
64	{foreach from=$current.unique_derivatives item=derivative key=derivative_type}
65	<span class="switchCheck" id="derivativeChecked{$derivative_type}"{if $derivative->get_type() ne $current.selected_derivative->get_type()} style="visibility:hidden"{/if}>✔ </span>
66	<a href="javascript:changeImgSrc('{$derivative->get_url()\|@escape:javascript}','{$derivative_type}','{$derivative->get_type()}')">
67	{$derivative->get_type()\|@translate}<span class="derivativeSizeDetails"> ({$derivative->get_size_hr()})</span>
68	</a><br>
69	{/foreach}
70	{if isset($U_ORIGINAL)}
71	<a href="javascript:phpWGOpenWindow('{$U_ORIGINAL}','xxx','scrollbars=yes,toolbar=no,status=no,resizable=yes')" rel="nofollow">{'Original'\|@translate}</a>
72	{/if}
73	</div>
74	{/strip}
75	{/if}
76
77	{strip}{if isset($U_SLIDESHOW_START)}
78	<a href="{$U_SLIDESHOW_START}" title="{'slideshow'\|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
79	<span class="pwg-icon pwg-icon-slideshow"> </span><span class="pwg-button-text">{'slideshow'\|@translate}</span>
80	</a>
81	{/if}{/strip}
82	{strip}{if isset($U_METADATA)}
83	<a href="{$U_METADATA}" title="{'Show file metadata'\|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
84	<span class="pwg-icon pwg-icon-camera-info"> </span><span class="pwg-button-text">{'Show file metadata'\|@translate}</span>
85	</a>
86	{/if}{/strip}
87	{strip}{if isset($current.U_DOWNLOAD)}
88	<a href="{$current.U_DOWNLOAD}" title="{'Download this file'\|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
89	<span class="pwg-icon pwg-icon-save"> </span><span class="pwg-button-text">{'Download'\|@translate}</span>
90	</a>
91	{/if}{/strip}
92	{if isset($PLUGIN_PICTURE_ACTIONS)}{$PLUGIN_PICTURE_ACTIONS}{/if}
93	{strip}{if isset($favorite)}
94	<a href="{$favorite.U_FAVORITE}" title="{if $favorite.IS_FAVORITE}{'delete this photo from your favorites'\|@translate}{else}{'add this photo to your favorites'\|@translate}{/if}" class="pwg-state-default pwg-button" rel="nofollow">
95	<span class="pwg-icon pwg-icon-favorite-{if $favorite.IS_FAVORITE}del{else}add{/if}"> </span><span class="pwg-button-text">{'Favorites'\|@translate}</span>
96	</a>
97	{/if}{/strip}
98	{strip}{if isset($U_SET_AS_REPRESENTATIVE)}
99	<a href="{$U_SET_AS_REPRESENTATIVE}" title="{'set as album representative'\|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
100	<span class="pwg-icon pwg-icon-representative"> </span><span class="pwg-button-text">{'representative'\|@translate}</span>
101	</a>
102	{/if}{/strip}
103	{strip}{if isset($U_ADMIN)}
104	<a href="{$U_ADMIN}" title="{'Modify information'\|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
105	<span class="pwg-icon pwg-icon-edit"> </span><span class="pwg-button-text">{'Edit'\|@translate}</span>
106	</a>
107	{/if}{/strip}
108	{strip}{if isset($U_CADDIE)}{caddie management BEGIN}
109	{footer_script}
110	{literal}function addToCadie(aElement, rootUrl, id)
111	{
112	if (aElement.disabled) return;
113	aElement.disabled=true;
114	var y = new PwgWS(rootUrl);
115	y.callService(
116	"pwg.caddie.add", {image_id: id} ,
117	{
118	onFailure: function(num, text) { alert(num + " " + text); document.location=aElement.href; },
119	onSuccess: function(result) { aElement.disabled = false; }
120	}
121	);
122	}{/literal}
123	{/footer_script}
124	<a href="{$U_CADDIE}" onclick="addToCadie(this, '{$ROOT_URL}', {$current.id}); return false;" title="{'Add to caddie'\|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
125	<span class="pwg-icon pwg-icon-caddie-add"> </span><span class="pwg-button-text">{'Caddie'\|@translate}</span>
126	</a>
127	{/if}{/strip}{caddie management END}
128	</div>
129	</div>{<!-- imageToolBar -->}
130
131	<div id="theImageAndInfos">
132	<div id="theImage">
133	{$ELEMENT_CONTENT}
134
135	{if isset($COMMENT_IMG)}
136	<p class="imageComment">{$COMMENT_IMG}</p>
137	{/if}
138
139	{if isset($U_SLIDESHOW_STOP)}
140	<p>
141	[ <a href="{$U_SLIDESHOW_STOP}">{'stop the slideshow'\|@translate}</a> ]
142	</p>
143	{/if}
144
145	</div>{*<!-- no significant white space for elegant-->
146	}<div id="infoSwitcher"></div>{<!-- no significant white space for elegant-->
147	*}<div id="imageInfos">
148	{if $DISPLAY_NAV_THUMB}
149	<div class="navThumbs">
150	{if isset($previous)}
151	<a class="navThumb" id="linkPrev" href="{$previous.U_IMG}" title="{'Previous'\|@translate} : {$previous.TITLE}" rel="prev">
152	<span class="thumbHover prevThumbHover"> </span>
153	<img src="{$previous.derivatives.square->get_url()}" alt="{$previous.TITLE}">
154	</a>
155	{/if}
156	{if isset($next)}
157	<a class="navThumb" id="linkNext" href="{$next.U_IMG}" title="{'Next'\|@translate} : {$next.TITLE}" rel="next">
158	<span class="thumbHover nextThumbHover"> </span>
159	<img src="{$next.derivatives.square->get_url()}" alt="{$next.TITLE}">
160	</a>
161	{/if}
162	</div>
163	{/if}
164
165	<dl id="standard" class="imageInfoTable">
166	{strip}
167	{if $display_info.author and isset($INFO_AUTHOR)}
168	<div id="Author" class="imageInfo">
169	<dt>{'Author'\|@translate}</dt>
170	<dd>{$INFO_AUTHOR}</dd>
171	</div>
172	{/if}
173	{if $display_info.created_on and isset($INFO_CREATION_DATE)}
174	<div id="datecreate" class="imageInfo">
175	<dt>{'Created on'\|@translate}</dt>
176	<dd>{$INFO_CREATION_DATE}</dd>
177	</div>
178	{/if}
179	{if $display_info.posted_on}
180	<div id="datepost" class="imageInfo">
181	<dt>{'Posted on'\|@translate}</dt>
182	<dd>{$INFO_POSTED_DATE}</dd>
183	</div>
184	{/if}
185	{if $display_info.dimensions and isset($INFO_DIMENSIONS)}
186	<div id="Dimensions" class="imageInfo">
187	<dt>{'Dimensions'\|@translate}</dt>
188	<dd>{$INFO_DIMENSIONS}</dd>
189	</div>
190	{/if}
191	{if $display_info.file}
192	<div id="File" class="imageInfo">
193	<dt>{'File'\|@translate}</dt>
194	<dd>{$INFO_FILE}</dd>
195	</div>
196	{/if}
197	{if $display_info.filesize and isset($INFO_FILESIZE)}
198	<div id="Filesize" class="imageInfo">
199	<dt>{'Filesize'\|@translate}</dt>
200	<dd>{$INFO_FILESIZE}</dd>
201	</div>
202	{/if}
203	{if $display_info.tags and isset($related_tags)}
204	<div id="Tags" class="imageInfo">
205	<dt>{'Tags'\|@translate}</dt>
206	<dd>
207	{foreach from=$related_tags item=tag name=tag_loop}{if !$smarty.foreach.tag_loop.first}, {/if}<a href="{$tag.URL}">{$tag.name}</a>{/foreach}
208	</dd>
209	</div>
210	{/if}
211	{if $display_info.categories and isset($related_categories)}
212	<div id="Categories" class="imageInfo">
213	<dt>{'Albums'\|@translate}</dt>
214	<dd>
215	<ul>
216	{foreach from=$related_categories item=cat}
217	<li>{$cat}</li>
218	{/foreach}
219	</ul>
220	</dd>
221	</div>
222	{/if}
223	{if $display_info.visits}
224	<div id="Visits" class="imageInfo">
225	<dt>{'Visits'\|@translate}</dt>
226	<dd>{$INFO_VISITS}</dd>
227	</div>
228	{/if}
229
230	{if $display_info.rating_score and isset($rate_summary)}
231	<div id="Average" class="imageInfo">
232	<dt>{'Rating score'\|@translate}</dt>
233	<dd>
234	{if $rate_summary.count}
235	<span id="ratingScore">{$rate_summary.score}</span> <span id="ratingCount">({assign var='rate_text' value='%d rates'\|@translate}{$pwg->sprintf($rate_text, $rate_summary.count)})</span>
236	{else}
237	<span id="ratingScore">{'no rate'\|@translate}</span> <span id="ratingCount"></span>
238	{/if}
239	</dd>
240	</div>
241	{/if}
242
243	{if isset($rating)}
244	<div id="rating" class="imageInfo">
245	<dt>
246	<span id="updateRate">{if isset($rating.USER_RATE)}{'Update your rating'\|@translate}{else}{'Rate this photo'\|@translate}{/if}</span>
247	</dt>
248	<dd>
249	<form action="{$rating.F_ACTION}" method="post" id="rateForm" style="margin:0;">
250	<div>
251	{foreach from=$rating.marks item=mark name=rate_loop}
252	{if isset($rating.USER_RATE) && $mark==$rating.USER_RATE}
253	<input type="button" name="rate" value="{$mark}" class="rateButtonSelected" title="{$mark}">
254	{else}
255	<input type="submit" name="rate" value="{$mark}" class="rateButton" title="{$mark}">
256	{/if}
257	{/foreach}
258	{strip}{combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
259	{combine_script id='rating' load='async' require='core.scripts' path='themes/default/js/rating.js'}
260	{footer_script}
261	var _pwgRatingAutoQueue = _pwgRatingAutoQueue\|\|[];
262	_pwgRatingAutoQueue.push( {ldelim}rootUrl: '{$ROOT_URL}', image_id: {$current.id},
263	onSuccess : function(rating) {ldelim}
264	var e = document.getElementById("updateRate");
265	if (e) e.innerHTML = "{'Update your rating'\|@translate\|@escape:'javascript'}";
266	e = document.getElementById("ratingScore");
267	if (e) e.innerHTML = rating.score;
268	e = document.getElementById("ratingCount");
269	if (e) e.innerHTML = "({'%d rates'\|@translate\|@escape:'javascript'})".replace( "%d", rating.count);
270	{rdelim}{rdelim} );
271	{/footer_script}
272	{/strip}
273	</div>
274	</form>
275	</dd>
276	</div>
277	{/if}
278
279	{if $display_info.privacy_level and isset($available_permission_levels)}
280	<div id="Privacy" class="imageInfo"><div class="relSwitchBox">
281	<dt><a id="privacyLevelLink" href="javascript:togglePrivacyLevelBox()">{'Who can see this photo?'\|@translate}</a></dt>
282	<dd>
283	{combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
284	{footer_script require='jquery'}
285	{literal}function setPrivacyLevel(rootUrl, id, level)
286	{
287	var y = new PwgWS(rootUrl);
288	y.callService(
289	"pwg.images.setPrivacyLevel", {image_id: id, level:level} ,
290	{
291	method: "POST",
292	onFailure: function(num, text) { alert(num + " " + text); },
293	onSuccess: function(result) {
294	jQuery('#privacyLevelBox .switchCheck').css('visibility','hidden');
295	jQuery('#levelCheck'+level).css('visibility','visible');
296	}
297	}
298	);
299	}
300	function togglePrivacyLevelBox()
301	{
302	var elt = document.getElementById("privacyLevelBox"),
303	ePos = document.getElementById("privacyLevelLink");
304	if (elt.style.display == "none")
305	{
306	elt.style.left = (ePos.offsetLeft)+"px";
307	elt.style.top = (ePos.offsetTop+ePos.offsetHeight)+"px";
308	elt.style.display="";
309	}
310	else
311	elt.style.display="none";
312	}
313	{/literal}
314	{/footer_script}
315
316	<div id="privacyLevelBox" class="switchBox" onclick="togglePrivacyLevelBox()" style="display:none" onmouseout="e=event.toElement\|\|event.relatedTarget;e.parentNode==this\|\|e==this\|\|togglePrivacyLevelBox()">
317	{foreach from=$available_permission_levels item=label key=level}
318	<span id="levelCheck{$level}" class="switchCheck" {if $level != $current.level} style="visibility:hidden"{/if}>✔ </span>
319	<a id="switchLevel{$level}" href="javascript:setPrivacyLevel('{$ROOT_URL}', {$current.id}, {$level})">{$label}</a><br>
320	{/foreach}
321	</div>
322
323	</dd>
324	</div></div>
325	{/if}
326	{/strip}
327	</dl>
328
329	{if isset($metadata)}
330	<dl id="Metadata" class="imageInfoTable">
331	{foreach from=$metadata item=meta}
332	<h3>{$meta.TITLE}</h3>
333	{foreach from=$meta.lines item=value key=label}
334	<div class="imageInfo">
335	<dt>{$label}</dt>
336	<dd>{$value}</dd>
337	</div>
338	{/foreach}
339	{/foreach}
340	</dl>
341	{/if}
342	</div>
343	</div>
344
345	{if isset($COMMENT_COUNT)}
346	<div id="comments" {if (!isset($comment_add) && ($COMMENT_COUNT == 0))}class="noCommentContent"{else}class="commentContent"{/if}><div id="commentsSwitcher"></div>
347	<h3>{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}</h3>
348
349	<div id="pictureComments">
350	{if isset($comment_add)}
351	<div id="commentAdd">
352	<h4>{'Add a comment'\|@translate}</h4>
353	<form method="post" action="{$comment_add.F_ACTION}" id="addComment" >
354	{if $comment_add.SHOW_AUTHOR}
355	<p><label>{'Author'\|@translate} :</label></p>
356	<p><input type="text" name="author" /></p>
357	<p><label>{'Comment'\|@translate} :</label></p>
358	{/if}
359	<p><textarea name="content" id="contentid" rows="5" cols="50">{$comment_add.CONTENT}</textarea></p>
360	<p><input type="hidden" name="key" value="{$comment_add.KEY}" />
361	<input class="submit" type="submit" value="{'Submit'\|@translate}"></p>
362	</form>
363	</div>
364	{/if}
365	{if isset($comments)}
366	<div id="pictureCommentList">
367	{if (($COMMENT_COUNT > 2) \|\| !empty($navbar))}
368	<div id="pictureCommentNavBar">
369	{if $COMMENT_COUNT > 2}
370	<a href="{$COMMENTS_ORDER_URL}#comments" rel="nofollow" class="commentsOrder">{$COMMENTS_ORDER_TITLE}</a>
371	{/if}
372	{if !empty($navbar) }{include file='navigation_bar.tpl'\|@get_extent:'navbar'}{/if}
373	</div>
374	{/if}
375	{include file='comment_list.tpl'}
376	</div>
377	{/if}
378	<div style="clear: both;"></div>
379	</div>
380
381	</div>
382	{/if}{comments}
383
384	{if !empty($PLUGIN_PICTURE_AFTER)}{$PLUGIN_PICTURE_AFTER}{/if}
385
386	</div>

Note: See TracBrowser for help on using the repository browser.

Download in other formats:

Original Format