We Keep Coding

Adding image over image after upload

I'm trying to make a website where you can upload an image, then select another one and add it over the uploaded one. I'm using jquery to make the image draggable and resizable and everything works fine, except that I can't add it over the uploaded image.
Here's my code:
code:
$(document).ready(function() {
$(document).on('click', '.block-add', function() {
var a = $(this);
var src = a.find('img:first').attr('src');
var elem = $('<div class="container"><img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});
.blocks {
width: 10%;
z-index: 9999;
}
.block {
width: 100%;
height: 100%;
border: 1px solid #C8C8C8;
margin: 0px;
background-color: #F0F0F0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload">
<input type='file' onchange="readURL(this);" /> <br>
</div>
<br/>
<div class="block">
<div class="background">
<img id="bg" src="" alt="" width="50%" ; height="50%" ; class="center" />
</div>
</div>
<br/>
<div id="existingImges">
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
</div>
So here's the result in this case:
and here's what I'd like to be after adding a wheel:

As #Troy Bailey and I mentioned, the way to success is the css attribute z-index.
Here the changes:
First step:
Add this above z-index attribute to class .block: z-index: 1;.
Second step:
For your javascript you have to add some lines which increases the z-index attribute s of your created divs, with class .container.
$(document).ready(function() {
$(document).on('click', '.block-add', function() {
var src = $(this).find('img:first').attr('src');
//New line
//First, find out how many images has being added and dragged
var foundAddedDivs = $('.block').find('.container').size();
//New line
//Second, get the current value from recently added 'z-index' from fist step.
var backGroundDivIndex = $('.block').css("z-index");
//New line
//Third: Calulate a new value for 'z-index' for each draggable elements
var zIndex = backGroundDivIndex + foundAddedDivs;
//Modified line
//Forth: Creates a new div and add calculated z-index to draggable element
var elem = $('<div class="container" style="z-index: '+ zIndex +'">
<img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});

.block-add {z-index: 99;}
/* just increase the z-index of the wheel so it can be in front of the car image */

How can I hide embedded video popup when clicking outside?

I have this code, but I do not know how to hide the video when clicking outside.
Here is my code:
$(".popup").click(function () {
var $this = $(this);
var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
var $title = $("<h1>").text($this.data("title"));
$("#video-view").html($title).append($iframe);
$iframe.wrap("<div class='class-video'>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>
I tried everything but clearly I am doing something wrong.
Thank you in advance.

This example shows the video when clicking on the image and hides when you click anywhere else:
$(".popup").click(function (e) {
e.stopPropagation();
var $this = $(this);
var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
var $title = $("<h1>").text($this.data("title"));
$("#video-view").html($title).append($iframe);
$iframe.wrap("<div class='class-video'>");
});
$(document).click(function() {
$("#video-view").empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>

The trick is to add a hidden layer on all the screen. When the user clicks on that layer, you will hide the movie.
keep attention to the z-index, it's important.
Like this:
$(".popup").click(function () {
var $this = $(this);
var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
var $title = $("<h1>").text($this.data("title"));
$("#video-view").html($title).append($iframe);
$iframe.wrap("<div class='class-video'>");
$('.overlay').show();
});
$('.overlay').click(function(){
$(this).hide();
$('#video-view').html('');
});
#video-view {
z-index: 2;
position:relative;
display: inline-block;
}
.overlay {
position: absolute;
z-index:1;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>
<div class="overlay"></div>

Position elements dynamically- jQuery

I have three images in <section>
<section class="one">
<img src="one.png" />
</section>
<section class="two">
<img src="two.png" />
</section>
<section class="three">
<img src="three.png" />
</section>
I have added some css to position the sections:
$('.one').css({
position:'absolute',
top:100
});
$('.two').css({
position:'absolute',
top:800
});
$('.three').css({
position:'absolute',
top:1600
});
My problem is in the js - I want to position each element dynamically so for example the first section would be top 100px the section one would be 200px and the third one would be 300px. This is what i have managed so far:
$.fn.inView = function(){
var win = $(window);
obj = $(this);
var scrollPosition = win.scrollTop();
var visibleArea = win.scrollTop() + win.height();
var objEndPos = (obj.offset().top + obj.outerHeight());
var visible =(visibleArea >= objEndPos && scrollPosition <= objEndPos);
$.each( obj, function( index ) {
if(visible){
//console.log(index);
$(obj).css({
position:'fixed',
top: index*100//Problem here
});
}
});
};

The main problem you had there was that you set the css of the obj jquery selector, and not on the img that was in the obj selector.
In order to get to the img element you could use any of $(this) or add a second parameter to the callback function inside the $.each, which is the current element:
$.each(obj, function(index, el) {
$(el).css
Here is a complete snippet:
$(function() {
obj = $('section img');
$.each(obj, function(index) {
$(this).css({
position:'fixed',
top: index*100
});
});
});
section img {
width: 50px;
height: 50px;
border: 1px solid black;
}
section.one img {
border-color: red;
}
section.two img {
border-color: green;
}
section.three img {
border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="one">
<img src="one.png" alt="one"/>
</section>
<section class="two">
<img src="two.png" alt="two" />
</section>
<section class="three">
<img src="three.png" alt="three" />
</section>

Movement between Images in Gallery with Next & Prev Buttons

i have how many images in gallery that when click on the any image,image displayed on the other bigger img tag.i would like to implement a previous and next button that i could movement between images.i think could use next() method in javascript and i found below Example but i'm beginner in js and i could not dose this work.
<script>
var interval = undefined;
$(document).ready(function () {
interval = setInterval(getNext, 2000); // milliseconds
$('#next').on('click', getNext);
$('#prev').on('click', getPrev);
$('.slideshow a').onclick(function () {
var src=$('a img').attr("src");
$('#bigImage img').attr("src",src);
});
});
function getNext() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
transition($curr, $next);
}
function getPrev() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
transition($curr, $next);
}
function transition($curr, $next) {
clearInterval(interval);
$next.css('z-index', 2).fadeIn('slow', function () {
$curr.hide().css('z-index', 0);
$next.css('z-index', 1);
});
}
</script>
<div class="slideshow">
<img src="first-image.jpg" width="150" height="150" alt="first image">
<img src="second-image.jpg" width="150" height="150" alt="second image">
<img src="third-image.jpg" width="150" height="150" alt="third image">
<img src="fourth-image.jpg" width="150" height="150" alt="fourth image">
...
</div>
<button type="button" Id="prev">Previous</button>
<button type="button" Id="next">Next</button>
<div id="bigImage">
<img src="#" width="800" height="600" alt="Big Image">
</div>
<style>
.slideshow {
position: relative; /* necessary to absolutely position the images inside */
width: 500px; /* same as the images inside */
height: 100px;
}
.slideshow img {
position: absolute;
display: none;
}
.slideshow img:first-child {
display: block; /* overrides the previous style */
}
</style>
Please Guide Me!
thanks!

How can i unify 2 images with drag and drop?

i have 2 css classes , left side and right side of screen and i need to put them togheter, in these classes i have images which look like a puzzle:
By dragging image from the right side to the left side.At drop,must fit with the image from left side. I read about drag and drop but didnt find something like that :(
What i've tried?
EDIT: http://postimg.org/image/je31ptb6d/ (this is an example with my pictures.On top are images separated as classes - class="left" for ca and class="right" for nă.On bottom are images after i drop the image from right to one from left.My question is how to specify the correct drop zone to make images look like bottom one from link after i drop image from right side? )
JS/Jquery:
// shuffle function for right side only
$(document).ready(function() {
var a = $(".right > img").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) {
var j = Math.floor(Math.random() * (i + 1));
var bi = a[i];
var bj = a[j];
a[i] = bj;
a[j] = bi;
}
$(".right").append(a);
});
// drag and drop
$(function() {
$( ".right img" ).draggable
({
cursor: 'move',
revert: 'invalid',
});
$( ".left img" ).droppable({
tolerance: 'fit',
});
});
HTML:
<div class="left">
<img class="piese" id="piesa1" src="images/Text_1.svg" />
<img class="piese" id="piesa2" src="images/Text_2.svg" />
<img class="piese" id="piesa3" src="images/Text_3.svg" />
<img class="piese" id="piesa4" src="images/Text_4.svg" />
</div>
<div class="right">
<img class="piese" id="piesa5" src="images/Text_5.svg" />
<img class="piese" id="piesa6" src="images/Text_6.svg" />
<img class="piese" id="piesa7" src="images/Text_7.svg" />
<img class="piese" id="piesa8" src="images/Text_8.svg" />
</div>

To solve your problem you must build a grid
and use drag drop by taking as a reference the location of the squares of the grid.
This is a simple example to give you an idea.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#grid{
background-color: #09F;
height: 130px;
width: 390px;
position:relative;
margin:100px auto;
}
.square{
height: 128px;
width: 128px;
border:1px solid #999;
float:left;
}
#first-image{
position: absolute;
left: 0px;
}
#second-image{
position: absolute;
right: 0px;
}
</style>
</head>
<body>
<!--take two images by 120px with this class and id -->
<div id="grid">
<img class="dr" id="first-image" src="your-image.png" width="128" height="128">
<img class="dr" id="second-image" src="your-image.png" width="128" height="128">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
for(xx = 0; xx < 3; xx++) {
$("#grid").append($('<div class="square"></div>'));
};
$('.dr').on("dragstart", function (event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('div.square').on("dragenter dragover drop", function (event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
de=$('#'+data).detach();
var x = $(this).position().left;
var y = $(this).position().top;
de.css({'position':'absolute','top':y+'px','left':x+'px'}).appendTo($(this));
};
});
});
</script>
</body>
</html>