WordPress Theme and Lightbox

(For an example of a WordPess theme, please check out The Center for Numinous Technology.)

Last spring I was asked to start creating a portfolio site for a friend’s artwork. She liked the idea of a lightbox for her work and asked if I could implement one. There were many option on the plugin front, but I wasn’t able find one matching the desired esthetics of the site. Simple solution, make my own.

Honestly, my working experience with PHP is limited to navigating the Wordpress Loop and function file (PHP isn’t even on my resume). For such a small project I didn’t want to invest in learning more in order to handle Ajax requests. I also knew I didn’t want to load all the images on each page view. My solution, use the loop to load the image url locations into a hidden form and compile the forms into an array to loop through.

First I created the constructor function, defining the current, previous, and following (next) imgage and imgage description.

function LightBox() {
    this.currentImg = null;
    this.currentDsc = null;
    this.nextImg = null;
    this.prevImg = null;
    this.postCount = $('.slide-post').length;
    this.currentIndex = null;
    this.imgDscArr = [];
    this.inSpeed = 100;
    this.outSpeed = 100;
    this.$overlay = $('<div id="overlay"><div id="backArrows"><div class="backArrow"></div><div class="backArrow"></div><div id="white-boarder"></div></div></div>');
    this.$boxRight = $('<div class="box-right"></div>');
    this.$next = $('<div id="next"></div>');
    this.$prev = $('<div id="prev"></div>');
  }

Then loop through the forms.

LightBox.prototype.formArr = function() {  // form array of images from <form> in template
    for (var i=0; i<this.postCount; i++) {
      var xImg = $('.slide-post').eq(i).find('.lbImg').val();
      var yDsc = $('.slide-post').eq(i).find('.lbDsc').val();
      var zArr = [xImg,yDsc];

      this.imgDscArr.push(zArr);
    }

    myArr = this.imgDscArr;
  };

For a little bit of a performance boost, I knew I wanted to pre-load the next and previous images.

LightBox.prototype.doubleClutch = function() {  // pre load next and prev img/dsc

  $(this.$overlay).append('<img src="' + this.nextImg + '" class="nextImg">').append('<div class="nextDsc">' + this.nextDsc + '</div>');
  $(this.$overlay).append('<img src="' + this.prevImg + '" class="prevImg">').append('<div class="prevDsc">' + this.prevDsc + '</div>');
};

Skipping-a-few-steps-that-you-can-find-bellow, lastly we initiate the lightbox.

$('.slide-post > a').on('click',function(e) {
  e.preventDefault();
  lb = new LightBox();
  lb.currentIndex = $(this).parent().index();
  lb.init();
});

The solution worked well. Now once she narrows down how the navigation arrows should look, maybe we’ll actually get the site up.

Here is the full code:

"use strict";


var myArr;
var lb;

function LightBox() {
  this.currentImg = null;
  this.currentDsc = null;
  this.nextImg = null;
  this.prevImg = null;
  this.postCount = $('.slide-post').length;
  this.currentIndex = null;
  this.imgDscArr = [];
  this.inSpeed = 100;
  this.outSpeed = 100;
  this.$overlay = $('<div id="overlay"><div id="backArrows"><div class="backArrow"></div><div class="backArrow"></div><div id="white-boarder"></div></div></div>');
  this.$boxRight = $('<div class="box-right"></div>');
  this.$next = $('<div id="next"></div>');
  this.$prev = $('<div id="prev"></div>');
}

LightBox.prototype.formArr = function() {  // form array of images from <form> in template
  for (var i=0; i<this.postCount; i++) {
    var xImg = $('.slide-post').eq(i).find('.lbImg').val();
    var yDsc = $('.slide-post').eq(i).find('.lbDsc').val();
    var zArr = [xImg,yDsc];

    this.imgDscArr.push(zArr);
  }

  myArr = this.imgDscArr;
};

LightBox.prototype.doubleClutch = function() {  // pre load next and prev img/dsc

  $(this.$overlay).append('<img src="' + this.nextImg + '" class="nextImg">').append('<div class="nextDsc">' + this.nextDsc + '</div>');
  $(this.$overlay).append('<img src="' + this.prevImg + '" class="prevImg">').append('<div class="prevDsc">' + this.prevDsc + '</div>');
};


LightBox.prototype.imgDscState = function() {  // set the next and prev images
  var x = this.currentIndex + 1;
  var y = this.currentIndex - 1;
  var z = this.postCount -1;

  this.currentImg = this.imgDscArr[this.currentIndex][0];
  this.currentDsc = this.imgDscArr[this.currentIndex][1];


  if (this.currentIndex === this.postCount - 1 && this.postCount > 0) { //last img in gallery size >1
    this.nextImg = this.imgDscArr[0][0];
    this.nextDsc = this.imgDscArr[0][1];
    this.prevImg = this.imgDscArr[y][0];
    this.prevDsc = this.imgDscArr[y][1];

  } else if (this.currentIndex === 0 && this.postCount > 0) { //first img in gallery size > 1
    this.nextImg = this.imgDscArr[x][0];
    this.nextDsc = this.imgDscArr[x][1];
    this.prevImg = this.imgDscArr[z][0];
    this.prevDsc = this.imgDscArr[z][1];

  } else  {
    this.nextImg = this.imgDscArr[x][0];
    this.nextDsc = this.imgDscArr[x][1];
    this.prevImg = this.imgDscArr[y][0];
    this.prevDsc = this.imgDscArr[y][1];
  }

  this.doubleClutch();

};

LightBox.prototype.init = function() {  // initiate lightbox

  this.formArr();


  this.currentImg = this.imgDscArr[this.currentIndex][0];
  this.currentDsc = this.imgDscArr[this.currentIndex][1];

  $('body').append(this.$overlay).append(this.$boxRight).append('<img src="' + this.currentImg + '" class="olImg slide-overlay">');
  $(this.$boxRight).append('<div class="olDsc slide-overlay">' + this.currentDsc + '</div>').append(this.$next).append(this.$prev);
  $(this.$overlay).fadeIn(this.InSpeed);

  if (this.postCount > 0) {
    $(this.$next).fadeIn(this.InSpeed + 100);
    $(this.$prev).fadeIn(this.InSpeed + 100);
  }

  this.imgDscState();
};



LightBox.prototype.nextPrevFade = function(direction) {  // fade effect for next/prev buttons

  var dirImg = "." + direction + "Img";
  var dirDsc = "." + direction + "Dsc";


  switch (direction) {
    case "next":
      dirImg = this.nextImg;
      dirDsc = this.nextDsc;
      break;
    case "prev":
      dirImg = this.prevImg;
      dirDsc = this.prevDsc;
      break;
  }

  $('.olDsc').fadeOut(this.outSpeed).remove();
  $('.olImg').fadeOut(this.outSpeed).remove();
  $('body').append('<img src="' + dirImg + '" class="olImg slide-overlay">');
  $('<div class="olDsc slide-overlay">' + dirDsc + '</div>').insertBefore('#next');
};

LightBox.prototype.nextPost = function() {  // method for advancing to the next slide

  this.nextPrevFade("next");

  if (this.currentIndex < this.postCount - 1) {
    this.currentIndex++;
  } else if (this.currentIndex === this.postCount - 1) {
    this.currentIndex = 0;}

  this.imgDscState();
};

LightBox.prototype.prevPost = function() {  // method for regressing to the prev slide

  this.nextPrevFade("prev");

  if (this.currentIndex === 0) {
    this.currentIndex = this.postCount - 1;
  } else if (this.currentIndex > 0) {
    this.currentIndex--;}

  this.imgDscState();
};

LightBox.prototype.exit = function() {
  $(this.$overlay).fadeOut(this.outSpeed);
  $(this.$overlay).remove();
  $(this.$next).remove();
  $(this.$prev).remove();
  $('.slide-overlay').addClass('hidden').removeClass('.slide-overlay').fadeOut(100);
};


$('.slide-post > a').on('click',function(e) {
  e.preventDefault();
  lb = new LightBox();
  lb.currentIndex = $(this).parent().index();
  lb.init();
});


$('body').on('click','#next',function() {
  lb.nextPost();
});


$('body').on('click','#prev',function() {
  lb.prevPost();
});


$('body').on('click', '#backArrows', function() {
    lb.exit();
  });// end on $overlay click
Eric Williams