Develop Reference

Show multiple file thumbnail on custom dropzone

I created custom dropzone in order to upload my files as the following example
function readFile(input) {
debugger;
if (input.files && input.files[0]) {
var reader = new FileReader();
for (let i = 0; i < input.files.length; i++) {
reader.onload = function(e) {
var htmlPreview =
'<img width="100" src="' +
e.target.result +
'" />' +
"<p>" +
input.files[i].name +
"</p>";
var wrapperZone = $(input).parent();
var previewZone = $(input)
.parent()
.parent()
.find(".preview-zone");
var boxZone = $(input)
.parent()
.parent()
.find(".preview-zone")
.find(".box")
.find(".box-body");
wrapperZone.removeClass("dragover");
previewZone.removeClass("hidden");
// boxZone.empty();
boxZone.append(htmlPreview);
};
}
reader.readAsDataURL(input.files[0]);
}
}
function reset(e) {
e.wrap("<form>")
.closest("form")
.get(0)
.reset();
e.unwrap();
}
$(".dropzone").change(function() {
readFile(this);
});
$(".dropzone-wrapper").on("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass("dragover");
});
$(".dropzone-wrapper").on("dragleave", function(e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass("dragover");
});
$(".remove-preview").on("click", function() {
var boxZone = $(this)
.parents(".preview-zone")
.find(".box-body");
var previewZone = $(this).parents(".preview-zone");
var dropzone = $(this)
.parents(".form-group")
.find(".dropzone");
boxZone.empty();
previewZone.addClass("hidden");
reset(dropzone);
});
.container {
padding: 50px 100px;
}
.box {
position: relative;
background: #ffffff;
width: 100%;
}
.box-header {
color: #444;
display: block;
padding: 10px;
position: relative;
margin-bottom: 10px;
}
.box-tools {
position: absolute;
right: 10px;
top: 5px;
}
.dropzone-wrapper {
border: 2px dashed #91b0b3;
color: #92b0b3;
position: relative;
height: 150px;
}
.dropzone-desc {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
width: 40%;
top: 60px;
font-size: 16px;
}
.dropzone,
.dropzone:focus {
outline: none !important;
width: 100%;
cursor: pointer;
}
.input-file {
position: absolute;
width: 100%;
height: 150px;
opacity: 0;
}
.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
background: #ecf0f5;
}
.preview-zone {
text-align: center;
}
.preview-zone .box {
box-shadow: none;
border-radius: 0;
margin-bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" id="10secs">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">10sec</h4>
</div>
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="preview-zone hidden">
<div class="box box-solid">
<div class="box-header with-border">
<div><b>Preview</b></div>
<div class="box-tools pull-right">
<button type="button" class="btn btn-danger btn-xs remove-preview">
<i class="fa fa-times"></i> Reset
</button>
</div>
</div>
<div class="box-body"></div>
</div>
</div>
<div class="dropzone-wrapper">
<div class="dropzone-desc">
<i class="glyphicon glyphicon-download-alt"></i>
<div>Choose an image file or drag it here.</div>
</div>
<input type="file" class="dropzone input-file" multiple asp-for="#Model.Files10" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see it is a multiple-input file, so you can upload multiple files in the same dropzone.
as you can see in the readFile javascript function, I create the thumbnail, the problem is when selecting more than one file, it only shows one thumbnail, how can I display each of them each next to the other as:
Regards

Slider goes out of first and last element

Im new to web development.
What i want to make is a slider for buttons.
How can i prevent it going out of first and last element? Right now i can slide it to the right on click, move it and when i click again it moves back to its initial position.
How can i make it draggable only between the first and last element and not go out of it.
Sorry if anything is unclear.
Any help is appreciated!
Here is my code below.
const track = document.querySelector('.track');
let initialPosition = null;
let moving = false;
let transform = 0;
let firstPosition = window.scrollX + document.querySelector('.track').getBoundingClientRect().left // X
const scrollStart = (e) => {
initialPosition = e.pageX;
moving = true;
const transformMatrix = window.getComputedStyle(track).getPropertyValue('transform');
if(transformMatrix !== 'none'){
if((parseInt(transformMatrix.split(',')[4].trim())) >= firstPosition){
transform = firstPosition;
} else {
transform = parseInt(transformMatrix.split(',')[4].trim());
}
}
};
const scrollMove = (e) => {
if(moving) {
const currentPosition = e.pageX;
const diff = currentPosition - initialPosition;
if(diff){
track.style.transform = `translateX(${transform + diff}px)`;
}
}
};
const scrollEnd = (e) => {
moving = false;
if(transform >= firstPosition){
track.style.transform = `translateX(${firstPosition})`;
}
};
if(window.PointerEvent) {
window.addEventListener('pointerdown', scrollStart);
window.addEventListener('pointermove', scrollMove);
window.addEventListener('pointerup', scrollEnd);
} else {
window.addEventListener('mousedown', scrollStart);
window.addEventListener('mousemove', scrollMove);
window.addEventListener('mouseup', scrollEnd);
window.addEventListener('touchdown', scrollStart);
window.addEventListener('touchmove', scrollMove);
window.addEventListener('touchup', scrollEnd);
}
body {
margin: 0;
}
.carousel {
width: 100%;
height: 140px;
background: #203290;
position: relative;
overflow: hidden;
}
.carousel .track {
position: absolute;
top: 10px;
left: 10px;
display: inline-flex;
touch-action: none;
}
.carousel .track .card {
width: 300px;
height: 120px;
background: #081050;
border-radius: 15px;
margin-right: 10px;
}
.card-button {
width: 100%;
height: 100%;
border-radius: 15px;
}
.card-button-text {
font-size: 4vh;
}
<div class="container">
<div class="carousel">
<div class="track">
<div class="card">
<button class="card-button"><span class="card-button-text">Link1</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link2</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link3</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link4</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link5</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link6</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link7</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link8</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link9</span></button>
</div>
<div class="card">
<button class="card-button"><span class="card-button-text">Link10</span></button>
</div>
</div>
</div>
</div>

Making a carousel that slides on mouse scroll

I am trying to create a similar carousel like the one on https://ueno.co/about/ (under the "value" section), that scrolls as the user continue to scroll down the page and then displays more information beneath it by adding the class .show to the hidden divs that will be below.
So far I have been using the flickity API and have created most of the setup necessary.
The only thing that is missing is being able to scroll through the carousel using the mouse wheel once it is in focus (which is setup once the user scrolls to it).
My guess was that I could simulate a left and right arrow key press when it is in focus which will change each slide, but if there is a cleaner way I would gladly use that.
jQuery(document).ready(function( $ ) {
var $carousel = $('.js-carousel');
$carousel.flickity({
prevNextButtons: false,
pageDots: false
});
// Split each word in the cell title into a span.
var $cellTitle = $('.js-cell-title');
// Wrap every letter in the cell title
$cellTitle.each(function() {
var $this = $(this);
var letters = $this.text().split('');
$this = $(this);
$this.empty();
$.each(letters, function(i, el) {
$this.append($('<span class="text-split">')
.append($('<span class="text-split__inner">')
.text(el)));
});
// Dirty way of getting the whitespace
var emptySplits = $this.find('.text-split__inner:contains( )');
emptySplits.addClass('whitespace');
emptySplits.parent().addClass('whitespace');
});
//focus the carousel when it is scrolled to
$(window).scroll(function() {
var carousel = $(".carousel");
var carouselTop = $('.carousel').offset().top;
var carouselHeight = $('.carousel').outerHeight();
var windowHeight = $(window).height();
var scrollTop = $(this).scrollTop();
var isScrollMode = carousel.hasClass('scrollMode');
var isInView = scrollTop > (carouselTop+carouselHeight-windowHeight) &&
(carouselTop > scrollTop) && (scrollTop+windowHeight > carouselTop+carouselHeight);
if(!isInView && isScrollMode){
carousel.removeClass('scrollMode');
carousel.blur();
console.log('EXIT');
} else if (!carousel.hasClass('scrollMode') && isInView){
carousel.addClass('scrollMode');
carousel.focus();
//NEEDS FUNCTION TO SCROLL THE CAROUSEL
console.log('ENTER');
}
});
//end of carousel event
function carouselEnd() {
var cells = $(".carousel-cell");
var numberOfCells = cells.length;
var lastCell = cells[numberOfCells - 1];
if( lastCell.classList.contains('is-selected') ){
//will add .show class to the hidden content
}
}
$carousel.on( 'settle.flickity', function( event, pointer ) {
carouselEnd();
});
});
.carousel{
.row{
margin:0;
}
.carousel-cell {
width: 66%;
margin-right: 3rem;
}
.cell__wrap {
width: 100%;
margin: 0 auto;
}
.cell__inner {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.cell__title {
position: absolute;
z-index: 1;
top: 50%;
left: 0;
margin: 0;
transform: translateY(-50%) translateX(-20%);
}
.text-split {
overflow: hidden;
display: inline-block;
&.whitespace {
display: initial;
}
#for $i from 1 through 100 {
&:nth-child(#{$i}) .text-split__inner {
transition-delay: 0.02s * $i;
}
}
}
.text-split__inner {
transform: translateY(100%);
display: inline-block;
transition: transform 0.3s ease;
.is-selected & {
transform: translateY(0);
}
&.whitespace {
display: initial;
}
}
.cell__thumb {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
// Base styles
html,
body {
width: 100%;
height: 100%;
font-family: 'Work Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
/* background-color: #00011D;
color: #FFF; */
}
.container {
width: 100%;
}
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity#2.0/dist/flickity.pkgd.min.js"></script>
</head>
<section class="carousel">
<div class="container a">
<div class="carousel js-carousel">
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="cell__wrap">
<div class="cell__inner">
<img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
</div>
<div class="row">
<h2>Title</h2>
</div>
<div class="row">
<p> Here is the content</p>
</div>
</div>
</div>
</div>
</div>
</section>

How to get img src for image clicked on

I am attempting to get the img src for the specific image being clicked on. I am using the this function in my attempt, so I am unsure what I am doing wrong.
Does anyone see the issue?
HTML:
<div id="zoomPop" data-popup="pop2">
<div id="zoomInner">
<a class="sharePopClose" data-popup-close="pop2" href="#"><img src="/icon_close.png" alt="Close Project Image" class="xClose">
</a>
<img src="" alt="Project Enlarge" id="zoomImg">
</div>
</div>
//Project Container Zoom
$('#projectGallery').on('click', '.projectCont', function (event) {
event.stopPropagation();
$('#zoomPop').fadeIn(350);
$('body').css('overflow', 'hidden');
var currentImg = $(this).attr('src');
console.log(currentImg);
});
#zoomPop {
width: 100%;
height: 100%;
color: #FFF;
position: fixed;
z-index: 999999;
margin: 0;
padding: 0;
top: 0;
right: 0;
bottom: 0;
overflow-y: scroll;
display: none;
}
#zoomPop {
background: rgba(0,0,0,.7);
}
#zoomInner {
position: relative;
padding: 60px 0;
margin: 0 auto;
width: 90%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="projectGallery">
<div class="projectCont">
<img src="https://images.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Pic">
</div>
<div class="projectCont">
<img src="https://geology.com/google-earth/google-earth.jpg" alt="Pic">
</div>
</div>
<div id="zoomPop" data-popup="pop2">
<div id="zoomInner">
<img src="" alt="Project Enlarge" id="zoomImg">
</div>
</div>

your this refer to DOM Node <div class="projectCont">
Use a
console.log($(this).find('img').attr('src'));
or change selector for event handler to
$('#projectGallery').on('click', '.projectCont img', function (event) {

//Project Container Zoom
$('#projectGallery').on('click', '.projectCont img', function (event) {
event.stopPropagation();
$('#zoomPop').fadeIn(350);
$('body').css('overflow', 'hidden');
var currentImg = $(this).attr('src');
console.log(currentImg);
$('#zoomInner img').attr('src', currentImg);
});
#zoomPop {
width: 100%;
height: 100%;
color: #FFF;
position: fixed;
z-index: 999999;
margin: 0;
padding: 0;
top: 0;
right: 0;
bottom: 0;
overflow-y: scroll;
display: none;
}
#zoomPop {
background: rgba(0,0,0,.7);
}
#zoomInner {
position: relative;
padding: 60px 0;
margin: 0 auto;
width: 90%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="projectGallery">
<div class="projectCont">
<img src="https://images.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Pic">
</div>
<div class="projectCont">
<img src="https://geology.com/google-earth/google-earth.jpg" alt="Pic">
</div>
</div>
<div id="zoomPop" data-popup="pop2">
<div id="zoomInner">
<img src="" alt="Project Enlarge" id="zoomImg">
</div>
</div>

icon stays hidden until something is moved there

I am trying to let the icons (wich will be buttons in the future) stay hidden until the right word is placed in the tab the button is in too, so when it's all done you can only click the icon if you've set the right word in the right tab and some audio will play.. but I can't seem to figure out how to let the icon stay hidden until the word is placed, if I look it up, something needs to stay hidden until the button is clicked, but I don't want that..
This is how it looks
This is my code
$(document).ready(function() {
var rigtige = 0; //good_points
var forkerte = 0; //false_points
var answers;
var footer;
var timer = setInterval(function() {
getReady();
}, 203);
var number = [0, 1, 2, 3, 4, 5, 6, 7];
//define JSON arrays (jsonData_0_123.json)
function getReady() {
if (jsonData !== "noJson") {
clearInterval(timer);
answers = jsonData.answers;
footer = jsonData.footer;
makeWordList();
dragDrop();
}
}
//end
function makeWordList() {
shuffle(number);
var text_time;
for (var j = 0; j < answers.length; j++) {
var i = j + 1;
//<div class="tekst draggable" id="tekst1"> <p>kat</p> </div>
document.getElementById("word" + number[j]).innerHTML = '<div class="tekst draggable" id="tekst' + i + '"> <span>' + answers[j] + '</span></div>'
}
}
// //makeWordList
// function makeWordList() {
// shuffle(number);
// for (var i = 0; i < answers.length; i++) {
// //<div class="tekst draggable" id="tekst1"> <p>kat</p> </div>
// var j = i + 1;
// var str = '<div class="tekst draggable" id="tekst'+ j +'"> <p>'+ answers[i] +'</p> </div>';
// document.getElementById('word' + number[i]).innerHTML = str;
// }
// };
//
// //end
//shuffle
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
//end
//make dragdroppable
function dragDrop() {
//Make the revert event for draggable
$.ui.draggable.prototype._mouseStop = function(event) {
//If we are using droppables, inform the manager about the drop
var dropped = false;
if ($.ui.ddmanager && !this.options.dropBehaviour)
dropped = $.ui.ddmanager.drop(this, event);
//if a drop comes from outside (a sortable)
if (this.dropped) {
dropped = this.dropped;
this.dropped = false;
}
if ((this.options.revert == "invalid" && !dropped) || (this.options.revert == "valid" && dropped) || this.options.revert === true || ($.isFunction(this.options.revert) && this.options.revert.call(this.element, dropped))) {
var self = this;
self._trigger("reverting", event);
$(this.helper).animate(this.originalPosition, parseInt(this.options.revertDuration, 10), function() {
event.reverted = true;
self._trigger("stop", event);
self._clear();
});
} else {
this._trigger("stop", event);
this._clear();
}
return false;
}
//end
//Make tekst draggable
$(".draggable").draggable({
opacity: 1,
containment: 'body',
revert: true,
scroll: false,
reverting: function() {
console.log('reverted');
//play('false');
forkerte++;
document.getElementById("forkerte").innerHTML = '<span id="forkerte">' + forkerte + '</span>';
},
});
//end
var id = 1;
var text = "";
var text2 = "";
while (id < 9) { // lengte van je array + 1
text = "antwoord" + id; //id= antwoord1 antwoord2 enz daarom antwoord + id zo dat het er 8 keer komt
text2 = "tekst" + id;
$("#" + text).droppable({ // dan wordt het dus allemaal droppable id antwoord 1 tm 8
tolerance: "pointer",
accept: "#" + text2, // Welke id er op moet vallen je maakt antwoord1a(tekst) bv droppable voor antwoord1(antwoord div)
drop: function(event, ui) {
// play('true');
$(ui.draggable).draggable({
revert: false
}); // Only draggable in div antwoord
$(ui.draggable).draggable('disable'); //disable draggable
ui.draggable.position({
of: $(this),
my: 'center left',
at: 'center center'
});
$(this).droppable('disable');
rigtige++; //+1 bij de punten van goed
document.getElementById("rigtige").innerHTML = '<span id="rigtige">' + rigtige + '</span>'; //update de html
//checckScore();
}
});
id++; //BELANKRIJK zonder id++ endles loop
}
}
//end
//spinning reset button
$(".spin").mouseenter(function() {
$(".fa-refresh").addClass("fa-spin");
});
$(".spin").mouseleave(function() {
$(".fa-refresh").removeClass("fa-spin");
});
// end
});
body,
html {
margin-left: 10%;
margin-right: 10%;
padding: 0px;
height: 100%;
font-family: georgia, "Comic Sans MS";
background-color: #f0f0f0;
}
.container {
height: 90%;
border-collapse: collapse;
display: table;
}
.igen {
font-size: 25px;
font-weight: bold;
}
.points {
float: right;
}
.container {
height: 90%;
border-collapse: collapse;
display: table;
}
header {
height: 5%;
border-bottom: thick solid grey;
}
.img {
width: 25%;
height: 30%;
background-color: #f0f0f0;
float: left;
}
.center {
margin-left: 25%;
margin-right: 25%;
}
.antwoord {
float: left;
width: 95%;
height: 25px;
background-color: white;
border-style: solid;
border-color: #000000;
border-width: 4px;
}
.move2 {
margin-top: 12.5%
}
.move4 {
margin-top: 19%
}
.move5 {
margin-top: 33.5%
}
.move6 {
margin-top: 20.8%
}
.move7 {
margin-top: 37.5%
}
.border {
margin-top: 45%;
border-top: thick solid grey;
background-color: red;
}
.word,
.word .tekst,
.word p {
display: inline;
margin-left: 7%;
font-weight: bold;
}
.my-row {
clear: both;
}
.answers .word,
.answers .word2 {
float: left;
padding: 3px;
margin-left: 7%;
font-weight: bold;
}
.fa {
margin-left: 5px;
margin-top: 2px;
}
.word,
.word2 {
padding-top: 5%;
margin: 5%;
}
footer {
border-top: thick solid grey;
height: 5%;
display: table-row;
vertical-align: bottom;
}
.sprint {
float: right;
}
.copyright {
position: relative;
bottom: 20px;
left: 65px;
font-size: 10px;
}
a {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Words</title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<header>
<span class="fa fa-refresh spin" style="font-size:25px;"></span><span class="igen spin"> igen</span>
<span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: <span id="rigtige">0</span> <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte:
<span id="forkerte">0</span>
</span>
</header>
<div class="container">
<div class="img" id="img1">
<div class="plaatje" id="plaatje1">
<img class="center" src="img/cat.jpg" alt="cat" width="50%;">
</div>
<div class="move1">
<div class="antwoord droppable" id="antwoord1"><i class="fa fa-play" style="font-size:20px"></i>
</div>
</div>
</div>
<div class="img" id="img2">
<div class="plaatje" id="plaatje1">
<img class="center" src="img/beak.jpg" alt="beak" width="50%;">
</div>
<div class="move2">
<div class="antwoord" id="antwoord2"><i class="fa fa-play" style="font-size:20px"></i>
</div>
</div>
</div>
<div class="img" id="img3">
<div class="plaatje" id="plaatje3">
<img class="center" src="img/spoon.jpg" alt="spoon" width="50%;">
</div>
<div class="move3">
<div class="antwoord" id="antwoord3"><i class="fa fa-play" style="font-size:20px"></i>
</div>
</div>
</div>
<div class="img" id="img4">
<div class="plaatje" id="plaatje4">
<img class="center" src="img/milk.jpg" alt="milk" width="50%;">
</div>
<div class="move4">
<div class="antwoord" id="antwoord4"><i class="fa fa-play" style="font-size:20px"></i>
</div>
</div>
</div>
<div class="img" id="img5">
<div class="plaatje" id="plaatje5">
<img class="center" src="img/egg.jpg" alt="egg" width="50%;">
</div>
<div class="move5">
<div class="antwoord" id="antwoord5"><i class="fa fa-play" style="font-size:20px"></i>
</div>
</div>
</div>
<div class="img" id="img6">
<div class="plaatje" id="plaatje6">
<img class="center" src="img/thee.jpg" alt="tea" width="50%;">
</div>
<div class="move6">
<div class="antwoord" id="antwoord6"><i class="fa fa-play" style="font-size:20px"></i>
</div>
</div>
</div>
<div class="img" id="img7">
<div class="plaatje" id="plaatje7">
<img class="center" src="img/meel.jpg" alt="flour" width="50%;">
</div>
<div class="move7">
<div class="antwoord" id="antwoord7"><i class="fa fa-play" style="font-size:20px"></i>
</div>
</div>
</div>
<div class="img" id="img8">
<div class="plaatje" id="plaatje8">
<img class="center" src="img/passport.jpg" alt="passport" width="50%;">
</div>
<div class="move8">
<div class="antwoord" id="antwoord8"><i class="fa fa-play" style="font-size:20px"></i>
</div>
</div>
</div>
<div class="answers">
<div class="my-row border">
<div class="word" id="word0"></div>
<div class="word" id="word1"></div>
<div class="word" id="word2"></div>
<div class="word" id="word3"></div>
</div>
<div class="my-row">
<div class="word2" id="word4"></div>
<div class="word2" id="word5"></div>
<div class="word2" id="word6"></div>
<div class="word2" id="word7"></div>
</div>
</div>
<footer>
<img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
<img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
<center><span class="copyright"> ©2013 laerdansk / FC-Sprint² Leerbedrijf bronnen </span>
</center>
</footer>
<script type="text/javascript">
var jsonData = "noJson";
var hr = new XMLHttpRequest();
hr.open("GET", "json_files/jsonData_0_123.json", true);
hr.setRequestHeader("Content-type", "application/json", true);
hr.onreadystatechange = function() {
if (hr.readyState == 4 && hr.status == 200) {
jsonData = JSON.parse(hr.responseText).main_object;
}
}
hr.send(null);
</script>
<script src="javascript.js"></script>
</body>
</html>
this is my fiddle i hope it's okay since it's the second time making a fiddle
if it's not right, please, tips are always welcome! https://jsfiddle.net/82332Lk8/

you would be able to do this with the accept option within droppable.
But first, you need to declare the image's visibility as "hidden" in your css file:
.eggImage {
visibility: hidden;
}
once you make the matching word draggable with a class like '.wordEgg' then you could use 'accept' in your droppable function to specify which class the droppable element accepts, then use css() to change the visibility of the image:
$( ".eggImage" ).droppable({
accept: ".wordEgg",
drop: function() {
$(".eggImage").css("visibility","visible")
});
working fiddle demo: http://jsfiddle.net/drrrreams/7q74ophg/