diff --git a/CHANGES.md b/CHANGES.md index b48cf28d3..f99d1a590 100644 --- a/CHANGES.md +++ b/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 diff --git a/src/pat/gallery/documentation.md b/src/pat/gallery/documentation.md index bf93f1355..be01f764e 100644 --- a/src/pat/gallery/documentation.md +++ b/src/pat/gallery/documentation.md @@ -31,7 +31,7 @@ When looking for images to show in the gallery the pattern looks for links conta
    • -or a HTML5 `nav` container: +or an HTML5 `nav` container: +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. + + + +Or for a mixed situation: + + ### Option reference @@ -57,10 +74,10 @@ You can customise the behaviour of a gallery through options in the ... -| 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 | diff --git a/src/pat/gallery/full-4.jpg b/src/pat/gallery/full-4.jpg new file mode 100644 index 000000000..c352e4793 Binary files /dev/null and b/src/pat/gallery/full-4.jpg differ diff --git a/src/pat/gallery/gallery.js b/src/pat/gallery/gallery.js index 81d5378af..78fc37c5e 100644 --- a/src/pat/gallery/gallery.js +++ b/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. diff --git a/src/pat/gallery/index.html b/src/pat/gallery/index.html index 6e5ca329c..ce54c3d8d 100644 --- a/src/pat/gallery/index.html +++ b/src/pat/gallery/index.html @@ -4,9 +4,13 @@ Gallery - - - + +

    Normal gallery

    @@ -15,6 +19,7 @@

    Normal gallery

    +

    Gallery with mixed content

    Only items which match the selecor ``a.add-to-gallery`` are added.

    +

    Image popups, not collected in a gallery

    + +

    Gallery adding directly images.

    + + +

    Gallery adding wrapped and unwrapped images.

    +

    The last image here is wrapped in a link and should not open the gallery but Syslab.com website in a new tab.
    + The image is included in the gallery, though.

    + + (Timestamp to see if page has reloaded: )