Modal photo gallery for Bootstrap and Jekyll

2012-04-07-sample-001.html

---
layout: modalPhoto
category: photo-sample
title: Sample Title
name: sample-1
caption: This is a sample photo.
largeImage: /photography/other/large/sample-1.jpg
thumbImage: /photography/other/thumb/sample-thumb-1.jpg
previousPhoto: other-5
nextPhoto: other-2
imageWidth: 800
imageHeight: 532
---

imagesToPosts.py

#!/usr/bin/env python

import datetime
import os
import sys
import Image
from iptcinfo import IPTCInfo

def makeThumbnail(img, outfile):
    THUMB_SIZE = 170, 170
    width, height = img.size
    
    if width > height:
       delta = width - height
       left = int(delta/2)
       upper = 0
       right = height + left
       lower = height
    else:
       delta = height - width
       left = 0
       upper = int(delta/2)
       right = width
       lower = width + upper
    
    img = img.crop((left, upper, right, lower))
    img.thumbnail(THUMB_SIZE, Image.ANTIALIAS)
    img.save(outfile)

now = datetime.datetime.now()
setName = sys.argv[1]
imgDir = os.getcwd() + '/photography/' + setName + '/large'

images = os.listdir(imgDir)
jpgCount = 0
for test in images:
  if test[-4:] == '.jpg':
    jpgCount += 1 

for i in range(jpgCount):
  image = setName + '-' + str(i + 1) + '.jpg'
  postPath = os.getcwd() + '/_posts/' + now.strftime("%Y-%m-%d-") + setName + '-' + format(i + 1, "03d") + '.html'
  im = Image.open(imgDir + '/' + image)
  info = IPTCInfo(imgDir + '/' + image)
  f = open(postPath, 'w')
  f.write('---' + '\n')
  f.write('layout: modalPhoto' + '\n')
  f.write('category: photo-' + setName + '\n')
  # title is reserved for future use
  f.write('title: no title' + '\n')
  f.write('name: ' + image[:-4] + '\n')
  print image
  #caption = raw_input("Enter a caption: ")
  caption = info.data['caption/abstract']
  f.write('caption: ' + caption + '\n')
  f.write('largeImage: /photography/' + setName + '/large/' + image + '\n')
  f.write('thumbImage: /photography/' + setName + '/thumb/' + setName + '-thumb-' + str(i + 1) + '.jpg' + '\n')
  if i > 0:
    f.write('previousPhoto: ' + setName + '-' + str(i) + '\n')
  else:
    f.write('previousPhoto: ' + setName + '-' + str(jpgCount) + '\n')
  if i < jpgCount - 1:
    f.write('nextPhoto: ' + setName + '-' + str(i + 2) + '\n')
  else:
    f.write('nextPhoto: ' + setName + '-1' + '\n')
  f.write('imageWidth: ' + str(im.size[0]) + '\n')
  f.write('imageHeight: ' + str(im.size[1]) + '\n')
  f.write('---' + '\n')
  f.close()
  outfile = os.getcwd() + '/photography/' + setName + '/thumb/' + setName + '-thumb-' + str(i + 1) + '.jpg'
  makeThumbnail(im, outfile)

modalPhoto.css

.photoModal {
  height: 90px;
}
.photoCaption {
  height: 30px;
  line-height: 30px;
  padding: 0px 20px;
}
.photoClose {
  height: 20px;
  line-height: 20px;
  padding: 0px 20px;
  text-align: right
}
.photoClose a {
  color: #111;
}
.photoPrev {
  display: inline-block;
  width: 20px;
  text-align: center;
}
.photoNext {
  display: inline-block;
  width: 20px;
  text-align: center;
}
.photoThumb {
  width: 188px;
  height: 188px;
  display: inline-block;
}
.thumbImage {
  box-shadow: 5px 5px 5px #888;
}

modalPhoto.html

---
layout: default
title: Sample Modal Photo Gallery
---
<h1>Gallery Name</h1>
<p>All photos in this gallery are named something like "sample-1.jpg".</p>
<!-- This garbage is to eliminate spaces between divs.
{% for post in site.categories.photo-sample reversed %}
--><div class="photoThumb" >
<a data-toggle="modal" href="#{{ post.name }}"><img class="thumbImage" src="{{ post.thumbImage }}" /></a>
</div><!--

--><div class="modal photoModal hide" id="{{ post.name }}">
    <div class="photoClose">
    <a href="#" data-dismiss="modal" >close <i class="icon-remove"></i></a>
    </div>
    <a class="photoPrev" data-dismiss="modal" data-toggle="modal" href="#{{ post.previousPhoto }}" ><i class="icon-chevron-left"></i></a><!--
    --><img width="{{ post.imageWidth }}" height="{{ post.imageHeight }}" src="{{ post.largeImage }}" /><!--
    --><a class="photoNext" data-dismiss="modal" data-toggle="modal" href="#{{ post.nextPhoto }}" ><i class="icon-chevron-right"></i></a>
    <div class="photoCaption">
      {{ post.caption }}
    </div>
</div><!--
{% endfor %}
This garbage is to eliminate spaces between divs. -->

modalPhoto.js

$('.photoModal').each(function (i) { 
  var photoWidth = parseInt($(this).children('img').attr('width'));
  var photoHeight = parseInt($(this).children('img').attr('height'));
  var modalWidth = photoWidth + 40;
  var modalHeight = photoHeight + 50;
  var marginHo = modalWidth/-2;
  var marginVert = modalHeight/-2;
  $(this).css('width', modalWidth);
  $(this).css('height', modalHeight);
  $(this).css('margin-left', marginHo);
  $(this).css('margin-top', marginVert);
});

function moveLeft(){
  var activeModal = $("body").find(".photoModal").not(":hidden");
  if (activeModal.length){
    var prevLink = activeModal.find("a.photoPrev").attr("href");
    var prevModal = $("body").find(prevLink)
    activeModal.modal('hide');
    prevModal.modal('show');
  }
}
function moveRight(){
  var activeModal = $("body").find(".photoModal").not(":hidden");
  if (activeModal.length){
    var nextLink = activeModal.find("a.photoNext").attr("href");
    var nextModal = $("body").find(nextLink)
    activeModal.modal('hide');
    nextModal.modal('show');
  }
}
function checkKey(e) {
    e = e || window.event;
    if (e.keyCode == 37){
      moveLeft();
    } else if (e.keyCode == 39) {
      moveRight();
    }
}

document.onkeydown = checkKey;

// Here is some code for swipe gestures from scottgale.com
document.ontouchend = function() {
   //swipe left
   if( self.swipeLeft && self.swipe ) {
      self.moveTo(self.current-1);
      moveLeft();               
   //swipe right
   } else if(self.swipe) {
      self.moveTo(self.current+1);
      moveRight();
   }            
}
document.ontouchmove = function(e){
   //move only if you swipe across
   if( Math.abs(e.touches[0].pageX - self.startX) > 150 ) {
      if( (e.touches[0].pageX - self.startX) > 5 ) {
         self.swipeLeft = true
      } else {
         self.swipeLeft = false;
      }
      self.swipe = true;
   }
}
document.ontouchstart = function(e) {
   self.startX = e.touches[0].pageX;
   self.swipe = false;
}