I'm excited to ask for help from the coding heroes here at Stack Overflow.
I'm trying to replicate a Javascript function. I had already used it before to display, on a single web page, the element clicked while in a gallery-thumbnails view in a slideshow-picture view. It worked fine, thanks to your help. You can see that post here:
How to toggle between gallery-thumbnails and a specific slideshow-image on the same page?
Now, I'm trying to write a similar function to display, also on a single web page, a blog-post clicked while in a gallery-thumbnails view in a slideshow-normal view. I wrote a function that works the same way as the first one, only I renamed it everywhere so as not to conflict with the first, which is used on the gallery page of the website. I checked and re-checked the names, yet it still won't work despite having the same functionality, used in the same way.
The blog-style I'm aiming for is a masonry-like blog, with Magtastico theme a good example, yet with everything happening on one single page:
I tinkered with a few other functions, and tried variations of names and events, but the problem persists that only one of the Divs shows, the same one every time, regardless of which thumbnail-post I click on. When applied on the gallery page, the same Javascript worked to select the specific one I clicked on to then show in slideshow-view.
Normally, I'd debug this alone along the course of a few days, but this project is nearing its deadline, and so, any help is much appreciated.
Below is the relevant HTML, CSS, and Javascript I wrote:
The HTML, which has onclick triggers in it:
<div class="post" id="post">
<div class="posts">
<div class="post__slide">
<img class="post__picture" onclick="blog__allDivs()" src="img/Picture1.jpg" alt="The Land Before Birth">
<div class="post__content">
<title class="post__title" onclick="blog__allDivs()">The Land Before Birth </title>
<div class="post__text">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
</div>
</div>
</div>
<div class="post__slide" onclick="blog__allDivs()">
<img class="post__picture" src="img/Picture2.jpg" alt="The Pearl In The Cosmic Shell">
<div class="post__content">
<title class="post__title">The Pearl In The Cosmic Shell</title>
<div class="post__text">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="post__slide">
<img class="post__picture" onclick="blog__allDivs()" src="img/Picture3.jpg" alt="The Muse">
<div class="post__content">
<title class="post__title">The Muse</title>
<div class="post__text">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
<div class="blog is-visible" id="blog">
<div class="blog__row">
<div class="blog__post">
<div class="blog__picture" onclick="blog__showDivFix(+1);">
<img class="blog__thumbnail" src="img/Picture1.jpg" alt="The Land Before Birth">
</div>
<div class="blog__content">
<h2 class="blog__title" onclick="blog__showDivFix(+1);">The Land Before Birth</h2>
<p class="blog__text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...</p>
<button class="blog__button" onclick="blog__showDivFix(+1);">Read More</button>
</div>
</div>
<div class="blog__post">
<div class="blog__picture" onclick="blog__showDivFix(+2);">
<img class="blog__thumbnail" src="img/Picture2.jpg" alt="The Pearl In The Cosmic Shell">
</div>
<div class="blog__content">
<h2 class="blog__title" onclick="blog__showDivFix(+2);">The Pearl In The Cosmic Shell</h2>
<p class="blog__text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ..."</p>
<button class="blog__button" onclick="blog__showDivFix(+2);">Read More</button>
</div>
</div>
<div class="blog__post">
<div class="blog__picture" onclick="blog__showDivFix(+3);">
<img class="blog__thumbnail" src="img/Picture3.jpg" alt="The Muse">
</div>
<div class="blog__content">
<h2 class="blog__title" onclick="blog__showDivFix(+3);">The Muse</h2>
<p class="blog__text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
<button class="blog__button" onclick="blog__showDivFix(+3);">Read More</button>
</div>
</div>
</div>
</div>
The CSS, which I felt to be irrelevant except for the special classes:
/* Special Classes */
.is-displayed {
display: inline-block;
}
.is-block {
display: block;
}
.is-discernable {
opacity: 1;
}
.is-visible {
visibility: visible;
}
.no-cursor {
cursor: none;
}
And the Javascript, of which only the switch works, not the selector:
var blog__slideIndex = 1;
blog__showDivs(blog__slideIndex);
function blog__showDivFix(n) {
blog__allDivs();
blog__altDivs(n);
}
function blog__plusDivs(n) {
blog__showDivs(blog__slideIndex += n);
}
function blog__altDivs(n) {
blog__showDivs(blog__slideIndex = n);
}
function blog__showDivs(n) {
var i;
var x = document.getElementsByClassName("post__slide");
if (n > x.length) {blog__slideIndex = 1}
if (n < 1) {blog__slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
function blog__allDivs() {
var x = document.getElementById("post");
var y = document.getElementById("blog");
x.classList.toggle('is-displayed');
y.classList.toggle('is-visible');
}
Thank you very much for your aid. I hope this quirk is as entertaining for you as it is for me (if less daunting!).
Here is how I solved it in case anyone else is having the same problem:
Second, I moved my onclick events from html to js using event listeners, e.g.:
var postPicture = document.getElementsByClassName("post__picture");
// functions
for (var i = 0; i < postPicture.length; i++) { postPicture[i].addEventListener('click', function() { blogAllDivs(); }, false); }
I moved the js for the blog to a .js file separate from that holding the js for the gallery (scripts.js), and linked it and only it to the blog html: blogscripts.js.
And finally, I defered my blogscripts.js from loading until the loading of the DOM, so that it had something to listen for, and also placed it at the bottom of the body, just to be sure.
I hope this helps!