Develop Reference

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

Load bootstrap thumbnail onerror

I have this code to load images, and if it encounters an error while loading the images it will also load another image.
<img src="" class="img-responsive"
onerror=this.src='images/default_QK.png';
data-toggle="tooltip" data-placement="left"
title="Kiosk" width="245" height="295">
What I want is if it fails to load, I would like to load the bootstrap thumbnails like this code
<img data-src="holder.js/300x200" alt="">
I've tried this code, but it doesn't work.
<img src="" class="img-responsive"
onerror="this.data-src='holder.js/300x200';"
data-toggle="tooltip" data-placement="left"
title="Kiosk" width="245" height="295">

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>