How can I open an image in a new window by using its id?
function swipe()
{
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.style.width=200+"px";
largeImage.style.height=200+"px";
}
This function is called on click on the image. Right now, it's opening in the same window, but I want to open it in a new window. How can this be accomplished?
function swipe() {
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.style.width=200+"px";
largeImage.style.height=200+"px";
var url=largeImage.getAttribute('src');
window.open(url,'Image','width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');
}
HTML code:
<img src="abc.jpg" onClick="swipe();"/>
For a new window that has a good chance of being lost behind the main window, and generally annoying visitors:
window.open('http://example.com/someImage.png');
I'd just stick to a regular link if I were you.
Try:
<img src="URL or BASE64" onclick="window.open(this.src)">
Try with the following function:
function newTabImage() {
var image = new Image();
image.src = $('#idimage').attr('src');
var w = window.open("",'_blank');
w.document.write(image.outerHTML);
w.document.close();
}
Call with this HTML code:
<img id="idimage" src="data:image/jpg;base64,/9j/4A.." onclick="newTabImage()">
HTML:
<input type="button" onclick="test()" value="test">
JavaScript
function test(){
url = "https://www.google.de//images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";
img = '<img src="'+url+'">';
popup = window.open();
popup.document.write(img);
popup.print();
}
Try this: https://jsfiddle.net/ne6f5axj/10/
You have to put the url of image in an image-tag.
Something like
window.open(url,'htmlname','width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');}
But you might run in trouble, if someone uses AdBlock or any PopUp-Blocker.
window.Open("http://yourdomain.com/yourimage.gif");
Related
My teacher told me that I cannot put Onclick and OnMouseover etc in my html? I need to put it into my .JS fille? After some search on google everyone is doing the same thing like I'm? I can only use Javascript
Can anyone help me out?
<script type="text/javascript">
var pauseSlider=false;
var image = []
image[0]=new Image()
image[0].src = "./images/1.jpg"
image[1]=new Image()
image[1].src = "./images/2.jpg"
image[2]=new Image()
image[2].src = "./images/3.jpg"
image[3]=new Image()
image[3].src = "./images/4.jpg"
</script>
This is my preloading (html, can stay there)
<img src="./images/1.jpg" name="slide" onmouseover="pauseSlider=true" onmouseout="pauseSlider=false" onclick="slideNext()" width=960 height=500>
So this is my 'mistake' I have to put 'onclick' and onmouseover etc in my .JS fille, I don't know how and where!
var step = 1
document.getElementsByName'slide'
function slideit(){
if(!pauseSlider)
{
slideNext()
}
setTimeout("slideit()",2500)
}
function slideNext()
{
var slideimage = document.getElementsByName("slide")[0];
slideimage.src=image[step].src
if (step<image.length-1)
step++
else
step=0
}
This is my Javascript file (it's a imageslider)
I hope i've followed the rules, not sure about the 'code block'
I thank you!
Something like this:
var slideimage = document.getElementsByName("slide")[0];
slideimage.onclick = function() { ...... };
there many ways to bind events, described here
http://triaslama.wordpress.com/2008/07/22/four-ways-javascript-binding-event-listeners/
Add an id to your slide container...
<div id="slider">
<img src="./images/1.jpg" name="slide" onmouseover="pauseSlider=true" onmouseout="pauseSlider=false" onclick="slideNext()" width=960 height=500>
</div>
Then add your javascript like this...
window.onload = function(){
var slider = document.getElementById('slider');
slider.onclick = slidenext;
slider.onmouseover = function(){pauseslider = true;};
slider.onmouseout = function(){pauseslider = true;};
};
i suppose you might wanna try element.addEventListener(event, cbfunction, boolean);
https://developer.mozilla.org/it/docs/DOM/element.addEventListener
so so new at this and are trying to get a schooljob done, but I have got stuck..
This code is going to work like this. a user is going to be able to upload images, it will be stored in a database, a thumbnail is to be shown on the site and will be enlarged onclick.
my question. I get the picture to show on the page, but how do I make it as thumbnail? JQuery? Fancybox? I havn´t gotten the hang of how to implement it.
Please help!
Current code is:
<script type='text/javascript'>
function main()
{
var inputFileToLoad = document.createElement("input");
inputFileToLoad.type = "file";
inputFileToLoad.id = "inputFileToLoad";
document.body.appendChild(inputFileToLoad);
var buttonLoadFile = document.createElement("button");
buttonLoadFile.onclick = loadImageFileAsURL;
buttonLoadFile.textContent = "Load Selected File";
document.body.appendChild(buttonLoadFile);
}
function loadImageFileAsURL()
{
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
if (fileToLoad.type.match("image.*"))
{
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var imageLoaded = document.createElement("img");
imageLoaded.src = fileLoadedEvent.target.result;
document.body.appendChild(imageLoaded);
};
fileReader.readAsDataURL(fileToLoad);
}
}
}
main();
</script>
</body>
</html>
If you only have a copy of the image (the original), then you can adjust the image size with CSS Dimension Properties. This question shows how to create a thumbnail gallery.
No php, no fancybox, but this works:
insert the following into the body:
<div id="div1">
<img id="img1" height="100px" width="100px" />
</div>
replace the following 4 lines:
// var imageLoaded = document.createElement("img");
// imageLoaded.src = fileLoadedEvent.target.result;
// document.body.appendChild(imageLoaded);
// };
with the following 2 lines:
document.getElementById("img1").src = fileLoadedEvent.target.result;
}
I'm trying to create a lightbox and I'm having trouble.
I think the problem is either because I have 2 window.onloads or because I'm trying to reference a newly created DOM element. I added some comments in the code below that explain what I'm trying to do.
//open lightbox
window.onload = showLargeImage;
function showLargeImage() {
var enlargeButton = document.getElementById("thumb1"); // thumb1 is a thumbnail you click to get the lightbox
enlargeButton.onclick = handleClick;
}
function handleClick() {
var lightboxContainerId = document.getElementById("lightboxContainer");
lightboxContainerId.innerHTML = '<div class="lightbox"><a class="reduceButton" href="#" ><img id="imageButton" class="largeImage" src="2012/images/web/web1.jpg" width="500" height="500" alt="Web Thumb 1"></a></div>';
} // the inner HTML creates the lightbox.
//close lightbox
window.onload = reduceImage; // i'm pretty sure that this windo.onload is the problem... or, that I'm referencing "imageButton" which is new to the DOM
function reduceImage() {
var reduceButton = document.getElementById("imageButton"); // you're supposed to click the big image in the lightbox to get close it.
reduceButton.onclick = handleReduceClick;
}
function handleReduceClick() {
var shadeId = document.getElementById("lightboxContainer");
shadeId.innerHTML = "say what"; // closing the lightbox simply strips everything out of the lightboxContainer
alert("oh yeah");
}
Here are a few reasons why your code is not working:
showLargeImage and reduceImage are missing invocation parentheses in the places where they are being assigned to window.onload. Without parentheses, window.onload is being assigned a function, but that function is not getting called. You should, for instance, have window.onload = showLargeImage();
As you suspected, the second window.onload is overwriting the first.
reduceButton is (as you also suspected) being assigned before it exists, causing an error.
Here is one solution that may work for you.
HTML:
<!DOCTYPE html>
<html><head><title></title>
</head><body>
View
<div id="lightboxcontainer"></div>
</body></html>
JavaScript:
window.onload = function() {
// click link to show
var enlargeButton = document.getElementById('thumb');
enlargeButton.onclick = function() {
var lightboxContainerId = document.getElementById('lightboxcontainer');
lightboxContainerId.innerHTML = '<img src="http://placehold.it/350x150"' +
'width="350" height="150 alt="Thumb 1">' +
'<p>Click image to hide.</p>';
};
// click image to hide
var reduceButton = document.getElementById('lightboxcontainer');
reduceButton.onclick = function() {
reduceButton.innerHTML = ''; // removes lightbox contents
};
};
Live demo: http://jsfiddle.net/ericmathison/BxwYY/7/
If the code is placed at the end of the <body> (or anywhere after your lightbox elements), just use this:
document.getElementById("thumb1").onclick = function () {
document.getElementById("lightboxContainer").innerHTML = '<div class="lightbox"><a class="reduceButton" href="#" ><img id="imageButton" class="largeImage" src="2012/images/web/web1.jpg" width="500" height="500" alt="Web Thumb 1"></a></div>';
document.getElementById("imageButton").onclick = function () {
document.getElementById("lightboxContainer").innerHTML = "say what";
alert("oh yeah");
};
}
This will do everything you want.
Is it possible to assign a Javascript image object directly to the DOM? Every example I've seen has the image object being loaded and then the same file name assigned to an HTML element and my understanding is that the actual image data is coming from the browser cache in the filing system.
I want to guarantee that the image is loaded so I want to load it into a Javascript image object have the data in memory and then add it directly to the page.
Is this possible?
Cheers, Ian.
You can create the image element and append it directly to the DOM once it has loaded:
var image = new Image();
image.onload = function(){
document.body.appendChild(image);
};
image.src = 'http://www.google.com/logos/2011/guitar11-hp-sprite.png';
example: http://jsfiddle.net/H2k5W/3/
See:
<html>
<head>
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">
<img name="img01" src="justanotherfile.jpg"></a>
</body>
</html>
Reference:
http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317
if (document.images) {
var preload_image_object = new Image();
var image_urls = new Array();
image_urls[0] = "http://mydomain.com/image0.gif";
image_urls[1] = "http://mydomain.com/image1.gif";
image_urls[2] = "http://mydomain.com/image2.gif";
image_urls[3] = "http://mydomain.com/image3.gif";
var i = 0;
for(image_url in image_urls) {
preload_image_object.src = image_url;
}
}
I have a page with pictures, which I want to displayed in a popup.php when clicking on them.
I want the popup window to display a picture(the one I'm clicking on), some text, and a print button.
I'm doing this on the page:
<img src="graphics/picture1.png" width="340" height="200" border="0"/>
In the JS file:
function popup()
{
window.open('popup.php', 'window', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=520,height=400,left=350,top=100');
}
function showImg(img)
{
var imageSrc = "imageName/imagePath.png";
if(img.src != imageSrc){
img.src = imageSrc;
}
}
And in the popup.php:
<img src="graphics/picture03.png" onload="showImg(this)" />
There should be an obvious way, but I can't find it.
I would think adding the image name and text content to the URL would be the obvious way.
popup.php?image=myImage.gif&text=Say%20something%20witty%20here
Well, you'll want to have your popup contain a holder for the image (which it seems like you already have), but you'll also need to have a holder for your text. Your popup.php should have something like <div id="textHolder"></div> - then your javascript function needs to accept the appropriate text as well as populate it into the textHolder div.
I'm not sure how you're calling these JS functions, or from where - so some of the code might need to change - it should be something to the tune of....
function showImg(img, textHolderObj, text)
{
var imageSrc = "imageName/imagePath.png";
if(img.src != imageSrc){
img.src = imageSrc;
}
textHolderObj.innerHTML= text
}
If is that simple, you could create it:
var win = window.open('', 'win', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=520,height=400,left=350,top=100');
var img = win.document.createElement('img');
img.src = 'image.png';
img.alt = 'Some text';
var label = win.document.createElement('p');
label.innerHTML = 'Some text';
var button = win.document.createElement('a');
button.href = 'javascript:window.close()';
button.innerHTML = 'Close';
win.document.body.appendChild(img);
win.document.body.appendChild(label);
win.document.body.appendChild(button);
I don't get the question too well. You want to access a function that was defined in the page that opened a popup? You should be able to use opener.showImg(this)
your popup has no idea what image you clicked on. you need to do this:
onClick="popup('imgSrc')"
and in your window reference:
window.open('popup.php?imgSrc='+imgSrc, ...
then... your popup window has to run off of url vars, but php now knows what its looking for:
<?php echo '<img src="' . $_GET["imgSrc"] . '" />'; // this is going to load the image, so you don't need the onLoad()
It is possible to create a new popup window using a variable
top.mydocument=window.open('','window','toolbar=no,location=no,
status=no,menubar=no,scrollbars=no,resizable=no,
width=520,height=400,left=350,top=100');
and then use document.write to write the content:
top.mydocument.document.write(
'<html><head></head>'
+'<body bgcolor=white onLoad="self.focus()">'
+'imageName/imagePath.png'
+'</body></html>'
)
Make sure you close it.
top.mydocument.document.close()