pat-gallery: Allow images to directly be added to the gallery.

CHANGES.md

@@ -4,6 +4,7 @@
 
 Features
 ~~~~~~~~
+- pat-gallery: Allow adding images directly to the gallery.
 - pat-validation: Allow for HTML5 style ``required`` attributes without a value.
 - pat-validation: Added the possibility to check for fields equality
 - pat-validation: Dont use :input jquery extension for better performance

src/pat/gallery/documentation.md

@@ -31,7 +31,7 @@ When looking for images to show in the gallery the pattern looks for links conta
       <li><a href="images/full/2.jpg"><img src="images/thumb/2.jpg"/></a></li>
     </ul>
 
-or a HTML5 `nav` container:
+or an HTML5 `nav` container:
 
     <nav class="pat-gallery">
       <a href="images/full/1.jpg"><img src="images/thumb/1.jpg"/></a>
@@ -47,6 +47,23 @@ If you just want individual images to be opened in the gallery overlay but want
       <a class="pat-gallery" href="images/full/2.jpg"><img src="images/thumb/2.jpg"/></a>
     </nav>
 
+Sometimes it's not possible to have links around your images. In this case you can just add a selector that directly refers to an image instead of a link that points to an image. Pat-gallery will scan for either an href attribute or an src attribute and take its value.
+
+    <nav class="pat-gallery" data-pat-gallery="item-selector: img;">
+      <img src="full-1.jpg"/>
+      <img src="full-2.jpg"/>
+      <img src="full-3.jpg"/>
+    </nav>
+
+Or for a mixed situation:
+
+    <nav class="pat-gallery" data-pat-gallery="item-selector: a.add-to-gallery, :not(a.add-to-gallery) img, > img">
+      <a href="full-1.jpg" class="add-to-gallery"><img src="thumb-1.jpg"/></a>
+      <a href="full-2.jpg" class="add-to-gallery"><img src="thumb-2.jpg"/></a>
+      <a href="full-3.jpg" class="add-to-gallery"><img src="thumb-3.jpg"/></a>
+
+      <img src="full4.jpg" alt="">
+    </nav>
 
 ### Option reference
 
@@ -57,10 +74,10 @@ You can customise the behaviour of a gallery through options in the
       ...
     </ul>
 
-| Property | Default value | Values | Description | Type |
-| ----- | --------| -------- | ------- | ----------- |
-| `item-selector` | `a` | | The selector for the link element, which contains the images to be added to the gallery. For example, you can set the `item-selector` to `a.add-to-gallery` and have only images wrapped in an anchor element with the class `add-to-gallery` added to the gallery.
-| `loop` | true | `true` `false` | Indicates if a slideshow should loop back to the beginning.|Mutually exclusive|
+| Property | Default value | Values | Type |
+| -------- | ------------- | ------ | ---- |
+| `item-selector` | `a` | Any CSS selector | The selector for the link element, which contains the images to be added to the gallery. For example, you can set the `item-selector` to `a.add-to-gallery` and have only images wrapped in an anchor element with the class `add-to-gallery` added to the gallery. |
+| `loop` | true | `true` `false` | Indicates if a slideshow should loop back to the beginning.|Mutually exclusive |
 | `scale-method` | `fit` | `fit` `fitNoUpscale` `zoom` | How images will fit onto the screen. `fit` ensures the image always fits the screen. `fitNoUpscale` works like `fit` but will never upscale the image. `zoom` the image will always fill the full screen, this may cause the image to be "zoomed" in and cropped.|Mutually exclusive |
-| `delay` | `30000` | | The delay, in milliseconds, an image is shown in a slideshow.|Number|
-| `effect-duration` | | `250` | How long it will take in milliseconds for an image to slide into view.|Number|
+| `delay` | `30000` | | The delay, in milliseconds, an image is shown in a slideshow. | Number |
+| `effect-duration` | | `250` | How long it will take in milliseconds for an image to slide into view. | Number |

src/pat/gallery/gallery.js

@@ -30,11 +30,17 @@ define('pat-gallery', [
             if ($('#photoswipe-template').length === 0) {
                 $('body').append(_.template(template)());
             }
+
             // Search for itemSelector including the current node
             // See: https://stackoverflow.com/a/17538213/1337474
             var image_wrapper = this.$el.find(this.options.itemSelector).addBack(this.options.itemSelector);
             var images = image_wrapper.map(function () {
-                return { 'w': 0, 'h': 0, 'src': this.href, 'title': $(this).find('img').attr('title') };
+                return {
+                    'w': 0,
+                    'h': 0,
+                    'src': this.src || this.href,
+                    'title': this.title || $(this).find('img').attr('title')
+                };
             });
             var pswpElement = document.querySelectorAll('.pswp')[0];
             var options = {
@@ -48,14 +54,16 @@ define('pat-gallery', [
                 closeOnScroll: false
             };
             image_wrapper.click(function (ev) {
-                ev.preventDefault();
-                if (this.href) {
-                    options.index = _.indexOf(_.pluck(images, 'src'), this.href);
-                } else {
-                    options.index = 0;
+                if (this.tagName.toLowerCase() === 'img' && $(this).closest('a').length !== 0) {
+                    // Do not open auto-added images in gallery if they are wrapped in an anchor element.
+                    return;
                 }
-                options.history = false;  // this fixes the reload on gallery close which was induced by a history back call.
-
+                ev.preventDefault();
+                // Get the index of the clicked gallery item in the list of images.
+                options.index = _.indexOf(_.pluck(images, 'src'), this.href || this.src) || 0;
+                // Fix reload on gallery close which was induced by a history back call.
+                options.history = false;
+
                 var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI, images, options);
                 gallery.listen('gettingData', function(index, item) {
                     // Workaround for the fact that we don't know the image sizes.

src/pat/gallery/index.html

@@ -4,9 +4,13 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>Gallery</title>
     <link rel="stylesheet" href="/style/common.css" type="text/css">
-    <link rel="stylesheet" href="/src/bower_components/photoswipe/dist/photoswipe.css" type="text/css">
-    <link rel="stylesheet" href="/src/bower_components/photoswipe/dist/default-skin/default-skin.css" type="text/css">
-        <script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
+    <script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
+    <style type="text/css" media="screen">
+      .pat-gallery img, img.pat-gallery {
+        width: 150px;
+        height: auto;
+      }
+    </style>
   </head>
   <body>
     <h1>Normal gallery</h1>
@@ -15,6 +19,7 @@ <h1>Normal gallery</h1>
       <a href="full-2.jpg"><img src="thumb-2.jpg" title="Photo by Doug88888"/></a>
       <a href="full-3.jpg"><img src="thumb-3.jpg" title="Photy by Paulo Brandao"/></a>
     </nav>
+
     <h1>Gallery with mixed content</h1>
     <p>Only items which match the selecor ``a.add-to-gallery`` are added.</p>
     <nav class="pat-gallery" data-pat-gallery="item-selector: a.add-to-gallery">
@@ -23,12 +28,31 @@ <h1>Gallery with mixed content</h1>
       <a href="">Link only</a>
       <a href="full-3.jpg" class="add-to-gallery"><img src="thumb-3.jpg" title="Photy by Paulo Brandao"/></a>
     </nav>
+
     <h1>Image popups, not collected in a gallery</h1>
     <nav>
       <a href="full-1.jpg" class="pat-gallery"><img src="thumb-1.jpg" title="Aurora Borealis. Photo by Beverly &amp; Pack"/></a>
       <a href="full-2.jpg" class="pat-gallery"><img src="thumb-2.jpg" title="Photo by Doug88888"/></a>
       <a href="full-3.jpg" class="pat-gallery"><img src="thumb-3.jpg" title="Photy by Paulo Brandao"/></a>
     </nav>
+
+    <h1>Gallery adding directly images.</h1>
+    <nav class="pat-gallery" data-pat-gallery="item-selector: img;">
+      <img src="full-1.jpg"/>
+      <img src="full-2.jpg"/>
+      <img src="full-3.jpg"/>
+    </nav>
+
+    <h1>Gallery adding wrapped and unwrapped images.</h1>
+    <p>The last image here is wrapped in a link and should not open the gallery but Syslab.com website in a new tab.<br/>
+    The image is included in the gallery, though.</p>
+    <nav class="pat-gallery" data-pat-gallery="item-selector: a.add-to-gallery, :not(a.add-to-gallery) img, > img">
+      <a href="full-1.jpg" class="add-to-gallery"><img src="thumb-1.jpg"/></a>
+      <img src="full-2.jpg"/>
+      <img src="full-3.jpg"/>
+      <a href="https://www.syslab.com/" target="_blank"><img src="full-4.jpg" /></a>
+    </nav>
+
 (Timestamp to see if page has reloaded: <script>document.write(Math.round(new Date().getTime()/1000));</script>)
   </body>
 </html>