SlideShow Close and Navigate Buttons

0 Mike Higgins · June 21, 2014
Having issues getting the Close and Navigate buttons to work.
/images/forum/66bdc2f4d0282f9e34a927bf27fee47b.PNG


function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
addEvent(window, "load", setupSlideshow, false);

function setupSlideshow() {
var slides = new Array();
for (var i = 0; i < document.images.length; i++) {
var thumb = document.images;
if (thumb.className == "slide" && thumb.parentNode.tagName == "A") {
slides.push(thumb);
}
}
for (var i = 0; i < slides.length; i++) {
createRollover(slides);
createHighRes(slides, i);
}
if (slides.length > 0) {
createGallery(slides);
createOverlay();
}
}

function createHighRes(thumb, index) {
thumb.big = new Image();
thumb.big.src = thumb.src.replace(/_thumb/, "");
thumb.onclick = showGallery;
thumb.big.index = index;
}

function createRollover(thumb) {
thumb.out = new Image();
thumb.over = new Image();
thumb.out.src = thumb.src;
thumb.over.src = thumb.src.replace(/_thumb/, "_over");
thumb.onmouseout = function () {
thumb.src = thumb.out.src;
}
thumb.onmouseover = function () {
thumb.src = thumb.over.src;
}
}

function createGallery(slides) {
var galleryBox = document.createElement("div");
galleryBox.id = "galleryBox";
var galleryTitle = document.createElement("p");
galleryTitle.id = "galleryTitle";
var closeButton = document.createElement("input");
closeButton.type = "image";
closeButton.src = "galleryclose.png";
closeButton.onclick = function () {
fadeOut("galleryBox", 100, 0.5, 0);
fadeOut("pageOverlay", 80, 0.5, 0);
setTimeout(function () {
galleryBox.style.display = "none";
document.getElementById("pageOverlay").style.display = "none";
}, 500);
}
galleryTitle.appendChild(closeButton);
galleryBox.appendChild(galleryTitle);
var slide = document.createElement("img");
slide.id = "gallerySlide";
slide.src = slides[0].big.src;
slide.index = 0;
galleryBox.appendChild(slide);
var slideCaption = document.createElement("p");
slideCaption.id = "slideCaption";
slideCaption.innerHTML = slides[0].alt;
galleryBox.appendChild(slideCaption);
var galleryFooter = document.createElement("p");
galleryFooter.id = "galleryFooter";
var slideBack = document.createElement("input");
slideBack.type = "image";
slideBack.src = "back.png";
slideBack.onclick = function () {
var currentSlide = document.getElementById("gallerySlide");
var currentIndex = currentSlide.index;
currentIndex--;
if (currentIndex == -1) currentIndex = slides.length - 1;
changeSlide(slides[currentIndex]);
}
galleryFooter.appendChild(slideBack);
var slideNum = document.createElement("span");
slideNum.id = "slideNumber";
slideNum.innerHTML = "1";
var slideTotal = document.createTextNode(" of " + slides.length);
galleryFooter.appendChild(slideNum);
galleryFooter.appendChild(slideTotal);
var slideForward = document.createElement("input");
slideForward.type = "image";
slideForward.src = "forward.png";
slideForward.onclick = function () {
var currentSlide = document.getElementById("gallerySlide");
var currentIndex = currentSlide.index;
currentIndex++;
if (currentIndex == slides.length) currentIndex = 0;
changeSlide(slides[currentIndex]);
}
galleryFooter.appendChild(slideForward);
galleryBox.appendChild(galleryFooter);
document.body.appendChild(galleryBox);
}

function showGallery() {
changeSlide(this);
setOpacity("galleryBox", 0);
setOpacity("pageOverlay", 0);
document.getElementById("galleryBox").style.display = "block";
document.getElementById("pageOverlay").style.display = "block";
fadeIn("galleryBox", 100, 0.5, 0);
fadeIn("pageOverlay", 80, 0.5, 0);
return false;
}

function changeSlide(slide) {
var galleryBox = document.getElementById("galleryBox");
var oldSlide = document.getElementById("gallerySlide");
var slideCaption = document.getElementById("slideCaption");
var slideNum = document.getElementById("slideNumber");
setOpacity("gallerySlide", 0);
var newSlide = oldSlide.cloneNode(true);
newSlide.src = slide.big.src;
newSlide.index = slide.big.index;
galleryBox.replaceChild(newSlide, oldSlide);
fadeIn("gallerySlide", 100, 0.5, 0);
slideCaption.innerHTML = slide.alt;
slideNum.innerHTML = newSlide.index + 1;
}

function createOverlay() {
var pageOverlay = document.createElement("div");
pageOverlay.id = "pageOverlay";
document.body.appendChild(pageOverlay);
}

function setOpacity(objID, value) {
var object = document.getElementById(objID);
object.style.filter = "alpha(opacity = " + value + ")";
object.style.opacity = value / 100;
}

function fadeIn(objID, maxOpacity, fadeTime, delay) {
var fadeInt = Math.round(fadeTime * 1000) / maxOpacity;
for (var i = 0; i <= maxOpacity; i++) {
setTimeout("setOpacity('" + objID + "', " + i + ")", delay);
delay += fadeInt;
}
}

function fadeOut(objID, maxOpacity, fadeTime, delay) {
var fadeInt = Math.round(fadeTime * 1000) / maxOpacity;
for (var i = maxOpacity; i >= 0; i--) {
setTimeout("setOpacity('" + objID + "', " + i + ")", delay);
delay += fadeInt;
}
}


I'd upload the whole web file for inspection but am thinking there is no option for this here...

<!--?prettify lang=html linenums=true?--><!--?prettify lang=html linenums=true?-->

Post a Reply

Replies

Oldest  Newest  Rating
0 Jay Tauron · September 3, 2014
use jQuery to select the button then navigate relative to it to hide the container
e.g.

if the markup is:
<div id="slideShow">

<i id="close"></i>
<!--
content
...
-->

</div>


then your JS could be:
$('#close').click(function(){
$(this).parent().hide(/*time in ms*/);
})
0 Mike Higgins · June 24, 2014
Not looking to hide the buttons, just make them functional.
  • 1

Javascript

107,045 followers
About

A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.

Links
Moderators