--- a/src/pyams_content/component/gallery/zmi/templates/gallery-images.pt	Thu Oct 12 22:30:38 2017 +0200
+++ b/src/pyams_content/component/gallery/zmi/templates/gallery-images.pt	Thu Oct 12 22:31:46 2017 +0200
@@ -9,33 +9,42 @@
 			tal:attributes="data-ams-switcher-state 'open' if context.values() else None">
 			<i18n:var translate="">Gallery images</i18n:var>
 		</legend>
-		<div class="pull-left">
+		<div class="pull-left persistent">
 			<tal:var content="structure provider:pyams.widget_title" />
 		</div>
 		<div class="clearfix"></div>
-		<div class="sortable gallery"
+		<div class="sortable fancybox gallery"
 			 tal:attributes="data-ams-location extension:absolute_url(context);
-							 class '{0} gallery'.format('sortable' if request.has_permission(view.permission) else '');"
+							 class '{0} fancybox gallery'.format('sortable' if request.has_permission(view.permission) else '');"
 			 data-ams-sortable-stop="PyAMS_content.galleries.setOrder"
-			 data-ams-sortable-helper="clone">
+			 data-ams-sortable-helper="clone"
+			 data-ams-fancybox-type="image"
+			 data-ams-fancybox-loop="false"
+			 data-ams-fancybox-elements="a.fancyimg"
+			 data-ams-fancybox-after-load="PyAMS_content.galleries.afterFancyboxLoad">
 			<div tal:repeat="image context.values()"
 				 class="image margin-5 margin-bottom-10 radius-4 padding-5 pull-left text-center"
 				 style="position: relative;"
 				 tal:attributes="data-ams-element-name image.__name__">
 				<tal:var define="thumbnails extension:thumbnails(image.data);">
 					<tal:if condition="thumbnails">
-						<a class="fancybox" data-toggle
-						   data-ams-fancybox-type="image"
+						<a class="fancyimg hint" data-toggle
+						   data-ams-hint-gravity="sw"
+						   title="Zoom image" i18n:attributes="title"
 						   tal:define="target thumbnails.get_thumbnail('800x600', 'jpeg')"
-						   tal:attributes="href extension:absolute_url(target);">
-							<img class="thumbnail hint"
+						   tal:attributes="class 'fancyimg hint {0}'.format('not-visible' if not image.visible else '');
+										   href extension:absolute_url(target);
+										   rel string:gallery_${context.__name__};">
+							<img class="thumbnail"
 								 data-ams-hint-gravity="s"
 								 tal:define="thumbnail thumbnails.get_thumbnail('128x128', 'jpeg');
 											 image_size thumbnail.get_image_size();
 											 margin_left 64 - image_size[0] / 2;
-											 margin_top 64 - image_size[1] / 2;"
+											 margin_top 64 - image_size[1] / 2;
+											 title i18n:image.title;"
 								 tal:attributes="src extension:absolute_url(thumbnail);
-												 title i18n:image.title;
+												 id 'image_{0}_{1}'.format(context.__name__, image.__name__);
+												 original-title title or '--';
 												 style string:margin-left: ${margin_left}px;; margin-right: ${margin_left}px;; margin-top: ${margin_top}px;; margin-bottom: ${margin_top}px;;" />
 						</a>
 					</tal:if>