feat(gallery): make showcase gallery a real gallery

Elgg · Dec 29, 2016 · ffdbdf6 · ffdbdf6
1 parent 4745903
commit ffdbdf6
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/views/default/forms/showcase/edit.php b/views/default/forms/showcase/edit.php
@@ -1,5 +1,6 @@
 <?php
 elgg_require_js('forms/showcase/edit');
+elgg_require_js('showcase/gallery');
 
 $showcase = $vars['entity'];
 $images = array();
@@ -28,7 +29,17 @@
 		$thumb_url = elgg_get_site_url() . "showcase/icon/{$img->guid}/medium/" . md5($img->time_created) . '.jpg';
 		$full_url = elgg_get_site_url() . "showcase/icon/{$img->guid}/master/" . md5($img->time_created) . '.jpg';
 		$gallery .= '<li>';
-		$gallery .= "<a class=\"elgg-showcase-screenshot elgg-lightbox elgg-photo\" href=\"$full_url\" rel=\"showcase-gallery\"><img src=\"$thumb_url\" alt=\"$img->title\" title=\"$img->title\"/></a>";
+		$gallery .= elgg_view('output/url', [
+			'class' => 'elgg-showcase-screenshot elgg-photo',
+			'href' => $full_url,
+			'rel' => 'showcase-gallery',
+			'title' => $img->title,
+			'text' => elgg_view('output/img', [
+				'src' => $thumb_url,
+				'alt' => $img->title,
+			]),
+		]);
+
 		$gallery .= elgg_view('output/url', array(
 			'text' => elgg_view_icon('delete'),
 			'href' => 'action/showcase/screenshot/delete?guid=' . $img->guid,

diff --git a/views/default/object/showcase/full.php b/views/default/object/showcase/full.php
@@ -1,5 +1,7 @@
 <?php
 
+elgg_require_js('showcase/gallery');
+
 $showcase = $vars['entity'];
 $owner = $showcase->getOwnerEntity();
 
@@ -32,7 +34,16 @@
 		$thumb_url = elgg_get_site_url() . "showcase/icon/{$img->guid}/large/" . md5($img->time_created) . '.jpg';
 		$full_url = elgg_get_site_url() . "showcase/icon/{$img->guid}/original/" . md5($img->time_created) . '.jpg';
 		$gallery .= '<li>';
-		$gallery .= "<a class=\"elgg-showcase-screenshot elgg-lightbox elgg-photo\" href=\"$full_url\" rel=\"showcase-gallery\"><img src=\"$thumb_url\" alt=\"$img->title\" title=\"$img->title\"/></a>";
+		$gallery .= elgg_view('output/url', [
+			'class' => 'elgg-showcase-screenshot elgg-photo',
+			'href' => $full_url,
+			'rel' => 'showcase-gallery',
+			'title' => $img->title,
+			'text' => elgg_view('output/img', [
+				'src' => $thumb_url,
+				'alt' => $img->title,
+			]),
+		]);
 		$gallery .= '</li>';
 	}
 	$gallery .= '</ul>';

diff --git a/views/default/showcase/gallery.js b/views/default/showcase/gallery.js
@@ -0,0 +1,10 @@
+define(function(require) {
+
+	var lightbox = require('elgg/lightbox');
+
+	var options = {
+      photo: true,
+   };
+
+   lightbox.bind('a[rel="showcase-gallery"]', options, false); // 3rd attribute ensures binding is done without proxies
+});