Edrol97
Bronze Coder
Hi all, I've recently added a new lightbox gallery to my site. I wanted it to be a flip through gallery that people are greeted with on my main art page above a series of openable lightbox galleries. However, when the lightbox gallery which is still currently in development is added to the site, it disables the other lightbox galleries. Code below.
HTML:
<div id="imageslidercontainer">
<div class="imageslider">
<div class="slider_next_button" onclick="SliderNextImage()">
<img src="img/background/right-arrow.png" class="responsive"/>
</div>
<div class="slider_previous_button" onclick="SliderPreviousImage()">
<img src="img/background/left-arrow.png" draggable="false" class="responsive"/>
</div>
<div class="imageslider_images">
<img class="imgsli" src="img/background/Grimace Favicon.png">
<img class="imgsli" src="img/MorningStarFullPage.png">
<img class="imgsli" src="img/MorningStarFullPage.png">
</div>
<div class="imageslider_buttons">
</div>
</div>
</div>
<div class="galleryimage">
<img src="img/MorningStarFnF.png" width="60%" alt="My work appears in the 31st of July edition of The Morning Star"></div>
<h2>My work appears in the 31st of July 2024 edition of The Morning Star.</h2>
<div class="container">
<div class="galleries" draggable="false">
<div id="gallery1">
<img
src="img/background/Swallowed%20in%20Sleaze.png" width="100%" class="responsive"
onclick="LaunchLightbox(1)"
/>
<div class="title_text1" onclick="LaunchLightbox(1)">
Swallowed in Sleaze
</div>
</div>
<div id="gallery2">
<img
src="img/Minute%20Books/Minute%20Books.gif" width="100%" class="responsive"
alt="Cover Image 169 Barney Fagan"
onclick="LaunchLightbox(2)"
/>
<div class="title_text1" onclick="LaunchLightbox(2)">
Just a Minute
</div>
</div>
<div id="gallery3">
<img
src="img/Art%20on%20a%20postcard/Artonapostcardlogo.gif" width="100%" class="responsive"
onclick="LaunchLightbox(3)"
/>
<div class="title_text1" onclick="LaunchLightbox(3)">
It's in the Post
</div>
</div>
<div id="gallery14"><img src="img/EverydayBlues/IMG_4770.jpeg" width="90%" class="responsive"
onclick="LaunchLightbox(14)"
/>
<div class="title_text1" onclick="LaunchLightbox(14)">
Feeling Blue
</div>
</div>
<div id="gallery4">
<img
src="img//MFA/MFA%20Final%20Show%204.png" width="90%" class="responsive"
onclick="LaunchLightbox(4)"
/>
<div class="title_text1" onclick="LaunchLightbox(4)">
Party Politics
</div>
</div>
<div id="gallery6">
<img
src="img/background/Wokee.png" width="70%" class="responsive"
onclick="LaunchLightbox(6)"
/>
<div class="title_text1" onclick="LaunchLightbox(6)">
Culture Warring
</div>
</div>
<div id="gallery8">
<img
src="img/Tate%20Exchange/Tate%20Exchange%20Logo.png" width="70%" class="responsive"
onclick="LaunchLightbox(8)"
/>
<div class="title_text1" onclick="LaunchLightbox(8)">
Exchanging Numbers
</div>
</div>
<div id="gallery9">
<img
src="img/GreenGrads%20Sketches/GreenGradsLogo.png" width="100%" class="responsive"
onclick="LaunchLightbox(5)"
/>
<div class="title_text1" onclick="LaunchLightbox(5)">
Keen to be Green
</div>
</div>
<div id="gallery12">
<img
src="img/Tory%20Travails/Tory%20Story%20Logo.png" width="100%" class="responsive"
onclick="LaunchLightbox(12)"
/>
<div class="title_text1" onclick="LaunchLightbox(12)">
Tory Travails
</div>
</div>
<div id="gallery11">
<img
src="img/Covid%20Crimes/Covid%20Crimes.png" width="80%" class="responsive"
onclick="LaunchLightbox(11)"
/>
<div class="title_text1" onclick="LaunchLightbox(11)">
Covid Crimes
</div>
</div>
<div id="gallery10">
<img
src="img/New%20Contemporaries/forweb.png" class="responsive"
width="60%"
onclick="LaunchLightbox(10)"
/>
<div class="title_text1" onclick="LaunchLightbox(10)">
Con-temporarily Crap?
</div>
</div>
<div id="gallery13">
<img src="img/UK Government crest.png" width="45%" class="responsive"
onclick="LaunchLightbox(13)"/>
<div class="title_text1" onclick="LaunchLightbox(13)">
Party Problems
</div>
</div>
<div i="gallery15">
<img src="img/background/Gag.png" width="60%" class="responsive"
onclick="LaunchLightbox(15)"/>
<div class="title_text1" onclick="LaunchLightbox(15)">
Gagging for It
</div>
</div>
</div>
CSS:
.imageslider_images {
display: none;
}
.imgsli {
display: none;
overflow: hidden;
}
#imageslidercontainer {
display: flex;
position: relative;
top: 50%;
margin-left: 25%;
}
.slider_previous_button,
.slider_next_button {
position: absolute;
}
.slider_next_button {
position: absolute;
}
JavaScript:
let slides = [];
let counter = 0;
let totalimages = 0;
function SliderNextImage() {
for (let i = 0; i < totalimages; i++) {
slides[i].style.display = "none";
}
counter = counter + 1;
if (counter > totalimages - 1) {
counter = 0;
}
slides[counter].style.display = "block";
}
function SliderPreviousImage() {
for (let i = 0; i < totalimages; i++) {
slides[i].style.display = "none";
}
counter = counter - 1;
if (counter < 0) {
counter = totalimages - 1;
}
slides[counter].style.display = "block";
}
function HideImagesi() {
for (let i = 0; i < totalimages; i++) {
slides[i].style.display = "none";
}
}
function DisplaySliderGallery() {
counter = 0;
slides = document.getElementsByClassName("imgsli");
totalimages = slides.length;
HideImages();
slides[counter].style.display = "block";
/*document.body.style.overflow = "hidden";*/
}
DisplaySliderGallery();
JavaScript:
let slides = [];
let counter = 0;
let totalimages = 0;
function SliderNextImage() {
for (let i = 0; i < totalimages; i++) {
slides[i].style.display = "none";
}
counter = counter + 1;
if (counter > totalimages - 1) {
counter = 0;
}
slides[counter].style.display = "block";
}
function SliderPreviousImage() {
for (let i = 0; i < totalimages; i++) {
slides[i].style.display = "none";
}
counter = counter - 1;
if (counter < 0) {
counter = totalimages - 1;
}
slides[counter].style.display = "block";
}
function HideImagesi() {
for (let i = 0; i < totalimages; i++) {
slides[i].style.display = "none";
}
}
function DisplaySliderGallery() {
counter = 0;
slides = document.getElementsByClassName("imgsli");
totalimages = slides.length;
HideImages();
slides[counter].style.display = "block";
}
let lightbox = [];
function loop() {}
function NextImage() {
for (let i = 0; i < totalimages; i++) {
slides[i].style.display = "none";
}
counter = counter + 1;
if (counter > totalimages - 1) {
counter = 0;
}
slides[counter].style.display = "block";
slides.length;
}
function PreviousImage() {
for (let i = 0; i < totalimages; i++) {
slides[i].style.display = "none";
}
counter = counter - 1;
if (counter < 1) {
counter = totalimages - 1;
}
if (counter < 0) {
counter = totalimages - 1;
}
slides[counter].style.display = "block";
slides.length;
}
function HideImages() {
for (let i = 0; i < totalimages; i++) {
slides[i].style.display = "none";
}
}
function LaunchLightbox(num) {
lightboxcontainer = document.getElementsByClassName("slide-show_containers");
lightboxcontainer[0].style.display = "block";
counter = 0;
slides = document.getElementsByClassName("image_slide" + num.toString());
lightbox = document.getElementsByClassName(
"slide-show_" + num.toString() + "container"
);
lightbox[0].style.display = "block";
slides[counter].style.display = "block";
totalimages = slides.length;
console.log(slides);
console.log(totalimages);
document.body.style.overflow = "hidden";
}
function CloseLightbox(num) {
HideImages();
lightbox = document.getElementsByClassName(
"slide-show_" + num.toString() + "container"
);
lightbox[0].style.display = "none";
lightboxcontainer = document.getElementsByClassName("slide-show_containers");
lightboxcontainer[0].style.display = "none";
document.body.style.overflow = "auto";
}
const texts = document.querySelectorAll(
".title_text a",
".title_text2",
"title_text3"
);
texts.forEach((text) => {
text.addEventListener("click", () => {
text.style.textDecoration = "underline";
});
});
function disableImgDragging() {
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].classList.add("no-drag");
images[i].setAttribute("no-drag", "on");
images[i].setAttribute("draggable", "false");
images[i].addEventListener(
"dragstart",
function (event) {
event.preventDefault();
},
false
);
}
}
disableImgDragging();
(function ($) {
$.fn.fitText = function (kompressor, options) {
// default compression
var compressor = kompressor || 1,
settings = $.extend(
{
minFontSize: Number.NEGATIVE_INFINITY,
maxFontSize: Number.POSITIVE_INFINITY,
mobileBreakpoint: 480,
mobileFontSize: 12,
},
options
);
return this.each(function () {
var $this = $(this);
var resizer = function () {
var currentWidth = $(window).width();
if (currentWidth <= settings.mobileBreakpoint) {
$this.css("font-size", settings.mobileFontSize + "px");
} else {
$this.css(
"font-size",
Math.max(
Math.min(
$this.width() / (compressor * 10),
parseFloat(settings.maxFontSize)
),
parseFloat(settings.minFontSize)
) + "px"
);
}
};
resizer();
$(window).on("resize.fittext orientationchange.fittext", resizer);
});
};
});
jQuery;
$(document).ready(function () {
$("h1", "caption_text").fitText(1.2, {
minFontSize: "25px",
maxFontSize: "40px",
mobileBreakpoint: 600,
mobileFontSize: 14,
});
});
const img = document.querySelector("img");
img.ondragstart = () => {
return false;
};
