diff --git a/src/plugins/lightbox/ajax/ajax-en.html b/src/plugins/lightbox/ajax/ajax-en.html new file mode 100644 index 00000000000..f2bec538b4a --- /dev/null +++ b/src/plugins/lightbox/ajax/ajax-en.html @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + +
Table caption default appearance
Table header (th) default appearanceTable header (th) default appearance
Table data (td) default appearanceTable data (td) default appearance
+

Link default appearance

\ No newline at end of file diff --git a/src/plugins/lightbox/ajax/ajax-fr.html b/src/plugins/lightbox/ajax/ajax-fr.html new file mode 100644 index 00000000000..17801884ae0 --- /dev/null +++ b/src/plugins/lightbox/ajax/ajax-fr.html @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + +
Légende de table - apparence par défaut
En-tête de table (th) - apparence par défautEn-tête de table (th) - apparence par défaut
Données de table (td) - apparence par défautDonnées de table (td) - apparence par défaut
+

Lien - apparence par défaut

\ No newline at end of file diff --git a/src/plugins/lightbox/img/1_b.jpg b/src/plugins/lightbox/img/1_b.jpg new file mode 100644 index 00000000000..0f662e341e6 Binary files /dev/null and b/src/plugins/lightbox/img/1_b.jpg differ diff --git a/src/plugins/lightbox/img/1_s.jpg b/src/plugins/lightbox/img/1_s.jpg new file mode 100644 index 00000000000..ef0bd550d7f Binary files /dev/null and b/src/plugins/lightbox/img/1_s.jpg differ diff --git a/src/plugins/lightbox/img/2_b.jpg b/src/plugins/lightbox/img/2_b.jpg new file mode 100644 index 00000000000..977cb6a99d6 Binary files /dev/null and b/src/plugins/lightbox/img/2_b.jpg differ diff --git a/src/plugins/lightbox/img/2_s.jpg b/src/plugins/lightbox/img/2_s.jpg new file mode 100644 index 00000000000..258cbcb6576 Binary files /dev/null and b/src/plugins/lightbox/img/2_s.jpg differ diff --git a/src/plugins/lightbox/img/3_b.jpg b/src/plugins/lightbox/img/3_b.jpg new file mode 100644 index 00000000000..e007a51c3ed Binary files /dev/null and b/src/plugins/lightbox/img/3_b.jpg differ diff --git a/src/plugins/lightbox/img/3_s.jpg b/src/plugins/lightbox/img/3_s.jpg new file mode 100644 index 00000000000..7206f24bbdd Binary files /dev/null and b/src/plugins/lightbox/img/3_s.jpg differ diff --git a/src/plugins/lightbox/img/4_b.jpg b/src/plugins/lightbox/img/4_b.jpg new file mode 100644 index 00000000000..a3a12a66f41 Binary files /dev/null and b/src/plugins/lightbox/img/4_b.jpg differ diff --git a/src/plugins/lightbox/img/4_s.jpg b/src/plugins/lightbox/img/4_s.jpg new file mode 100644 index 00000000000..b9ea423224c Binary files /dev/null and b/src/plugins/lightbox/img/4_s.jpg differ diff --git a/src/plugins/lightbox/img/5_b.jpg b/src/plugins/lightbox/img/5_b.jpg new file mode 100644 index 00000000000..ea1cfbc3fad Binary files /dev/null and b/src/plugins/lightbox/img/5_b.jpg differ diff --git a/src/plugins/lightbox/img/5_s.jpg b/src/plugins/lightbox/img/5_s.jpg new file mode 100644 index 00000000000..989975d11b5 Binary files /dev/null and b/src/plugins/lightbox/img/5_s.jpg differ diff --git a/src/plugins/lightbox/lightbox-en.hbs b/src/plugins/lightbox/lightbox-en.hbs index 0c634aa4900..b318df23f8b 100644 --- a/src/plugins/lightbox/lightbox-en.hbs +++ b/src/plugins/lightbox/lightbox-en.hbs @@ -3,26 +3,310 @@ title: Lightbox language: en --- + + +
+

Table of contents

+ +
+
-

Lightbox Example

- - - - - - - - - - - -
- - - - - - - -
+

Features

+
+ +
+
+

Examples

+ +
+
    +
  1. ordered list (ol) first level default appearance
    2. +
  2. ordered list (ol) first level default appearance +
      +
    1. ordered list (ol) second level default appearance
      2. +
    2. ordered list (ol) second level default appearance +
        +
      1. ordered list (ol) third level default appearance
        2. +
      2. ordered list (ol) third level default appearance
        3. +
      +
      3. +
    +
    3. +
+

Link default appearance

+
+
+ Long description of image 2 +

Example long description of image 2 (referenced by aria-describedby).

+
+ +
+

Single items

+
+

Example

+
+ +
+
+ +
+

Coding

+ 
<ul>
+    <li>
+      <a class="wb-lightbox" href="img/1_b.jpg" title="Image 1">
+        <img src="img/1_s.jpg" alt="Image 1" />
+      </a>
+    </li>
+    <li>
+      <a class="wb-lightbox" href="img/2_b.jpg" title="Image 2">
+        <img src="img/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" longdesc="#image2-desc" />
+      </a>
+    </li>
+    <li>
+      <a class="wb-lightbox" title="Example of AJAX content" href="ajax/ajax-en.html">AJAX content</a>
+    </li>
+    <li>
+      <a class="wb-lightbox" title="Example of inline content" href="#inline_content">Inline content</a>
+    </li>
+  </ul>
+
+
+ +
+

Image gallery

+
+

Example

+
+ +
+
+ +
+

Coding

+ 
<div class="wb-lightbox lb-gallery inline-list">
+  <ul>
+    <li>
+	  <a href="img/1_b.jpg" title="Image 1">
+		<img src="img/1_s.jpg" alt="Image 1" />
+	  </a>
+    </li>
+    <li>
+	  <a href="img/2_b.jpg" title="Image 2">
+		<img src="img/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" longdesc="#image2-desc" />
+	  </a>
+    </li>
+    <li>
+	  <a href="img/3_b.jpg" title="Image 3">
+		<img src="img/3_s.jpg" alt="Image 3" />
+	  </a>
+    </li>
+    <li>
+	  <a href="img/4_b.jpg" title="Image 4">
+		<img src="img/4_s.jpg" alt="Image 4" />
+	  </a>
+    </li>
+  </ul>	
+</div>
+
+
+ +
+

Hidden image gallery

+
+

Example

+
+ +
+
+ +
+

Coding

+ 
<div class="wb-lightbox lb-hidden-gallery inline-list">
+  <ul>
+    <li>
+      <a href="img/1_b.jpg" title="Image 1">
+        <img src="img/1_s.jpg" alt="Image 1" />
+      </a>
+    </li>
+    <li>
+      <a href="img/2_b.jpg" title="Image 1">
+        <img src="img/2_s.jpg" alt="Image 1" aria-describedby="image2-desc" longdesc="#image2-desc" />
+      </a>
+    </li>
+    <li>
+	  <a href="img/3_b.jpg" title="Image 3">
+		<img src="img/3_s.jpg" alt="Image 3" />
+	  </a>
+    </li>
+    <li>
+	  <a href="img/4_b.jpg" title="Image 4">
+		<img src="img/4_s.jpg" alt="Image 4" />
+	  </a>
+    </li>
+  </ul>	
+</div>
+
+
+ +
+

Alternative image title (v3.1)

+
+

Example

+
+ +
+ +

Image 1: Lorem ipsum consectetur adipiscing elit.

+

Image 2: Nulla mollis dolor leo. Quisque laoreet tincidunt mollis. Duis posuere scelerisque lectus quis lobortis.

+
+ +
+

Coding

+ 
<div class="wb-lightbox lb-gallery inline-list">
+  <ul>
+    <li>
+	  <a href="img/1_b.jpg" title="Image 1" data-title="image_1_b">
+		<img src="img/1_s.jpg" alt="Image 1" />
+	  </a>
+    </li>
+    <li>
+	  <a href="img/2_b.jpg" title="Image 2" data-title="image_2_b">
+		<img src="img/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" longdesc="#image2-desc" />
+	  </a>
+    </li>
+  </ul>	
+</div>
+<p id="element_id">Title of the image</p>
+
+
+
+
diff --git a/src/plugins/lightbox/lightbox.js b/src/plugins/lightbox/lightbox.js index 62355a60384..3c331762274 100644 --- a/src/plugins/lightbox/lightbox.js +++ b/src/plugins/lightbox/lightbox.js @@ -46,25 +46,49 @@ licence : wet-boew.github.io/wet-boew/License-en.html / window.Modernizr.load({ load: "site!deps/jquery.magnific-popup" + modeJS, complete: function() { + var settings = {}, + children; + // Set the dependency i18nText only once if ( !extendedGlobal ) { $.extend( true, $.magnificPopup.defaults, i18nText ); extendedGlobal = true; } - if ( $elm.hasClass( "popup-gallery" ) ) { - $elm.magnificPopup( { - type: "image", - delegate: "a", - gallery: { + // TODO: Add support for long description, aria-describedby and alternate title + // TODO: How to support other options available in Magnific Popup + // TODO: Ensure there is alt text on the resultant image + // TODO: Fix AJAX support + // TODO: Add WAI-ARIA and proper keyboard handling + // TODO: Add swipe support + + // Is the element a single lightbox item or a group? + // TODO: Add support for multiple non-gallery items of possibly mixed content + if ( $elm[ 0 ].nodeName.toLowerCase() !== "a" ) { + settings.delegate = "a"; + settings.type = "image"; + + // Is the element a gallery? + // TODO: Add support for ajax, inline and iframe galleries (also try to figure out mixed content galleries) + if ( $elm.hasClass( "lb-gallery" ) || $elm.hasClass( "lb-hidden-gallery" ) ) { + settings.gallery = { enabled: true, - navigateByImgClick: true - } - } ); + }; + } + + $elm.magnificPopup( settings ); } else { - $elm.magnificPopup( { - type: "image" - } ); + children = $elm.children(); + if ( children.length !== 0 && children[ 0 ].nodeName.toLowerCase() === "img" ) { + settings.type = "image"; + } else if ( $elm.attr( "href" ).slice( 0, 1 ) === "#" ) { + settings.type = "inline"; + } else if ( $elm.hasClass( "lb-iframe" ) ) { + settings.type = "iframe"; + } else { + settings.type = "ajax"; + } + $elm.magnificPopup( settings ); } } });