Develop Reference

How to reduce size of button

I've got some JavaScript which is making my whole page clickable through what I though was the container element. However, when I tried reducing its size, amd reducing the size of the associated widget, even the footer is clickable. Although the footer doesn't toggle according to the JavaScript code, it does toggle in as far as it reacts to the a href "#" and takes user to the top of the page when they are trying to select an element/link in the footer.
So how can I can I get the footer to stop being clickable? The page itself seems only to react when clicking elements on it, but almost the whole footer area is reacting to href#
<a id="mni" href="#">
<div class="container4" onclick="myFunction(this)">
<div class="nimageone">
<img src="http://4309.co.uk/wp-content/uploads/2020/05/IMG_20200509_165113-1-219x300.jpg" alt="" width="350" height="300" c.class="size-medium wp-image-14178" /></div>
</div>
<script>
function myFunction(x){
x.classList.toggle('change');
}
</script>
</div>
Css
.change
.nimageone img {display:none}
desktop here

You have not included the tree structure of your HTML element comprehensively.
You can achieve what you are trying to do with the following.
<div>
<a id="mni" href="#">
<div class="container4"
onclick="myFunction(this)">
<div class="nimageone"><img
src="http://4309.co.uk/wp-
content/uploads/2020/05/IMG_20200509_165113-1-
219x300.jpg" alt="" width="350" height="300" class="
size-medium wp-image-14178" /></div>
</div>
</a> //remember to close the <a> tag here before the
footer item
/////Your footer item can come below here
<footer>
</footer>
</div>

If you want to adjust the size of the button in the HTML you can set it just like you set the width and the height attributes in the 'img' tag.

How to display first image of gallery?

I have a container of images populated when the page is requested with the images available in a certain directory (so number of images is variable) using the Thymeleaf rendering framework:
<div id="lightgallery">
<a th:each="i : ${content.images}}"><img th:src="i"></a>
</div>
When doing that all images are displayed on the page below each other (while I would like to only display the first image as a place holder). When I click on one of them, the light gallery opens with the images as thumbnails.
I would like to now hide all images except the first one, which will be the place holder for the gallery. Clicking it will then open the gallery, where the placeholder image becomes the first image of the gallery. Kind of like such:
<div id="lightgallery">
<a><img src="first.png"></a>
<a th:each="img, i : ${content.images}}" th:if="${i > 0}"><img th:src="i"></a>
</div>

You can make it cleaner by rendering the first image together with the loop. Consider declaring a CSS class 'hidden' for display: none and use the it for second images onwards
<div id="lightgallery">
<a th:each="image, iter : ${content.images}" th:class="${!iter.first} ? hidden">
<img th:src="${image}">
</a>
</div>

You can use the property ${i.first} to tell if it's the first image. Here is how I would do it:
<div id="lightgallery">
<a th:href="${content.images[0]}"><img th:src="${content.images[0]}" /></a>
<a th:href="${image}"
style="display: none;"
th:each="image, i: ${content.images}"
th:unless="${i.first}"><img th:src="${image}" /></a>
</div>

How to add information to Lightbox

I want to know how to add information to the side of an image using lightbox.
This is some of my code as an example. The lightbox works perfectly but what I want to achieve is when I click the image the image expands and also displays information about the image to the side of it, all with in the lightbox.
<article class="style1">
<span class="image">
<img src="images/image1.jpg" alt="" />
</span>
</article>

if you're using fancybox, try to use title attribute for <a>. it should work
<img src="images/image1.jpg" alt="" title="your information">

Javascript: Mouseover thumbnail to view large image - Multiple instances

I'm looking for a javascript option that will allow me to mouseover a thumbnail image to replace the "large" image. The trick here is using the anchor href from the thumbnail link as the large image source. I need this to work for multiple instances.
The <img src="large1.jpg"> etc. can be removed if that helps
Below is a simplified version of the HTML code I am using. This code cannot be changed.
Every id and class can be unique.
<div class="image-1">
<img src="large1.jpg">
</div>
<div id="thumbs">
<a id="thumb_1" href="large1.jpg" title="1"><img src="small1.jpg" alt="image 1"/></a>
<a id="thumb_2" href="large2.jpg" title="2"><img src="small2.jpg" alt="image 1"/></a>
<a id="thumb_3" href="large3.jpg" title="3"><img src="small3.jpg" alt="image 1"/></a>
</div>
...
<div class="image-2">
<img src="large2.jpg">
</div>
<div id="thumbs">
<a id="thumb_1" href="another_large1.jpg" title="1"><img src="anout_small1.jpg" alt="image 1"/></a>
<a id="thumb_2" href="another_large2.jpg" title="2"><img src="another_small2.jpg" alt="image 1"/></a>
<a id="thumb_3" href="another_large3.jpg" title="3"><img src="another_small3.jpg" alt="image 1"/></a>
</div>
...

check this solution
http://jsfiddle.net/dtdaynjp/
add to all "large" image unique class, image-1, image-2, image-3..
for each thumbs link add class similar like appropriate large image: thumb-image-1, thumb-image-2, thumb-image-1...
add this jQuery code:
$(function() {
$(".mouseover a").mouseover(function(){
var src=$(this).attr('href');
var classs=$(this).attr('class');
classs=classs.substr(6);
$('.'+classs).find('img').attr('src',src);
})
})

I would just use the CSS :hover selector. Then you can add animations and other cool things to your images.
EXAMPLE HERE.

Fancybox showing the same image

I'm having trouble using Fancybox on my website.
These are two (out of 9) of my divs, with different images in it. The thing is, whenever I click on any of the images, it shows the same image everytime. So when I click on the 2nd image, it shows the first image, just like all of the other divs.
<a id="single_3" href="Foto's/symposium1_groot.png" title="Test">
<div id="symposium1"> <img src="Foto's/symposium1.jpg" alt="" /></div></a>
</a>
<a id="single_3" href="Foto's/symposium2_groot.png" title="Test">
<div id="symposium2"> <img src="Foto's/symposium2.jpg" alt="" /></div></a>

You need to make ids unique. Also having 2 closing </a> tags for the first block probably isn't good for you.
Try:
<a id="single_3" href="Foto's/symposium1_groot.png" title="Test">
<div id="symposium1"> <img src="Foto's/symposium1.jpg" alt="" /></div>
</a>
<a id="single_4" href="Foto's/symposium2_groot.png" title="Test">
<div id="symposium2"> <img src="Foto's/symposium2.jpg" alt="" /></div>
</a>