Building Photo Gallery App

Heggy Castaneda
Aug 1, 2017 · 3 min read

Summary: Object-oriented JS Gallery App is refactored in 2 different ways (Object Function, Object Literal):

Main takeaway: When creating a constructor function remember to use upper case letter for your first letter of the object name (ex: Gallery) and ‘new’ keyword (var Gallery = new Object();).

  1. Using the Object Function
// Creating a custom object using the Object function name with new operator// var Gallery references newly created obj.var Gallery = new Object();window.onload = function () {// 3 properties of Gallery obj: CurrentIndex, Images, and _loopInterval// Images prop: array that stores the images that are displayed in the galleryGallery.Images = ['babyMeekats.jpeg', 'minx.jpeg', 'owl.jpeg'];// CurrentIndex prop: represents current ith Image of arrayGallery.CurrentIndex = 0;// _loopInterval prop: auto loops thru img in the gallery every 2.5 secondsGallery._loopInterval = setInterval(Gallery.Next, 2500);};// 3 methods of Gallery obj are Gallery.Next, Gallery.Prev, Gallery.Display// Next method inc the current i in Images arrayGallery.Next = function() {// if CurrentIndex property number inc/dec (changes to different array item)if(Gallery.CurrentIndex < (Gallery.Images.length-1)) {// go to the next ith position of imgGallery.CurrentIndex++;// if you are at the last img} else {// resets the CurrentIndex back first imgGallery.CurrentIndex = 0;}// show imgGallery.Display();};// Prev method dec the current i in Images arrayGallery.Prev = function () {// if img is on anything other than starting ithif(Gallery.CurrentIndex > 0) {// move to one less index positionGallery.CurrentIndex--;// if you are on first img then go to last img} else {Gallery.CurrentIndex = (Gallery.Images.length - 1);}Gallery.Display();};// renders current img to htmlGallery.Display = function() {// access to html id elementvar photoGallery = document.getElementById('photo-gallery');// when app loads CurrentIndex is 0 then changes with .Next() method runsvar currentImage = Gallery.Images[Gallery.CurrentIndex];// note: Gallery.Images = ['babyMeekats.jpg', 'minx.jpg', 'owl.jpg'];// ex) Gallery.Image[0] = 'babyMeekats.jpg'photoGallery.src = "img/" + currentImage;};

2. Object Literal notation

// Creating a custom object using literal notationvar Gallery = {// adding prop Images, CurrentIndexto custom obj using literal notation// key : value (structure for def. prop)Images: ['babyMeekats.jpeg', 'minx.jpeg', 'owl.jpeg'],CurrentIndex: 0,// Adding methods to Gallery object using literal notationNext: function () {// when i is less than last element in arrayif(Gallery.CurrentIndex < (Gallery.Images.length - 1)) {// add one to CurrentIndex propGallery.CurrentIndex++;} else {// reset to first element of Images arrayGallery.CurrentIndex = 0;}Gallery.Display();},Prev: function() {// if CurrentIndex is not at beginningif(Gallery.CurrentIndex > 0){Gallery.CurrentIndex--;// if at beginning} else {// go to last imageGallery.CurrentIndex = (Gallery.Images.length - 1);}Gallery.Display();},Display: function () {var photoGallery = document.getElementById('photo-gallery');// Images is where array of pictures livevar currentImage = Gallery.Images[Gallery.CurrentIndex];// set source (document.getElementById('photo-gallery').src) to currentImagephotoGallery.src = "img/" + currentImage;}};// when window loads toggle every 2.5 secwindow.onload = function () {// setInterval is window obj native methodvar _loopInterval = setInterval(Gallery.Next, 2500);};

The only drawback to objects that use the Object function or literal notation is that you cannot instantiate them multiple times. For example, you can only use the new operator with these two object types the initial time that the object is created, meaning that you cannot reuse the object to create another instance. For the example in this article, if you want to create multiple galleries in a single HTML file, you need to include the JavaScript file multiple times and give the gallery a different name each time, which results in a lot of duplicate objects with different names. Therefore, these object types are not good for those situations. On the other hand, if you only need to use an object one time, these object types work fine. To create an object that you can instantiate multiple times, you need to use the object constructor and prototyping. **


More From Medium

Also tagged Object Oriented

Also tagged JavaScript

Also tagged JavaScript

Build Your Own Map


Top on Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade