Develop Reference

Should or should not? "name" attribute used as interactive design identifiers

I tried a course for JS that made a Hover Gallery project. 5 thumbnails were shown in a line and whichever you hovered, was displayed in a bigger size under them.
Now, the code didn't contain any JS in it, only HTML and CSS. Here it is:
<div class="slider">
<img class="arrow" onclick="sliderBackward()" src="img/left-arrow.png"> // later added
<img onmouseover="preview.src=img1.src" name="img1" class="thumbnail" src="img/1.jpg" alt="1">
<img onmouseover="preview.src=img2.src" name="img2" class="thumbnail" src="img/2.jpg" alt="2">
<img onmouseover="preview.src=img3.src" name="img3" class="thumbnail" src="img/3.jpg" alt="3">
<img onmouseover="preview.src=img4.src" name="img4" class="thumbnail" src="img/4.jpg" alt="4">
<img onmouseover="preview.src=img5.src" name="img5" class="thumbnail" src="img/5.jpg" alt="5">
<img class="arrow" onclick="sliderForward()" src="img/right-arrow.png"> // later added
</div>
<div class="preview">
<img name="preview" src="img/1.jpg">
</div>
My question:
Is using the name attribute this way alright? I think that this mini project is a good example to show features but not one, that should be put in practise in bigger projects. Is that right?
Goal:
I wanted to show the further added thumbnails when I click on an arrow button and hide the other end of the list. (It would always show 5). For this I'm thinking if I should just delete the name attributes and approach it only through JS.

I think its better practice to use id rather than name to create unique identifiers. Name is often used in forms (I believe that's really what its for) and you could have multiple inputs with the same name. ID on the other hand is a very handy way to identify/select elements within the dom and should be unique.
That being said, there is nothing against you using name in this manner, its just not what its for.

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">

How to open a new page with the same image showing as you clicked on using jquery

I am relatively new to javascript and I'm looking for the best possible way to explain this problem. Hope anyone can give me advice on this
I have this :
<div class="col-md-4">
<img src="">
<img src="">
<img src="">
</div>
When Clicked on img it's redirected to the stuffedd.html page. However this contains 2 columns with images. A vertical thumbnail column and a middle column with large image.
Like this:
<div class="middle containerscroll">
<img src="" id="Mdrie" class="img-responsive ">
<img src="" id="Mvier" class="img-responsive ">
<img src="" id="Mvijf" class="img-responsive ">
</div>
div class="col-md-9 hidden-xs hidden-sm">
<img src="" id="drie" class="img-responsive single">
<img src="" id="vier" class="img-responsive single">
<img src="" id="vijf" class="img-responsive single">
</div>
I got this far with Jquery :
$(document).ready(function(){
"use strict";
$( ".single" ).hide();
$( "#Mdrie" ).on('click',function() {
$('#drie').toggle();
$(".single").not('#drie').hide();
});
How do I make the stuffedd.html open with the image I clicked on in the second div (all the images with class .single)
Do I declare a variable which I fill in as:
$( "var" ).show();
website is: www.damondebacker.com if you need to see it.

If I understand the question, the second page needs to be aware of what you clicked on the previous page, consider adding some identifier into the URL that identifies the image:
<img src="">
Then the second page has a spot to extract it from. If you don't want it in the URL you could set a cookie or use the LocalStorage object.

Try to transfer the ID of the picture on the first page with your URL. So you click on the Image and the link is something like /stuffed.html?id=drie. Later on your stuffed site, you get the parameter with jquery in a variable and show exactly this image. Here is a short tutorial for URL Parameters and jQuery

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>