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.

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

How to open an image by clicking the image button

I am trying to open another image when I press the image button - I am completely new to html. I heard that you need to use the onclick to get that. Here it is what I am trying:
input type="image" src="img/gallery/5.jpg" onclick="img/floor.jpg"
Where 5.jpg is the thumbnail view and floor.jpg is the target image (present in another directory).
But the above piece of code is not working for me.
What is the correct approach?
Why this is failing ??
i used the solution to open a number of images
<img src="img/gallery/5.jpg"/>
<img src="img/gallery/6.jpg"/>
<img src="img/gallery/7.jpg"/>
<img src="img/gallery/8.jpg"/>
<img src="img/gallery/9.jpg"/>
<img src="img/gallery/10.jpg"/>
but every time it opens only the 10.jpg
Help
thanks

Why use an input and javascript in the first place ?
Just use a link
<img src="img/gallery/5.jpg">

Just use a an onclick javascript event to toggle the visiblity of the second image.
something like below.
<input type="image" onclick="image.style.display=inline;">
<img src="../5.jpg" id="image" style="display:none;"

tinyMCE Image Displaying Correctly, but not Updating src

I've run into a strange problem with the tinyMCE and images. I'm trying to update an image that's already been added to the tinyMCE. For example, let's say I have the following image
<img src="image1.png" title="title1" alt="alt1" class="class1" />
I run the following script:
imageNode.setAttribute('src', 'image2.png');
imageNode.setAttribute('title', 'title2');
imageNode.setAttribute('alt', 'alt2');
imageNode.setAttribute('class', 'class2');
And the result is:
<img src="image1.png" title="title2" alt="alt2" class="class2" />
Notice that I'm still getting image1, not image2, yet everything else is updating fine. Further, the new image (image2) displays in the tinyMCE, not the old image. Still, when I click the HTML button on the tinyMCE, it shows that the src has not updated correctly.
When I look at the source code, I see:
<img src="image2.png" data-mce-src="image1.png" title="title2" alt="alt2" class="class2" />
Notice here that the src is actually correct, but there is an additional attribute data-mce-src. When I try to update my content. That data-mce-src seems to be used as the src of my image.
Is there another way that I should be setting the src of my image besides setAttribute?
UPDATE:
I'm thinking it has something to do with this http://www.tinymce.com/wiki.php/Configuration:convert_urls
However, I like that it uses relative URLs and I'd like to keep that if possible.

I added imageNode.setAttribute('data-mce-src', 'image2.png'); and that did the trick. Hopefully this will help someone else in the future.

you can solve it adding in tinymce.init :
relative_urls : false,
content_css : ""
convert_urls : false,

CSS/Javascript Lightbox

First I'll start with this: I am in no way shape or form a developer, coder etc etc. I'm just a graphic designer helping a friend with her website.
As of right now, I'm having issues linking up thumbnails to the full images on my lightbox call out - you can view the site at www.chrissybulakites.com
I noticed
With VOID:(0) being in every single one ... my thought process was that if I correspond 0 thumb with 0 full then 1 thumb with 1 full then 2 thumb wwith 2 full etc etc it would work .. it didn't.
Can somebody explain to me if I'm on the right path or what I can do to make this work.
Thanks
Rob

Have have two basic elements per image; the thumb and the full image. The thumb is using JavaScript to show and hide a div (kind of like a frame) to hold the full image.
The HTML on the page repeats itself a lot, you can probably solve your problem whilst removing some of the repetition. I'd keep all of your thumbs but on each one, add in a reference to the full image the thumb represents. As well as reducing repetition, it'll make it easier to update the page in the future as changing a thumb and main image is done in one place rather than two.
In the below I've added another part to the "onclick" to say update the src of 'frame' to be the full version of the thumb.
<img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" />
Then delete all of the large images except one, updating it so that the img tag has an ID of 'frame'
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA Close</div>
<div id="fade" class="black_overlay"></div>
This will mean that as each thumb is clicked, it will do the light and fad bits it did before but it will also update the image being displayed.
Doing this for two images as a proof of concept I get this which works as expected:
<img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" />
<img src="http://chrissybulakites.com/thumbnails/actor_thumbnail.png" />
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA Close</div>
<div id="fade" class="black_overlay"></div>

you need to give each full image div its own unique id like: id="image23". Then modify the onclick to refrence the corresponding id: onclick="document.getElementById('image23')...

The meaning of the function void() in JavaScript is "do nothing". This prevents it to load a new new page (or to open the thumbnail image).
onclick = "document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block' "
Says that when user clicks that item it will capture the element light and change the display to block it will also capture the element fade and change the display to block. The thing is all your images are wrapped in an element called "light" so the browser is opting to show the first one (instead of throwing an error).
There is plenty of fuzzy logic here.
Starting with the fact that you are loading all images (the high definition ones).
If you want my two cents (and you only want to get the results, as opposed to learn how JavaScript works) I would go with something like prettyPhoto that does it out of the box, in an easy and straightforward way and is well documented.
How to add prettyPhoto to your page?
Download the code and include both the Javascript and the CSS file's on your header.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
Then put this code on your page
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
The docs say to put it on the bottom of the page but you (should) also put it on the header.
And then put the thumbnails with links to the actual images. PrettyPhoto will take care of everything else. Do note the rel="prettyPhoto[my_gal]"
<a href="img/full/1.jpg" rel="prettyPhoto[my_gal]" title="Caption 1">
<img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" />
</a>
You can customize it further and should really read the manual here.