v2.11.3 Lightboxで、モーダルウィンドウに表示した画像にSNSボタンを設置する～ Twitter, Facebook, Line など～

表ソーシャルボタン設置対応表（注）X：ここでは未対応　△：モーダルウィンドウ上に設置不可
SNSボタンの使用	Twitter	Facebook	Line	google	hatena	pocket	mixi	tumblr	GREE	pinterest
公式ボタン	△	いいね！カウンタ有	X	共有カウンタ有	共有カウンタ有	X	チェック	X	いいね！カウンタ無	共有
オリジナルデザイン画像ボタン（カウンタ無）	share(共有）	共有	共有	共有	共有	共有	チェック	共有	共有	共有
SNSボタンの使用	feedly	inoreader	RSS	ameba	Evernote
公式ボタン	X	X	X	X	△
オリジナルデザイン画像ボタン（カウンタ無）	RSS	RSS	RSS	共有	共有

v2.8.1におけるjQuery,lightbox.css,lightbox.jsファイルの記述の組み合わせ（○：使用する）
項　目	HEADタグ内に記述	/BODYタグ直前に記述
Googleのjquery.min.js	lightbox.css	lightbox.jsまたは lightbox.min.js	lightbox-plus-jquery.jsまたは lightbox-plus-jquery.min.js
jQuery記述方法１	○	○	○
jQuery記述方法２		○		○
備　考	※ jQuery記述方法１：Google Ajax API CDNからjQueryをロードできる環境にある場合 ※ jQuery記述方法２：Google Ajax API CDNからjQueryをロードできない環境にある場合

項　目	HEADタグ内に記述	/BODYタグ直前に記述
Googleのjquery.min.js	lightbox.css	lightbox.jsまたは lightbox.min.js	lightbox-plus-jquery.jsまたは lightbox-plus-jquery.min.js
jQuery記述方法１	○	○	○
jQuery記述方法２		○		○
備　考	※ Lightbox2オプションは、.jsファイルの後に記述する ※ jQuery記述方法１：Google Ajax API CDNからjQueryをロードできる環境にある場合 ※ jQuery記述方法２：Google Ajax API CDNからjQueryをロードできない環境にある場合

Lightboxページの背景の色（デフォルト：白）を変えるなど、Lightboxのカスタマイズ方法を述べます。
下の画像は、Lightbox表示画面（モーダルウィンドウ）の構造を示したものです。(1)～(9)の名称はモーダルウィンドウを構成するDIVブロックのCLASS名です。

lightbox.cssのソースコード（デフォルト）
lightbox.jsのソースコード（デフォルト）

body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
  outline: none;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;

  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/*!
 * Lightbox v2.11.3
 * by Lokesh Dhakar
 *
 * More info:
 * http://lokeshdhakar.com/projects/lightbox2/
 *
 * Copyright Lokesh Dhakar
 * Released under the MIT license
 * https://github.com/lokesh/lightbox2/blob/master/LICENSE
 *
 * @preserve
 */

// Uses Node, AMD or browser globals to create a module.
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory(require('jquery'));
    } else {
        // Browser globals (root is window)
        root.lightbox = factory(root.jQuery);
    }
}(this, function ($) {

  function Lightbox(options) {
    this.album = [];
    this.currentImageIndex = void 0;
    this.init();

    // options
    this.options = $.extend({}, this.constructor.defaults);
    this.option(options);
  }

  // Descriptions of all options available on the demo site:
  // http://lokeshdhakar.com/projects/lightbox2/index.html#options
  Lightbox.defaults = {
    albumLabel: 'Image %1 of %2',
    alwaysShowNavOnTouchDevices: false,
    fadeDuration: 600,
    fitImagesInViewport: true,
    imageFadeDuration: 600,
    // maxWidth: 800,
    // maxHeight: 600,
    positionFromTop: 50,
    resizeDuration: 700,
    showImageNumberLabel: true,
    wrapAround: false,
    disableScrolling: false,
    /*
    Sanitize Title
    If the caption data is trusted, for example you are hardcoding it in, then leave this to false.
    This will free you to add html tags, such as links, in the caption.

    If the caption data is user submitted or from some other untrusted source, then set this to true
    to prevent xss and other injection attacks.
     */
    sanitizeTitle: false
  };

  Lightbox.prototype.option = function(options) {
    $.extend(this.options, options);
  };

  Lightbox.prototype.imageCountLabel = function(currentImageNum, totalImages) {
    return this.options.albumLabel.replace(/%1/g, currentImageNum).replace(/%2/g, totalImages);
  };

  Lightbox.prototype.init = function() {
    var self = this;
    // Both enable and build methods require the body tag to be in the DOM.
    $(document).ready(function() {
      self.enable();
      self.build();
    });
  };

  // Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
  // that contain 'lightbox'. When these are clicked, start lightbox.
  Lightbox.prototype.enable = function() {
    var self = this;
    $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
      self.start($(event.currentTarget));
      return false;
    });
  };

  // Build html for the lightbox and the overlay.
  // Attach event handlers to the new DOM elements. click click click
  Lightbox.prototype.build = function() {
    if ($('#lightbox').length > 0) {
        return;
    }

    var self = this;

    // The two root notes generated, #lightboxOverlay and #lightbox are given
    // tabindex attrs so they are focusable. We attach our keyboard event
    // listeners to these two elements, and not the document. Clicking anywhere
    // while Lightbox is opened will keep the focus on or inside one of these
    // two elements.
    //
    // We do this so we can prevent propogation of the Esc keypress when
    // Lightbox is open. This prevents it from intefering with other components
    // on the page below.
    //
    // Github issue: https://github.com/lokesh/lightbox2/issues/663
    $('<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div><div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/><div class="lb-nav"><a class="lb-prev" aria-label="Previous image" href="" ></a><a class="lb-next" aria-label="Next image" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));

    // Cache jQuery objects
    this.$lightbox       = $('#lightbox');
    this.$overlay        = $('#lightboxOverlay');
    this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
    this.$container      = this.$lightbox.find('.lb-container');
    this.$image          = this.$lightbox.find('.lb-image');
    this.$nav            = this.$lightbox.find('.lb-nav');

    // Store css values for future lookup
    this.containerPadding = {
      top: parseInt(this.$container.css('padding-top'), 10),
      right: parseInt(this.$container.css('padding-right'), 10),
      bottom: parseInt(this.$container.css('padding-bottom'), 10),
      left: parseInt(this.$container.css('padding-left'), 10)
    };

    this.imageBorderWidth = {
      top: parseInt(this.$image.css('border-top-width'), 10),
      right: parseInt(this.$image.css('border-right-width'), 10),
      bottom: parseInt(this.$image.css('border-bottom-width'), 10),
      left: parseInt(this.$image.css('border-left-width'), 10)
    };

    // Attach event handlers to the newly minted DOM elements
    this.$overlay.hide().on('click', function() {
      self.end();
      return false;
    });

    this.$lightbox.hide().on('click', function(event) {
      if ($(event.target).attr('id') === 'lightbox') {
        self.end();
      }
    });

    this.$outerContainer.on('click', function(event) {
      if ($(event.target).attr('id') === 'lightbox') {
        self.end();
      }
      return false;
    });

    this.$lightbox.find('.lb-prev').on('click', function() {
      if (self.currentImageIndex === 0) {
        self.changeImage(self.album.length - 1);
      } else {
        self.changeImage(self.currentImageIndex - 1);
      }
      return false;
    });

    this.$lightbox.find('.lb-next').on('click', function() {
      if (self.currentImageIndex === self.album.length - 1) {
        self.changeImage(0);
      } else {
        self.changeImage(self.currentImageIndex + 1);
      }
      return false;
    });

    /*
      Show context menu for image on right-click

      There is a div containing the navigation that spans the entire image and lives above of it. If
      you right-click, you are right clicking this div and not the image. This prevents users from
      saving the image or using other context menu actions with the image.

      To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
      set pointer-events to none on the nav div. This is so that the upcoming right-click event on
      the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs
      we set the pointer events back to auto for the nav div so it can capture hover and left-click
      events as usual.
     */
    this.$nav.on('mousedown', function(event) {
      if (event.which === 3) {
        self.$nav.css('pointer-events', 'none');

        self.$lightbox.one('contextmenu', function() {
          setTimeout(function() {
              this.$nav.css('pointer-events', 'auto');
          }.bind(self), 0);
        });
      }
    });


    this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
      self.end();
      return false;
    });
  };

  // Show overlay and lightbox. If the image is part of a set, add siblings to album array.
  Lightbox.prototype.start = function($link) {
    var self    = this;
    var $window = $(window);

    $window.on('resize', $.proxy(this.sizeOverlay, this));

    this.sizeOverlay();

    this.album = [];
    var imageNumber = 0;

    function addToAlbum($link) {
      self.album.push({
        alt: $link.attr('data-alt'),
        link: $link.attr('href'),
        title: $link.attr('data-title') || $link.attr('title')
      });
    }

    // Support both data-lightbox attribute and rel attribute implementations
    var dataLightboxValue = $link.attr('data-lightbox');
    var $links;

    if (dataLightboxValue) {
      $links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
      for (var i = 0; i < $links.length; i = ++i) {
        addToAlbum($($links[i]));
        if ($links[i] === $link[0]) {
          imageNumber = i;
        }
      }
    } else {
      if ($link.attr('rel') === 'lightbox') {
        // If image is not part of a set
        addToAlbum($link);
      } else {
        // If image is part of a set
        $links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
        for (var j = 0; j < $links.length; j = ++j) {
          addToAlbum($($links[j]));
          if ($links[j] === $link[0]) {
            imageNumber = j;
          }
        }
      }
    }

    // Position Lightbox
    var top  = $window.scrollTop() + this.options.positionFromTop;
    var left = $window.scrollLeft();
    this.$lightbox.css({
      top: top + 'px',
      left: left + 'px'
    }).fadeIn(this.options.fadeDuration);

    // Disable scrolling of the page while open
    if (this.options.disableScrolling) {
      $('body').addClass('lb-disable-scrolling');
    }

    this.changeImage(imageNumber);
  };

  // Hide most UI elements in preparation for the animated resizing of the lightbox.
  Lightbox.prototype.changeImage = function(imageNumber) {
    var self = this;
    var filename = this.album[imageNumber].link;
    var filetype = filename.split('.').slice(-1)[0];
    var $image = this.$lightbox.find('.lb-image');

    // Disable keyboard nav during transitions
    this.disableKeyboardNav();

    // Show loading state
    this.$overlay.fadeIn(this.options.fadeDuration);
    $('.lb-loader').fadeIn('slow');
    this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
    this.$outerContainer.addClass('animating');

    // When image to show is preloaded, we send the width and height to sizeContainer()
    var preloader = new Image();
    preloader.onload = function() {
      var $preloader;
      var imageHeight;
      var imageWidth;
      var maxImageHeight;
      var maxImageWidth;
      var windowHeight;
      var windowWidth;

      $image.attr({
        'alt': self.album[imageNumber].alt,
        'src': filename
      });

      $preloader = $(preloader);

      $image.width(preloader.width);
      $image.height(preloader.height);
      windowWidth = $(window).width();
      windowHeight = $(window).height();

      // Calculate the max image dimensions for the current viewport.
      // Take into account the border around the image and an additional 10px gutter on each side.
      maxImageWidth  = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
      maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - self.options.positionFromTop - 70;

      /*
      Since many SVGs have small intrinsic dimensions, but they support scaling
      up without quality loss because of their vector format, max out their
      size.
      */
      if (filetype === 'svg') {
        $image.width(maxImageWidth);
        $image.height(maxImageHeight);
      }

      // Fit image inside the viewport.
      if (self.options.fitImagesInViewport) {

        // Check if image size is larger then maxWidth|maxHeight in settings
        if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
          maxImageWidth = self.options.maxWidth;
        }
        if (self.options.maxHeight && self.options.maxHeight < maxImageHeight) {
          maxImageHeight = self.options.maxHeight;
        }

      } else {
        maxImageWidth = self.options.maxWidth || preloader.width || maxImageWidth;
        maxImageHeight = self.options.maxHeight || preloader.height || maxImageHeight;
      }

      // Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
      // option than we need to size down while maintaining the aspect ratio.
      if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
        if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
          imageWidth  = maxImageWidth;
          imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
          $image.width(imageWidth);
          $image.height(imageHeight);
        } else {
          imageHeight = maxImageHeight;
          imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
          $image.width(imageWidth);
          $image.height(imageHeight);
        }
      }
      self.sizeContainer($image.width(), $image.height());
    };

    // Preload image before showing
    preloader.src = this.album[imageNumber].link;
    this.currentImageIndex = imageNumber;
  };

  // Stretch overlay to fit the viewport
  Lightbox.prototype.sizeOverlay = function() {
    var self = this;
    /*
    We use a setTimeout 0 to pause JS execution and let the rendering catch-up.
    Why do this? If the `disableScrolling` option is set to true, a class is added to the body
    tag that disables scrolling and hides the scrollbar. We want to make sure the scrollbar is
    hidden before we measure the document width, as the presence of the scrollbar will affect the
    number.
    */
    setTimeout(function() {
      self.$overlay
        .width($(document).width())
        .height($(document).height());

    }, 0);
  };

  // Animate the size of the lightbox to fit the image we are showing
  // This method also shows the the image.
  Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
    var self = this;

    var oldWidth  = this.$outerContainer.outerWidth();
    var oldHeight = this.$outerContainer.outerHeight();
    var newWidth  = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
    var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;

    function postResize() {
      self.$lightbox.find('.lb-dataContainer').width(newWidth);
      self.$lightbox.find('.lb-prevLink').height(newHeight);
      self.$lightbox.find('.lb-nextLink').height(newHeight);

      // Set focus on one of the two root nodes so keyboard events are captured.
      self.$overlay.focus();

      self.showImage();
    }

    if (oldWidth !== newWidth || oldHeight !== newHeight) {
      this.$outerContainer.animate({
        width: newWidth,
        height: newHeight
      }, this.options.resizeDuration, 'swing', function() {
        postResize();
      });
    } else {
      postResize();
    }
  };

  // Display the image and its details and begin preload neighboring images.
  Lightbox.prototype.showImage = function() {
    this.$lightbox.find('.lb-loader').stop(true).hide();
    this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);

    this.updateNav();
    this.updateDetails();
    this.preloadNeighboringImages();
    this.enableKeyboardNav();
  };

  // Display previous and next navigation if appropriate.
  Lightbox.prototype.updateNav = function() {
    // Check to see if the browser supports touch events. If so, we take the conservative approach
    // and assume that mouse hover events are not supported and always show prev/next navigation
    // arrows in image sets.
    var alwaysShowNav = false;
    try {
      document.createEvent('TouchEvent');
      alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices) ? true : false;
    } catch (e) {}

    this.$lightbox.find('.lb-nav').show();

    if (this.album.length > 1) {
      if (this.options.wrapAround) {
        if (alwaysShowNav) {
          this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
        }
        this.$lightbox.find('.lb-prev, .lb-next').show();
      } else {
        if (this.currentImageIndex > 0) {
          this.$lightbox.find('.lb-prev').show();
          if (alwaysShowNav) {
            this.$lightbox.find('.lb-prev').css('opacity', '1');
          }
        }
        if (this.currentImageIndex < this.album.length - 1) {
          this.$lightbox.find('.lb-next').show();
          if (alwaysShowNav) {
            this.$lightbox.find('.lb-next').css('opacity', '1');
          }
        }
      }
    }
  };

  // Display caption, image number, and closing button.
  Lightbox.prototype.updateDetails = function() {
    var self = this;

    // Enable anchor clicks in the injected caption html.
    // Thanks Nate Wright for the fix. @https://github.com/NateWr
    if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
      this.album[this.currentImageIndex].title !== '') {
      var $caption = this.$lightbox.find('.lb-caption');
      if (this.options.sanitizeTitle) {
        $caption.text(this.album[this.currentImageIndex].title);
      } else {
        $caption.html(this.album[this.currentImageIndex].title);
      }
      $caption.fadeIn('fast');
    }

    if (this.album.length > 1 && this.options.showImageNumberLabel) {
      var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
      this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
    } else {
      this.$lightbox.find('.lb-number').hide();
    }

    this.$outerContainer.removeClass('animating');

    this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
      return self.sizeOverlay();
    });
  };

  // Preload previous and next images in set.
  Lightbox.prototype.preloadNeighboringImages = function() {
    if (this.album.length > this.currentImageIndex + 1) {
      var preloadNext = new Image();
      preloadNext.src = this.album[this.currentImageIndex + 1].link;
    }
    if (this.currentImageIndex > 0) {
      var preloadPrev = new Image();
      preloadPrev.src = this.album[this.currentImageIndex - 1].link;
    }
  };

  Lightbox.prototype.enableKeyboardNav = function() {
    this.$lightbox.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
    this.$overlay.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
  };

  Lightbox.prototype.disableKeyboardNav = function() {
    this.$lightbox.off('.keyboard');
    this.$overlay.off('.keyboard');
  };

  Lightbox.prototype.keyboardAction = function(event) {
    var KEYCODE_ESC        = 27;
    var KEYCODE_LEFTARROW  = 37;
    var KEYCODE_RIGHTARROW = 39;

    var keycode = event.keyCode;
    if (keycode === KEYCODE_ESC) {
      // Prevent bubbling so as to not affect other components on the page.
      event.stopPropagation();
      this.end();
    } else if (keycode === KEYCODE_LEFTARROW) {
      if (this.currentImageIndex !== 0) {
        this.changeImage(this.currentImageIndex - 1);
      } else if (this.options.wrapAround && this.album.length > 1) {
        this.changeImage(this.album.length - 1);
      }
    } else if (keycode === KEYCODE_RIGHTARROW) {
      if (this.currentImageIndex !== this.album.length - 1) {
        this.changeImage(this.currentImageIndex + 1);
      } else if (this.options.wrapAround && this.album.length > 1) {
        this.changeImage(0);
      }
    }
  };

  // Closing time. :-(
  Lightbox.prototype.end = function() {
    this.disableKeyboardNav();
    $(window).off('resize', this.sizeOverlay);
    this.$lightbox.fadeOut(this.options.fadeDuration);
    this.$overlay.fadeOut(this.options.fadeDuration);

    if (this.options.disableScrolling) {
      $('body').removeClass('lb-disable-scrolling');
    }
  };

  return new Lightbox();
}));

▼lightboxモーダルウィンドウ上の設置例（上段：オリジナルデザイン画像ボタン下段：公式ボタン）

▼このページ（親ウィンドウ）上の設置例（上段：オリジナルデザイン画像ボタン下段：公式ボタン）

lightboxのソーシャルボタンカスタマイズ方法の手順の概略はつぎのです。

表２ソーシャルボタン事前確認項目リスト（フリーデザイン画像ボタンの場合）
No	SNS	パラメータ名	現在の設定値（仮の値）	ボタンの種類	取得方法など
1	mixi	k	mixi999	公式ボタン非公式ボタン	≫mixiサイトでユーザ登録してmixiチェックキーを取得
2	RSS	RSSフィードのURL	http://rssblog.ameba.jp/ske48official/rss20.xml	非公式ボタン	≫RSSフィードのURLの取得方法
3	LINE	client_id	1341209950	非公式ボタン	≫LINEのclient_id,stateパラメータの取得方法
4	state	1409338029	非公式ボタン
5	Pinterest	media	http://urbanqee.com/webutil/photo/fancybox/demo/people/girl-pixabay-03.jpg	公式ボタン非公式ボタン	好みのアイキャッチ画像（サムネイル）のURL

HTMLコード（デモページ）－（ソースコードのコピーは、コード画面上をダブルクリックしてください）

デモHTML全体（lightbox-sns-button-demo0.html）
ソーシャルボタン設置場所（lightbox.js 114行目）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"> <!-- HTMLソースコード utf-8 必須 -->
<meta property="og:title" content="Lightboxv2.11.3のスライド画面にソーシャルボタンを設置する（デモ）"> <!-- 必須 -->
<meta property="og:image" content="http://urbanqee.com/webutil/photo/images/lightbox271-dl-image.jpg"> <!-- 推奨 -->
<meta property="og:url" content="http://urbanqee.com/webutil/photo/lightbox2113/lightbox-sns-button-demo0.html"> <!-- 推奨 -->
<meta property="og:type" content="article">  <!-- 推奨 article：記事 -->
<!--Twitter OGP -->
<meta name="twitter:card" content="summary_large_image">   <!-- 必須 summary(通常）,summary_large_image,photo,gallery,vappなど  -->
<meta name="twitter:site" content="http://urbanqee.com/webutil/photo/lightbox2113/lightbox-sns-button-demo0.html">        <!-- 推奨 -->
<meta name="twitter:image" content="http://urbanqee.com/webutil/photo/fancybox/demo/people/girl-pixabay-03.jpg"> 
<meta name="twitter:title" content="Lightboxv2.11.3のスライド画面（モーダルウインド）上にソーシャルボタンを設置する（デモ）">     <!-- 推奨 -->
<meta name="twitter:description" content="１５SNS/RSSサイト、フリーデザイン画像ボタンが１５、公式ボタンが８種類"> <!-- 推奨 -->

<title>Lightboxv2.11.3のスライド画面（モーダルウインド）上にソーシャルボタンを設置する（デモ）</title>

<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!-- lightbox v2.11.3 CSS -->
<link rel="stylesheet" href="css/lightbox.min.css">

<!--  SNSボタン用 CSS ボーダルウインド用----------------->
<style>
   div.free-button, div.official-button{
    width:900px; margin: 0 auto; border:1px solid #dcdcdc;
    border-radius: 5px;          /* CSS3草案 */  
    -webkit-border-radius: 5px;  /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;     /* Firefox用 */  
   } 
  .free-button div{ 
    float: left; margin: 2px; display: block;
    vertical-align: middle; cursor: pointer  
   }
  .official-button div{ 
    float: left; margin: 2px; display: block;
    vertical-align: middle; widtn:80px   
   }
  .free-button:after, .official-button:after { content: ""; clear: both; display: block; }

  /*             */
   div.free2-button{
    width:900px; margin: 0 auto; border:1px solid #dcdcdc;
    border-radius: 5px;          /* CSS3草案 */  
    -webkit-border-radius: 5px;  /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;     /* Firefox用 */  
   } 
  .free2-button div{ 
    float: left; margin: 2px; display: block;
    vertical-align: middle; cursor: pointer  
   }
  .free2-button:after { content: ""; clear: both; display: block; }

</style>

<style>
body{
 width:900px; margin: 0 auto;
 font: 14px 'Lucida Grande', Verdana, sans-serif;
   }
a{
  text-decoration:none; color:gray
 }
</style>
<style>
/* 吹き出し ************************/
/*  ボタンの上に置く top */
.balloon_top {
	position: relative;
	background: #fcfcfc;
	border: 1px solid gray; /*#242a2e;*/
        font-size:11px;
        text-align:center;
        margin-bottom:5px; padding:3px;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        border-radius: 5px;        
}
.balloon_top:after, .balloon_top:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloon_top:after {
	border-color: rgba(252, 252, 252, 0);
	border-top-color: #fcfcfc;
	border-width: 5px;
	margin-left: -5px;
}
.balloon_top:before {
	border-color: rgba(36, 42, 46, 0);
	border-top-color: gray; /*#242a2e;*/
	border-width: 6px;
	margin-left: -6px;
}

/* ボタンの右に置く right */
.balloon_right {
	position: relative;
	background: #ffffff;
	border: 1px solid gray; /*#0a0c0d;*/
        font-size:11px;
        text-align:center;
        margin-left:5px; padding:3px; margin-top:30px;
        font-family: arial, "ＭＳ ゴシック",sans-serif;
        border-radius: 5px;
}
.balloon_right:after, .balloon_right:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloon_right:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #ffffff;
	border-width: 3px; /*5px;*/
	margin-top: -3px; /*5px;*/
}
.balloon_right:before {
	border-color: rgba(10, 12, 13, 0);
	border-right-color: gray; /*#0a0c0d;*/
	border-width: 4px; /*6px;*/
	margin-top: -4px;  /*6px;*/
}
/*     */

</style>
 <!-- 吹き出し  Include jQuery and PowerTip -->
 <script type="text/javascript" src="fukidashi/jquery.powertip.js"></script>
 <link rel="stylesheet" type="text/css" href="fukidashi/css/jquery.powertip.css" />
<!-- Twitter button widgets 
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
-->
</head>
<body>
<h2 style="text-align:left">Lightbox v2.11.3のスライド画面にソーシャルボタンを設置する方法（デモ）</h2>
<h3>▼ Lightbox2 モーダルウィンド上に設置したソーシャルボタン → 画像をクリックしてください！ </h3>
<p>
       <a href="http://urbanqee.com/webutil/photo/fotorama/images/m/pixabay12-675x450.jpg" data-lightbox="lightbox[group1]" data-title="孔雀"><img  ID="img11" src="http://urbanqee.com/webutil/photo/fotorama/images/m/pixabay12-675x450.jpg" width="150" height="112" style="border:3px solid gold" alt="1　風景" border=0 onmouseover="document.all.img11.style.border='3px solid #ffffff'" onmouseout="document.all.img11.style.border='3px solid gold'"></a>
       <a href="http://urbanqee.com/webutil/photo/fotorama/images/m/pixabay18-675x450.jpg" data-lightbox="lightbox[group1]" data-title="蝶々"><img   ID="img12" src="http://urbanqee.com/webutil/photo/fotorama/images/m/pixabay18-675x450.jpg" width="150" height="112" alt="2　風景"  style="border:3px solid gold" border=0 onmouseover="document.all.img12.style.border='3px solid #ffffff'" onmouseout="document.all.img12.style.border='3px solid gold'"></a>
</p>
<h3>▼ このページに設置したソーシャルボタン</h3>
<p><b>・デザインボタン（プラグイン未使用）</b></p>
          <DIV class="free-button">
             <div class="f-twitter-share"></div>
             <div class="f-facebook-share"></div>
             <div class="f-line-it"></div>
             <div class="f-google-plus1"></div>
             <div class="f-hatena-bookmark"></div>
             <div class="f-pocket-post"></div>
             <div class="f-mixi-check"></div>
             <div class="f-tumblr-post"></div>
             <div class="f-gree-share"></div>
             <div class="f-pinterest-share"></div>
             <div class="f-feedly-rss"></div>
             <div class="f-inoreader-rss"></div>
             <div class="f-rss-rss"></div>
             <div class="f-ameba-share"></a></div>
             <div class="f-evernote-clip"></a></div><!-- 15サイト15ボタン -->
          </DIV>
<p><b>・公式ボタン（jQuery.socialbuttonプラグイン使用）</b></p>
          <DIV class="official-button">
             <div class="o-twittershare"></div>
             <div class="o-facebookshare"></div> <!-- NG -->
             <div class="o-facebooklike"></div>
             <div class="o-googleplusone"></div>
             <div class="o-hatena"></div>
             <div class="o-mixicheck"></div>
             <div class="o-mixilike"></div> <!-- NG -->
             <div class="o-greesf"></div>
             <div class="o-pinterest"></div>
             <div class="o-evernote"></div> 
          </DIV><!-- 10サイト 10ボタン モーダルウィンド上で、更に Twitter, evernote NG 計 ４ボタン-->
           </DIV>
<h3>▼ デザインボタンのバリエーション（プラグイン未使用 - Facebookカウント付き）</h3>
          <DIV class="free2-button">
             <div class="f2-twitter-share"></div>
             <div class="f2-facebook-share"></div>
             <div class="f2-hatena-bookmark"></div>
             <div class="f2-pocket-post"></div>
             <div class="f2-tumblr-post"></div>
          </DIV>


<!-- Lightbox2 オプション設定（任意）<script src="js/lightbox-sns.js"></script>  ------------------------------->
<script src="js/lightbox.js"></script>
 <!-- lightbox オプション設定 -->
<script>
    lightbox.option({
      'alwaysShowNavOnTouchDevices': true,
      'resizeDuration': 700,
      'wrapAround': true,
      'albumLabel': 'Photo %1 / %2',
      'positionFromTop': 30
    })
</script>
 <!-- ボタン設置DIVタグ一括設定 → lightbox.jsファイル96行目のクラス名lb-dataContainerのDIV要素の後に追加</DIV> 
           +  '<div><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + encodeURIComponent(this.href) + '" title="Twitter">Tweet</a></div>'
           +  '<div class="fb-like" data-href="' + document.URL + '" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false">FACEBOOK</div>'
-->
<script>
$(function() {
 var buttonTag = '<DIV class="free-button">'
           +  '<div class="f-twitter-share"></div>'
           +  '<div class="f-facebook-share"></div>'
           +  '<div class="f-line-it"></div>'
           +  '<div class="f-google-plus1"></div>'
           +  '<div class="f-hatena-bookmark"></div>'
           +  '<div class="f-pocket-post"></div>'
           +  '<div class="f-mixi-check"></div>'
           +  '<div class="f-tumblr-post"></div>'
           +  '<div class="f-gree-share"></div>'
           +  '<div class="f-pinterest-share"></div>'
           +  '<div class="f-feedly-rss"></div>'
           +  '<div class="f-inoreader-rss"></div>'
           +  '<div class="f-rss-rss"></div>'
           +  '<div class="f-ameba-share"></a></div>'
           +  '<div class="f-evernote-clip"></a></div>'
           +  '</DIV>'
           +  '<DIV class="official-button">'
           +  '<div><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + encodeURIComponent(document.URL) + '" title="Twitter">Tweet</a></div>'
           +  '<div class="fb-share-button" data-href="' + document.URL + '" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&src=sdkpreparse">シェア</a></div>'
           +  '<div class="o-twittershare"></div>'
           +  '<div class="o-facebookshare"></div>'
           +  '<div class="o-facebooklike"></div>'
           +  '<div class="o-googleplusone"></div>'
           +  ' <div class="o-hatena"></div>'
           +  '<div class="o-mixicheck"></div>'
           +  '<div class="o-mixilike"></div>'
           +  '<div class="o-greesf"></div>'
           +  '<div class="o-pinterest"></div>'
           +  '<div class="o-evernote"></div>' 
           +  '</DIV>'
           +  '</DIV>';
  $('.lb-dataContainer').after(buttonTag);
 });
</script>
<!-- 好きなボタン画像でソーシャルボタン設定  オリジナルデザイン画像ボタン --------------------->
<script>
$(function(){
//* ソーシャルボタン共通設定 jQuery *//
  //
 var shareTitle = encodeURIComponent($('title').html());         //このページのタイトル
 var shareTitle2 = encodeURIComponent(shareTitle);               //再URLエンコード～LINE、Tumblr、Pinterest
 var shareUrl = encodeURIComponent(document.URL);                //このページのURL
 var shareUrl2 = encodeURIComponent(shareUrl);                   //再URLエンコード～LINE、Tumblr、Pinterest
 var shareAmeba = encodeURIComponent($("a.ameba2").html());      //Ameba 共有テキスト（HTMLタグ可）

 // 以下の７項目は値を入力してください
 var mixi_k = 'mixi999';                                          // 1.mixiキーを入力してください！ 例；k=0033257f963abb6e88b20b7671fb2fbfa5d31125
 var rss_Url = 'http://rssblog.ameba.jp/ske48official/rss20.xml'; // 2. RSSフィードのURLを入力してください！
 var line_clientid = '1341209950';                                // 3. LINE lient_idを入力してください！ 例：client_id=1341209950
 var line_state = '1409338029';                                   // 4. LINE stateを入力してください！    例：    state=1127447607
 var pinterest_media = encodeURIComponent(encodeURIComponent('http://urbanqee.com/webutil/photo/fancybox/demo/people/girl-pixabay-03.jpg')); 
                                                                  // 5. ↑ pinterest mediaのURL（サムネール画像など）を入力してください！2重エンコード
 var pocket_ct = '';                                              // 6. pocket ct を入力してください！  例： ct=506a7efccccb01b79cd7308100c66bf0056febce
 var pocket_ctn = '';                                             // 7. pocket ctn を入力してください！ 例：ctn=8b2032c79e2f4b35e7b48146813e08bfa4d9b3d6

 var rssUrl = encodeURIComponent( rss_Url );                      //RSSフィードURLエンコード feedly,inoreader

 var tag = '<a><img class=fukidashi></a>';
 $('.free-button div').html(tag);
 $('.free2-button div').html(tag);
//バリエーション
 var img1 = {
        "twitter": "../../sns/images/socialicons-type1/Twitter.jpg", 
        "facebook": "../../sns/images/socialicons-type1/Facebook.jpg", 
        "hatena": "../../sns/images/socialicons-type1/Hatebu.jpg",
        "pocket": "../../sns/images/socialicons-type1/Pocket.jpg",
        "tumblr": "../../sns/images/socialicons-type1/Tumblr.jpg",
          }

 var img2 = {
        "twitter": "../../sns/images/socialicons-type3/Twitter.png", 
        "facebook": "../../sns/images/socialicons-type3/Facebook.png",
        "hatena": "../../sns/images/socialicons-type3/Hatebu.png",
        "pocket": "../../sns/images/socialicons-type3/Pocket.png",
        "tumblr": "../../sns/images/socialicons-type3/Tumblr.png",
          }

//* ソーシャルボタン個別設定 jQuery *//

 //twitter shere - (1)
 $('.f-twitter-share a').attr({ "href": "http://twitter.com/share?url="+ shareUrl + "&text=" + shareTitle , "class": "twitter-share-button1" });
 $('.f-twitter-share img').attr({ 'src': 'images/Twitter.png', 'title': 'このページの情報を Twitter で共有する', 'width': '25', 'height': '25' });

 $('.f2-twitter-share a').attr({ "href": "http://twitter.com/share?url="+ shareUrl + "&text=" + shareTitle , "class": "twitter-share-button1" });
 $('.f2-twitter-share img').attr({ 'src': img2["twitter"], 'title': 'このページの情報を Twitter で共有する', 'width': '64', 'height': '64',
     'onmouseover': 'this.src="' + img1["twitter"] + '"', 'onmouseout': 'this.src="' + img2["twitter"] + '"'  });

 //$('.f-twitter-share').attr('id', 'b1'); class="twitter-share-button"
 //$('#b1').html(tag);
 //$('#b1 a').attr("href", "http://twitter.com/share?url="+ shareUrl + "&text=" + shareTitle);
 //$('#b1 img').attr({ 'src': 'images/Twitter.png', 'title': 'このページの情報を Twitter で共有するx', 'width': '25', 'height': '25' });

 //facebook shere - (2)
 $('.f-facebook-share a').attr("href", "http://www.facebook.com/sharer.php?u="+ shareUrl +"&t=" + shareTitle);
 $('.f-facebook-share img').attr({ 'src': 'images/Facebook.png', 'title': 'このページの情報を Facebook で共有する', 'width': '25', 'height': '25' });

 $('.f2-facebook-share a').attr("href", "http://www.facebook.com/sharer.php?u="+ shareUrl +"&t=" + shareTitle);
 $('.f2-facebook-share img').attr({ 'src': img2["facebook"], 'title': 'このページの情報を Facebook で共有する', 'width': '64', 'height': '64',
     'onmouseover': 'this.src="' + img1["facebook"] + '"', 'onmouseout': 'this.src="' + img2["facebook"] + '"'  });
 buttoncountSet("http://urbanqee.com/doga/dl-cur/youtube-video_downloader.php","facebook","top","64","64",".f2-facebook-share");

 //LINE it! LINEに送る - (3) （注１）client_id=1341209950&state=1409338029のチェック
 $('.f-line-it a').attr("href", "https://access.line.me/dialog/oauth/weblogin?response_type=code&client_id=1341209950&state=1409338029&redirect_uri=https%3A%2F%2Ftimeline.line.me%2Fauth%3FreturnUrl%3Dhttps%253A%252F%252Ftimeline.line.me%252Fsocial-plugin%252Fshare%253Furl%253D" + shareUrl2);
 $('.f-line-it img').attr({ 'src': 'images/line-share-d.png', 'title': 'このページの情報を LINE で共有する', 'width': '25', 'height': '25' });
 //google+1 - (4)
 $('.f-google-plus1 a').attr("href", "https://plus.google.com/share?url=" + shareUrl);
 $('.f-google-plus1 img').attr({ 'src': 'images/google_plus.png', 'title': 'このページの情報を Google+ で共有する', 'width': '25', 'height': '25' });
 //hatena はてなブックマーク - (5)
 $('.f-hatena-bookmark a').attr("href", "http://b.hatena.ne.jp/add?mode=confirm&url=" + shareUrl + "&title=" + shareTitle);
 $('.f-hatena-bookmark img').attr({ 'src': 'images/hatena-bookmark.png', 'title': 'このページの情報を はてなブックマーク に追加する', 'width': '25', 'height': '25' });

 $('.f2-hatena-bookmark a').attr("href", "http://b.hatena.ne.jp/add?mode=confirm&url=" + shareUrl + "&title=" + shareTitle);
 $('.f2-hatena-bookmark img').attr({ 'src': img2["hatena"], 'title': 'このページの情報を はてなブックマーク に追加する', 'width': '64', 'height': '64',
    'onmouseover': 'this.src="' + img1["hatena"] + '"', 'onmouseout': 'this.src="' + img2["hatena"] + '"'  });

 //pocket ポケット - (6)
 $('.f-pocket-post a').attr("href","http://getpocket.com/edit?url=" + shareUrl + "&title=" + shareTitle);
 $('.f-pocket-post img').attr({ 'src': 'images/getpocket.png', 'title': 'このページの情報を pocket で共有する', 'width': '25', 'height': '25' });

 $('.f2-pocket-post a').attr("href","http://getpocket.com/edit?url=" + shareUrl + "&title=" + shareTitle);
 $('.f2-pocket-post img').attr({ 'src': img2["pocket"], 'title': 'このページの情報を pocket で共有する', 'width': '64', 'height': '64',
    'onmouseover': 'this.src="' + img1["pocket"] + '"', 'onmouseout': 'this.src="' + img2["pocket"] + '"'  });


 //mixiチェック - (7) （注２）k=mixiチェックキー (キーは事前登録）
 $('.f-mixi-check a').attr("href","https://mixi.jp/share.pl?mode=login&u=" + shareUrl + "&k=" + "mixi_k");
 $('.f-mixi-check img').attr({ 'src': 'images/mixi-check.gif', 'title': 'このページの情報を mixi で共有する', 'width': '25', 'height': '25' });
 //tumblr-post (8)
 $('.f-tumblr-post a').attr("href","https://www.tumblr.com/login?redirect_to=https%3A%2F%2Fwww.tumblr.com%2Fwidgets%2Fshare%2Ftool%3Fposttype%3Dlink%26title%3D" + shareTitle2 + "%26content%3D" + shareUrl2 + "%26canonicalUrl%3D" + shareUrl2 + "%26shareSource%3Dtumblr_share_button%26_format%3Dhtml");
 $('.f-tumblr-post img').attr({ 'src': 'images/tumblr-logo-whiteonblue-512.png', 'title': 'このページの情報を Tumblr に登録する', 'width': '25', 'height': '25' });

 $('.f2-tumblr-post a').attr("href","https://www.tumblr.com/login?redirect_to=https%3A%2F%2Fwww.tumblr.com%2Fwidgets%2Fshare%2Ftool%3Fposttype%3Dlink%26title%3D" + shareTitle2 + "%26content%3D" + shareUrl2 + "%26canonicalUrl%3D" + shareUrl2 + "%26shareSource%3Dtumblr_share_button%26_format%3Dhtml");
 $('.f2-tumblr-post img').attr({ 'src': img2["tumblr"], 'title': 'このページの情報を Tumblr に登録する', 'width': '64', 'height': '64',
    'onmouseover': 'this.src="' + img1["tumblr"] + '"', 'onmouseout': 'this.src="' + img2["tumblr"] + '"'  });

//GREE-share (9)
 $('.f-gree-share a').attr("href","https://pid.gree.net/login/entry?ignore_sso=1&backto=http%3A%2F%2Fgree.jp%2F%3Fmode%3Dshare%26act%3Dwrite%26url%3D" + shareUrl + "%26button_type%3D3%26button_size%3D20&campaign_code=");
 $('.f-gree-share img').attr({ 'src': 'images/gree-btn_logo_32.png', 'title': 'このページの情報を GREE で共有する', 'width': '25', 'height': '25' });
 //feedly RSS（10）
 $('.f-feedly-rss a').attr("href","http://cloud.feedly.com/#subscription%2Ffeed%2F" + rssUrl);
 $('.f-feedly-rss img').attr({ 'src': 'images/feedly-follow-square-volume_2x.png', 'title': 'Feedly - RSSフィードを使用して、このページの情報を共有する', 'width': '25', 'height': '25' });
 //inoreader RSS（11）
 $('.f-inoreader-rss a').attr("href","http://www.inoreader.com/feed/" + rssUrl);
 $('.f-inoreader-rss img').attr({ 'src': 'images/inoreader.png', 'title': 'Inoreader - RSSフィードを使用して、このページの情報を共有する', 'width': '25', 'height': '25' });
 //RSS (12)
 $('.f-rss-rss a').attr("href", rss_Url);
 $('.f-rss-rss img').attr({ 'src': 'images/rss-Feed-icon_svg.png', 'title': 'RSS - RSSフィードを使用して、このページの情報を共有する', 'width': '25', 'height': '25' });
 //Ameba (13)
 $('.f-ameba-share a').attr("href","http://blog.ameba.jp/ucs/entry/srventryinsertinput.do?entry_text=" + shareTitle + "<br>" + shareUrl + "&editor_flg=1");
 $('.f-ameba-share img').attr({ 'src': 'images/ameba-icon_app.png', 'title': 'このページの情報を Amebaブログ で共有する', 'width': '25', 'height': '25' });
 //pinterest (14)
 $('.f-pinterest-share a').attr("href", "https://jp.pinterest.com/join/?next=/pin/create/button/%3Furl%3D"+ shareUrl2 + "%26description%3D" + shareTitle2 + "%26media%3D" + pinterest_media );
 $('.f-pinterest-share img').attr({ 'src': 'images/pinterest3.png', 'title': 'このページの情報を Pinterest で共有する', 'width': '25', 'height': '25' });
 //Evernote clip(15)
 $('.f-evernote-clip a').attr("href", 'https://www.evernote.com/clip.action?url=' + shareUrl + '&title=' + shareTitle);
 $('.f-evernote-clip img').attr({ 'src': 'images/evernote.png', 'title': 'このページの情報を evernote で共有する', 'width': '25', 'height': '25' });
 
 /* $('.sns-line a').attr("href", "http://line.me/R/msg/text/?" + shareUrl + "&title=" + shareTitle);*/

 $('.free-button a').click(function(){
    window.open(this.href, "social_window","width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes");
    return false;
  });
 $('.free2-button a').click(function(){
    window.open(this.href, "social_window","width=600,height=500,resizable=yes,scrollbars=yes,toolbar=yes");
    return false;
  });
});

//関数
function buttoncountSet(url2,site,pos,bw,bh,target){
        var shareurl = url2;         // ボタン設置ページのURL    buttoncountSet(url2,"facebook",count,w,h,target);  
        var site = site;             // SNS サイト名 例：facebook
        var pos = pos;               // countの設置位置 top, right
        var bwidth = bw;             // ボタン画像の横幅
        var bheight = bh;            // ボタン画像の高さ
        var phpurl = "http://urbanqee.com/webutil/sns/js/socialbutton-count.php";  // ソーシャルボタンカウント取得PHP URL (要修正）     
        //var encodeurl = encodeURIComponent(shareurl);  // エンコードはPHP側で行う

    if(pos == "top" || pos == "right"){

        $.ajax({
            url: phpurl,  // ソーシャルボタンカウント取得PHP
            dataType: "json",
            data: { url: shareurl, site: site, pass: "H290707" },

            success: function(data) {
                var res = data;
                if(pos == "top"){
                   var oyadiv = $('<div style="width: ' + bwidth + 'px; display:table-cell;"></div>'); //親要素追加
                   $(target).wrap(oyadiv); 
                   $(target).css( {'float': 'none'} );  // float 初期化 
                   var countTag = '<div class="balloon_top" style="width: ' + "90%" + '">' + res + '</div>';
                   $(target).before(countTag);
                  }
                else if(pos == "right"){
                   var oyadiv = $('<div style="width: ' + '100%' + 'px; display:table-cell;"></div>'); //親要素追加
                   $(target).wrap(oyadiv); 
                   var countTag = '<div style="float: left; height:' + bheight + 'px"><span class="balloon_right">' + res + '</span></div><div style="clear:both"></div>';
                   $(target).after(countTag);
                   //$(".baloon-right").css( {'height': bheight ,'float': 'left' } );
                   $(target).css( {'float': 'left'} );  
                  }
                else{ return false; }
             },
	   error: function(obj) {
                console.log(obj);
		alert("通信に失敗しました…。");

           }
         });
    }

}

</script>
<!-- jquery.socialbuttonプラグインライブラリー 10ボタン対応のうち2ボタンNG -->
<script src="http://urbanqee.com/webutil/sns/js/jquery.socialbutton-1.9.1.js"></script>
<!-- 公式ボタン画像でソーシャルボタン設定 ------------------------->
<script>
$(function() {

    $('.o-twittershare').socialbutton('twitter', { button: 'horizontal' });
    //$('.o-facebookshare').socialbutton('facebook_share');  NG
    $('.o-facebooklike').socialbutton('facebook_like', { button: 'button_count' });
    $('.o-googleplusone').socialbutton('google_plusone');
    $('.o-hatena').socialbutton('hatena');
    $('.o-mixicheck').socialbutton('mixi_check', { key: 'mixi999' });
    //$('.mixi_like').socialbutton('mixi_like', {  key: 'mixi999' }); NG
    $('.o-greesf').socialbutton('gree_sf');
    $('.o-pinterest').socialbutton('pinterest', { media: 'http://www.example.com/path/to/your-image.gif', button: 'horizontal' });
    $('.o-evernote').socialbutton('evernote');
  });
//
//twttr.widgets.load(); http://qiita.com/kzhrk/items/5bc39df48dc1ab8ea850
if (typeof twttr === 'undefined') {
  var twitterjs = document.createElement("script");
  twitterjs.async = true;
  twitterjs.src = '//platform.twitter.com/widgets.js';
  document.getElementsByTagName('body')[0].appendChild(twitterjs);
}
else {
  twttr.widgets.load();
}

//Facebook
if(typeof FB === 'undefined'){
  $('body').append('<div id="fb-root"></div>');
  var fbjs = document.createElement('script');
  fbjs.id = 'facebook-jssdk';
  fbjs.src = '//connect.facebook.net/ja_JP/all.js#xfbml=1&appId={Facebook App ID}';
  document.getElementsByTagName('body')[0].appendChild(fbjs);
}else{
  FB.XFBML.parse();
}
</script>
<!-- 吹き出し -->
<script>
   $(function() {
      $('.fukidashi').powerTip({ placement: 'nw-alt' });
   });
</script>

<script>
// Twitter
// Log any kind of Web Intent event to Google Analytics
// Category: "twitter_web_intents"
// Action: Intent Event Type
// Label: Identifier for action taken: tweet_id, screen_name/user_id, click region

// First, load the widgets.js file asynchronously
window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));

// Define our custom event handlers
function clickEventToAnalytics (intentEvent) {
  if (!intentEvent) return;
  var label = intentEvent.region;
  pageTracker._trackEvent('twitter_web_intents', intentEvent.type, label);
}

function tweetIntentToAnalytics (intentEvent) {
  if (!intentEvent) return;
  var label = "tweet";
  pageTracker._trackEvent(
    'twitter_web_intents',
    intentEvent.type,
    label
  );
}

function likeIntentToAnalytics (intentEvent) {
  tweetIntentToAnalytics(intentEvent);
}

function retweetIntentToAnalytics (intentEvent) {
  if (!intentEvent) return;
  var label = intentEvent.data.source_tweet_id;
  pageTracker._trackEvent(
    'twitter_web_intents',
    intentEvent.type,
    label
  );
}

function followIntentToAnalytics (intentEvent) {
  if (!intentEvent) return;
  var label = intentEvent.data.user_id + " (" + intentEvent.data.screen_name + ")";
  pageTracker._trackEvent(
    'twitter_web_intents',
    intentEvent.type,
    label
  );
}

// Wait for the asynchronous resources to load
twttr.ready(function (twttr) {
  // Now bind our custom intent events
  twttr.events.bind('click', clickEventToAnalytics);
  twttr.events.bind('tweet', tweetIntentToAnalytics);
  twttr.events.bind('retweet', retweetIntentToAnalytics);
  twttr.events.bind('like', likeIntentToAnalytics);
  twttr.events.bind('follow', followIntentToAnalytics);
});

</script>

<script>
$(function(){


	/* facebook */
	(function(d, s, id) {
		var js, fjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(id)) return;
		js = d.createElement(s); js.id = id;
		js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=236187796455704";
		fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));

	/* g-plus
	window.___gcfg = {lang: 'ja'};
	(function() {
		var po = document.createElement('script');
		po.type = 'text/javascript';
		po.async = true;
		po.src = 'https://apis.google.com/js/plusone.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(po, s);
	})(); */

	/* hatena
	(function() {
		var po = document.createElement('script');
		po.type = 'text/javascript';
		po.async = true;
		po.charset = 'utf-8';
		po.src = 'http://b.st-hatena.com/js/bookmark_button.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(po, s);
	})(); */

});


</script>
<center>
<p>
<a href="https://pixabay.com/ja/" target="_blank">photo by (c)pixabay.com</a>／<a href="http://itra.jp/jquery_socialbutton_plugin/" target="_blank">(c)Lightbox2</a>／<a href="http://lokeshdhakar.com/projects/lightbox2/" target="_blank">(c)jquery.socialbuttonプラグイン</a>
｜<a href="http://urbanqee.com/webutil/photo/lightbox2113/lightbox-v2-11-3.html" title="TOPページへ戻る">TOP</a>
</p>
<hr>

<a href="http://urbanqee.com/"><img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOMEへ"></a> urbanqee  <small>最終更新日</small>：2017.5.25(初版）
</center>

</body>
</html>

114   $('<div id="lightboxOverlay" class="lightboxOverlay"></div>
       <div id="lightbox" class="lightbox">
        <div class="lb-outerContainer">
        <div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
          <div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div>
          <div class="lb-loader"><a class="lb-cancel"></a></div>
        </div> 
        </div>
        <div class="lb-dataContainer">
        <div class="lb-data">
          <div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div>
          <div class="lb-closeContainer"><a class="lb-close"></a></div>
        </div>
        </div> <!-- ボタン設置場所は１１４行目 ここ クラス名lb-dataContainer DIV要素の後 -->
        </div>').appendTo($('body'));

No	ビューアー	JSフレームワーク	モーダル window*2	画像	動画*1	動画共有サイト動画	Webページ	スライドシュー	備考
1	Lightbox	PrototypeからjQueryに変更（v2.51)	モーダル	●				●	人気
2	Pirobox	jQuery	モーダル	●				●	推奨
3	Videobox	mootools	モーダル			●
4	Mediabox	mootools	モーダル		●	●	●
5	Shadowbox	Prototype、 MooTools (requires 1.2 Core)、 Dojo Toolkit、 Yahoo! User Interface Library、 Ext (requires ext-core.js)、非JSフレームを選択可	モーダル	●	●	●	●	●	推奨
6	Colorbox	jQuery	モーダル	●	●	●	●	●
7	Fotorama	jQuery	非モーダル	●	●	●	●	●	スライダー
8	Fancybox	jQuery	モーダル	●	●	●	●	●	人気
※動画とは、SWF、FLV、MOV、WMV（1)　 ※モーダルwindow：画像などメディアの表示は新しい別ウインドー（2）

◆サンプル（lightboxデモ）

◆サンプル（ソーシャルボタンデモ）

HTMLコード（デモページ）－（ソースコードのコピーは、コード画面上をダブルクリックしてください）

◆サンプル（lightboxデモ）

◆サンプル（ソーシャルボタンデモ）

HTMLコード（デモページ）－ （ソースコードのコピーは、コード画面上をダブルクリックしてください）

HTMLコード（デモページ）－（ソースコードのコピーは、コード画面上をダブルクリックしてください）