ekko-lightbox friendly img export

[Mikhail Titov]

It would be nice to have a provision for lightbox image gallery thing. At least like having clickable image thumbnails that would pop into twbs modal full size image browser for all images on the page.
One show stopper (for me) is that we need to wrap our figure tag with a having href attribute pointing to an image but we have contents blob most of the time..see update below
Perhaps javascript can come to rescue as a workaround.

[Mikhail Titov]

The easiest JS workaround would be

$(function() {
...
  $("figure").wrap(function() {
    return "<a data-gallery=\"all\" data-title=\"" +
      $(this).find("figcaption").text() +
      "\" data-toggle=\"lightbox\" href=\"" +
      $( this ).find("img").attr("src") +
      "\"></a>";
  });
});

$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
  event.preventDefault();
  $(this).ekkoLightbox();
});

I'm not so sure if we want to really wrap everything.... perhaps it would be enough to set data-title attribute on img and embed ekkoLightbox() call directly into HTML.

Update
I'm not a JS guy, but this seems to look more concise

$(function() {
  $("figure").each(function() {
    var img = $(this).find("img");
    var cap = $(this).find("figcaption").text();
    img.attr("data-gallery", "all")
      .data("title", cap)
      .attr('data-remote', img.attr('src'))
      .click(function() {
        $(this).ekkoLightbox();
      });
  });
});

combined with CSS

figure > p > img {
    max-height: 200px;
    cursor: pointer;
}

[Mikhail Titov]

Something like this is already good. One has to add ekko-lightbox css & standard js code

--- ox-twbs.el.orig 2016-01-04 14:17:47.770040100 -0600
+++ ox-twbs.el  2016-01-29 15:54:50.437073700 -0600
@@ -133,6 +133,7 @@
     (:html-table-attributes nil nil org-twbs-table-default-attributes)
     (:html-table-row-tags nil nil org-twbs-table-row-tags)
     (:html-inline-images nil nil org-twbs-inline-images)
+    (:html-lightbox-enabled nil nil org-twbs-lightbox-enabled)
     ;; Redefine regular options.
     (:creator "CREATOR" nil org-twbs-creator-string)
     (:with-latex nil "tex" org-twbs-with-latex)
@@ -538,6 +539,13 @@

 ;;;; Links :: Inline images

+(defcustom org-twbs-lightbox-enabled nil
+  "Add provisions for ekko-lightbox gallery out of page images"
+  :group 'org-export-twbs
+  :version "24.4"
+  :package-version '(Org . "8.1")
+  :type 'boolean)
+
 (defcustom org-twbs-inline-images t
   "Non-nil means inline images into exported HTML pages.
 This is done using an <img> tag.  When nil, an anchor with href is used to
@@ -1052,12 +1060,13 @@
           (if (not (org-string-nw-p caption)) ""
             (format "\n<figcaption>%s</figcaption>" caption))))

-(defun org-twbs--format-image (source attributes info)
+(defun org-twbs--format-image (source attributes info &optional title)
   "Return \"img\" tag with given SOURCE and ATTRIBUTES.
 SOURCE is a string specifying the location of the image.
 ATTRIBUTES is a plist, as returned by
-`org-export-read-attribute'.  INFO is a plist used as
-a communication channel."
+`org-export-read-attribute'.  INFO is a plist used as a
+communication channel. Optional TITLE sets data-title attribute
+to be used with ekko-lightbox."
   (org-twbs-close-tag
    "img"
    (org-twbs--make-attribute-string
@@ -1068,6 +1077,12 @@
                     (org-twbs-encode-plain-text
                      (org-find-text-property-in-string 'org-latex-src source))
                   (file-name-nondirectory source)))
+     (if (plist-get info :html-lightbox-enabled)
+         (list :data-remote source
+               :data-toggle "lightbox"
+               :data-gallery "all"
+               :data-title title
+               ))
      attributes))
    info))

@@ -2415,7 +2430,10 @@
      ;; Image file.
      ((and org-twbs-inline-images
            (org-export-inline-image-p link org-twbs-inline-image-rules))
-      (org-twbs--format-image path attributes-plist info))
+      (org-twbs--format-image path attributes-plist info
+                              (org-export-data
+                               (org-export-get-caption (org-export-get-parent-element link))
+                               info)))
      ;; Radio target: Transcode target's contents and use them as
      ;; link's description.
      ((string= type "radio")