Develop Reference

javascript zoom and drag multiple images within div. got some code but cant get to an end

i have this code https://jsfiddle.net/j8kLz6wm/1/
when i add another image it does not work
<img ondragstart="return false" id="drag-img" src="http://www.patsoy.com/p/2015/09/geometric-patterns-f03phtdx.jpg" />
and it nicely does what i need,
but i cannot get my head around how to have multiple images in this div which all can be moved freely.
i want to be able to make collages with multiple images.
thanks for any help

I've just gone with your codebase. I think the image url is wrong.
it working well with this url https://via.placeholder.com/150.
I think you have to check your image url.
You can use classname instead of id to handle this issue.
<div id="container">
<img ondragstart="return false" class="drag-img" src="http://www.patsoy.com/p/2015/09/geometric-patterns-f03phtdx.jpg" />
<img ondragstart="return false" class="drag-img" src="http://www.patsoy.com/p/2015/09/geometric-patterns-f03phtdx.jpg" />
</div>
And add addEventListener to each items
var items = document.getElementsByClassName('drag-img');
for (let item of items) {
item.addEventListener(event_start, start_drag);
}
here is the codebase. https://jsfiddle.net/jsdev778/5myvsxzw/21
Hope this help you.

Display images in a popup/ new tab/window when View button is clicked

Here the code I have tried. *val is a variable and it theFunction() will be called for multiple images.
<th style="color:#cc0000">Fail</th><td>view
<img id="myimage8" class="hide" src="image1.jpg" alt="check image path" width="100px" height="100px">
<img id="myimage_8" class="hide" src="image2.jpg" alt="check image path" width="100px" height="100px"></td>
<script>
function theFunction(val) {
obj0=document.getElementById('img'.concat(val));
obj1 = document.getElementById('myimage'.concat(val));
obj2 = document.getElementById('myimage_'.concat(+val));
obj1.className=='hide'? (obj1.className='',this.value='hide my Image'): (obj1.className='hide',this.value='show my Image');
obj2.className=='hide'? (obj2.className='',this.value='hide my Image'): (obj2.className='hide',this.value='show my Image');
return true;
}
window.addEventListener? window.addEventListener('load',theFunction,false): window.attachEvent('onload',theFunction);
</script>
The actual result:
the images are displayed just after 'view' button when clicked
Expected:
the images are to be displayed in a popup window.
I tried, target="_blank" but it is not working. Someone suggested to use windows.open(), but I don't know how to call it. Can someone help me out to resolve this one?

You can use window.open to open a new URL. If your image is available via a URL that is accessible to consumers, you can just do:
window.open(image-url)
When a user clicks it, it will open your image on a new window
There is one more better option though. I suggest you display the image in a popup without any redirections. You can easily use bootstrap model popup for that. See this for reference.

Load external photo with javascript

I am trying to set the image source of an image object with javascript.
I have tried
<img src="" id="image" alt="">
<p id="change">Change</p>
$("#change").click(function () {
$("#image").attr("src", "some source");
});
The problem is that it seems it does change the src, but it doesn't work if the image wasn't loaded when the page loaded. So I cannot suddenly change to the logo of Stackoverflow. Can this be true? How can I then load the image while changing the source?

I had an issue similar to this a couple weeks ago, the easiest way I managed to solve the issue was by loading all image's you will need, and set all of the ones you don't need right away as hidden. Then when your action that causes the change is triggered, you can change the image visibility on the one you want to disappear and the one you want to be shown.
If you have bootstrap installed, it is as easy as adding and removing a class via jQuery
HTML
<img src="" id="image1" alt="">
<img src="" id="image2" alt="" class="hidden">
<p id="change">Change</p>
Javascript
$("#change").click(function () {
$('#image1').addClass('hidden');
$('#image2').removeClass('hidden');
});

Change the src of HTML image tag to load image from a url using Javascript

Sorry to sound naive since I'm a beginner. I have been trying to load an image on my website with the image hosted somewhere else online and having a url "http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg"
I have an image tag defined as below
<img id="image" src="" alt="" />
Moreover my javascript function executes the following on a button click
document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg";
The URL seems to work fine, but the image doesn't show up onclick.
Am I making any mistake?
Thanks for any suggestion :)

I could see that you are using " inside here, may be the HTML would also have " so that, it might not work. You can use the following code:
<a href="#"
onclick='document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg"; return false'>Change</a>

I created a Jsfiddle, and it seems to work fine.
https://jsfiddle.net/ltlombardi/jvts4m3y/
var coco = function(){
document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2016/02/Vapor-Rage-Small-Logo-new.png";
};
<img id="image" src="" alt="" />
Click here

Javascript: image onclick then slide big image

I really like this slider sample HERE!. But I want to do is assign next/previous onclick command on images display on right side like this:
Instead of clicking those DOTS. I want to assign the onclick EVENT on images(RED BOXES).
How can I tweak that one.
Thank you in advance!

I've simply changed the $navDots variable to point to the images on line 90 of js.
var navDots = $('.nav-images');
this.$navDots = navDots.children( 'img' );
Then use this HTML:
<div class="nav-images">
<img src="http://lorempixel.com/400/200/city" alt="img01" width="100px"/>
<img src="http://lorempixel.com/400/200/business" alt="img02" width="100px"/>
<img src="http://lorempixel.com/400/200/technics" alt="img03" width="100px"/>
<img src="http://lorempixel.com/400/200/people" alt="img04" width="100px"/>
<img src="http://lorempixel.com/400/200/nature" alt="img05" width="100px"/>
<img src="http://lorempixel.com/400/200/sports" width="100px"/>
</div>
Hope it helps! Please see codepen example as well!. http://codepen.io/anon/pen/corjw

Disclaimer
Please do link to the non-minified source of the plugin, so you can modify that file directly. Currently, the plugin handles all the elements inside the #cbp-fwslider area. It may not be advisable to hack from outside, which is what this solution is...
Solution
It looks like you can mimic this by hiding the dots (which is what the plugin uses by default) and using your two elements to trigger click events on the dots. The currently active dot is indicated by a cbp-fwcurrent, so something like $('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent') would select the current dot. Use jQuery's next() and prev() calls check if the relevant dot exists, and then do a $el.trigger('click').
Code Outline (untested)
$('#fwdButton').click(function() {
var $dot = $('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent'),
$nextDot = $dot.next();
if ($nextDot) {
$nextDot.trigger('click');
}
});
`