An Improved JavaScript Gallery


#1

Right now I’m in the process of writing a Vanilla JavaScript Gallery / Slider that is currently manual only, but it the near future it will be automated. Here’s the JavaScript:

var button1 = document.getElementById('exit-frame'); // Body HTML tag ID:
/*
 * Shade and Picture Box are set
 */
var shade = document.getElementById('shadeELE');
var picture = document.getElementById('pictureELE');
var count = 0;
var image = null;

var total = document.getElementById("gallery").childElementCount;
function exitPicture() {
shade.style.display = "none";
picture.style.display = "none";
}

function displayPicture(image) {
shade.style.display = "block";
picture.setAttribute('src', image);
picture.style.display = "block";
}

document.addEventListener("click", function (e) {

/* Exit Slide Show */
if (e.target.getAttribute('id') === "shadeELE" || e.target.getAttribute('id') === "pictureELE") {
    exitPicture();
}

//console.log(e.target.getAttribute('id'));

/*
 *  If the event target class doesn't match bail function
 */
if (!e.target.classList.contains('box'))
    return;
e.preventDefault();
//console.log(e.target.parentNode);

/*
 * Grab the large picture link from the href 
 */
var image = e.target.parentNode.getAttribute("href");
count = e.target.parentNode.getAttribute('data-picture');
//console.log('total', total, 'data-picture', count);

displayPicture(image);
/* 
 * Display shade, set picture in src attribute and display picture picture
 */

//console.log('shadeBox', shadeBox);
});

var previous = document.getElementById('preSlide');

previous.addEventListener('click', function (e) {

e.preventDefault();

if (parseInt(count) > 0) {
    count = parseInt(count) - 1;
    var newImage = document.querySelector('[data-picture="' + count + '"]');
    image = newImage.getAttribute("href");
} else {
    count = total - 1;
    var newImage = document.querySelector('[data-picture="' + count + '"]');
    image = newImage.getAttribute("href");
}
displayPicture(image);

});

var nextSlide = document.getElementById('nextSlide');

nextSlide.addEventListener('click', function (e) {

e.preventDefault();
if (count < total - 1) {
    count = parseInt(count) + 1;
    var newImage = document.querySelector('[data-picture="' + count + '"]');
    image = newImage.getAttribute("href");
} else {
    count = 0;
    var newImage = document.querySelector('[data-picture="' + count + '"]');
    image = newImage.getAttribute("href");
}
displayPicture(image);

});

I have also added a feature where I don’t have to know how many images are in a directory by using some php ->

function grabFilenames($dir) {
if (is_dir($dir)) {
    $handle = opendir($dir);
    while (false !== ($file = readdir($handle))) {
        if (is_file($dir . '/' . $file) && is_readable($dir . '/' . $file)) {
            $fileNames[] = $file;
        }
    }
    closedir($handle);
} else {
    echo "<p>There is an directory read issue</p>";
}
return $fileNames;
}

$images = grabFilenames('assets/large');



for ($i = 0; $i < sizeof($images); $i++) {
$resStr = str_replace('img', 'thumb', $images[$i]); 
$gallery[] = '<a class="myLightBox" href="assets/large/' . $images[$i] . '" title="Picture Gallery" data-picture="' . $i . '">' .
        '<img class="box" src="assets/thumbnails/' . $resStr . '" alt="thumbnail" />' . '</a>';
}

I hope this might help someone and the nice thing about the javascript is that there is no library that you’ll need to install.