How can I open an image (with an url which is a mako variable) in a new window inside a mako template? I would like the simplest thing possible. This is what I'm trying to use:
<script>
function openImage(image_url) {
window.open('_blank').document.write('<img src="' + image_url + '">');
}
</script>
<img src="${image_overview_url}" onclick="openImage(${image_to_open_url});">
However, no new window opens with the code above... Any other options how to achieve this?
You might try putting quotes around your image url in your onclick attribute. I have replaced openImage(${image_to_open_url}) with openImage('${image_to_open_url}'). I don't think it can bare as you have it.
<script>
function openImage(image_url) {
window.open('_blank').document.write('<img src="' + image_url + '">');
}
</script>
<img src="${image_overview_url}" onclick="openImage('${image_to_open_url}');">
If you put the reference to the picture in the link and a target="_blank" it should work.
<img src="${image_overview_url}">
Related
Hello I am trying to write coding for my website using Javascript and HTML. I have images on my website that I would like to have pop up or float on the side of the screen when you have your mouse over the link. I know I need to use onmouseover for this in the HTMl but I am having a lot of trouble understand Javascript and how to make this happen. The book I am using says to make add a statement to the function I made to set the value of the HTML code for the element with pix to the text
are file and desc already in javascripts language? does it know what those mean or do I need to add cariables for them and if so how do I do that?
I know it wants the file value to be the file name and the desc to be the text in the alt section of my HTML.
this is the coding that I made.
function switchPix(file, desc){
document.getElementById("pix").innerHTML=("<img src=\"images/file.jpg\" width\"480\" height=\"270\" alt=\"desc\" />");
}
I noticed that a lot of the ways everyone was refering to the image was with http but the image i have is just an image file like museum.jpg that I am suppose to be taking from a folder and putting into the website. can I just reference it like normal? "
If your images are part of your style and not part of critical content use them as background images and change them with css (img:hover for example). For effects use transitions and animations in css. It's 2016 and they are pretty good supported nowadays. This year I have moved as much as possible UI effects into CSS.
Solution for your question in pure js.
//First of all learn more about concatenation.
function switchPix(file, desc){
document.getElementById("pix").innerHTML=('<img src="' + file + '" width="480" height="270" alt="' + desc + '" />');
}
//Place first pic you want people to see
switchPix("firstPicURL", "My alt");
var pix = document.getElementById("pix");
//Use second pic for mouseover
pix.addEventListener('mouseover', function(){
switchPix("secondPicURL", "My alt");
}, false);
//Use firstPic for mouseout
pix.addEventListener('mouseout',function() {
switchPix("firstPicURL", "My alt");
},false)
I think the main problem is the concat you're using
function switchPix(file, desc){
document.getElementById("pix").innerHTML=('<img src="' + file + '" width="480" height="270" alt="' + desc + '" />');
}
switchPix("https://http.cat/100", "Continue");
https://jsfiddle.net/coins5/vu80586x/
As you have tagged jquery, I've taken the liberty to use it.
Below is an example on how to do this using jquery, I've thrown in a couple comments along the way to help explain what's going on
Edit: Note that it does show the image in fullsize, but you will have to scroll down to see it, I've made a commented javascript where I hope you'll take your time to read the comments and try to understand what's going on, but you'll be the one to style it to your needs
// The dollar sign is the object which contains everything related to jquery
// If you get an error about it not finding jquery, make sure you have the jquery script reference in the html.
// $("css selecter") - In this clase the class "picture"
// hover has 2 arguments, first is the function to call when your mouse moves in above an element
// 2nd is when your mouse leaves the lement
$(".picture").hover(function() {
// "this" is the element that is hovered above
// $(this).attr(propertyName) returns a property from "this"
// In the snippet you included, you added the the names of the variables as string literals
// That means if we do something like this
// var src = "image.jpg";
// var img1 = "<img src=\"src\" >";
// var img2 = "<img src=\"" + src + "\" >";
// img1 is now => <img src="src" />
// img2 is now => <img src="image.jpg" />
// Be sure to understand what's going on in these 5 lines above, I do believe that's what went wrong in your own script.
$("#pictureDisplayContainer").html("<img src=\"" + $(this).attr("data-displaySrc") + "\" />");
},
function() {
$("#pictureDisplayContainer").html("");
});
.picture {
display: block;
max-width: 100px;
margin-bottom: 10px;
}
#pictureDisplayContainer > img {
display: block;
max-width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Out of pure laziness, I've used the same image for thumbnail and full-size, I recommend having 2 different pictures which are both scaled to match the purpose.</p>
<img class="picture" src="http://cdn.artobserved.com/2014/02/Andisheh-Avini-Marianne-Boesky-Gallery-8.jpg" data-displaySrc="http://cdn.artobserved.com/2014/02/Andisheh-Avini-Marianne-Boesky-Gallery-8.jpg" />
<img class="picture" src="http://www.wentrupgallery.com/media/gallery.jpg" data-displaySrc="http://www.wentrupgallery.com/media/gallery.jpg" />
<div id="pictureDisplayContainer"></div>
Including a sample snippet to play around with.
We have created a sample HTML page with few links and the idea is to show the relevant image based on the action (here I am including click action / event; it can be changed to anything based on your requirement) on those links.
To answer the questions:
I am having a lot of trouble understand JavaScript and how to make
this happen
As stated, we have included an handler to the click event to the element a. Upon the action (which is click), the handler would be called with the parameters which we have passed. In this case - a file (an image) and description (description of the image).
function switchPix(file, desc) {
// construct the HTML
var html = "<img src='" + file + "' width='480' height='270' alt='" + desc + "' />";
// Find the element and set as it's inner HTML
document.getElementById("pix").innerHTML = html;
}
.navlist {
list-style-type: none;
}
.navlist li {
display: inline-block;
padding: 20px;
background-color: #F3F3F3;
}
.navlist li a {
text-decoration: none;
color: #76432a;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>My Website</title>
</head>
<body>
<div class="nav">
<ul class="navlist">
<li>
<a href="#" onclick='switchPix("https://upload.wikimedia.org/wikipedia/commons/b/bf/Bucephala-albeola-010.jpg", "Duck");'>Duck</a>
</li>
<li><a href="#" onclick='switchPix("https://upload.wikimedia.org/wikipedia/commons/0/08/South_Shetland-2016-Deception_Island%E2%80%93Chinstrap_penguin_%28Pygoscelis_antarctica%29_04.jpg", "Penguin");'>Penguin</a>
</li>
<li><a href="#" onclick='switchPix("https://upload.wikimedia.org/wikipedia/commons/b/bb/Kittyply_edit1.jpg", "Cat");'>Cat</a>
</li>
</ul>
</div>
<div id="pix">
</div>
</body>
</html>
I know it wants the file value to be the file name and the desc to be
the text in the alt section of my HTML.
The JavaScript function can be constructed and invoked based on our choice. Coming to this case, we are giving an image element a source (file) and alt(description; when the image cannot be loaded, we have to at least show what we intended).
I have 2 htm files: a.htm and b.htm. In b.htm I have 2 divs, in one is a link to a.htm which I would like to open in second div but it opens as new page in new tab. I'm not good in javascript but I looked many examples so I believe I'm very close to solution but obviously have some error somewhere. Please help!
So, in a.htm I have this:
<html>
<body>
TEST
</body>
</html>
In b.htm I have this:
<html>
<head>
<script language="JavaScript">
function url2div(url,target){
document.getElementById(target).innerHTML = '<iframe style="width:100%;height:100%;" frameborder="0" src="' + url + '" />';
}
</script>
</head>
<body>
<div id="menu" style="background-color:#FFD700;height:100px;width:100px;float:left;">
Click
</div>
<div id="content" style="background-color:#EEEEEE;height:100px;width:400px;float:left;">
Original content
</div>
</body>
</html>
Store your link inside the function instead of the href attribute:
Click
Change JS to this:
function url2div(url, element) {
var iframe = document.createElement('iframe');
iframe.setAttribute('src', url);
element.appendChild(iframe);
}
JSFiddle Demo #1
if you want to open the link in the same iframe, store the link in any other property other than href. Then, use your current function and it should work fine!
Click
JSFiddle Demo #2
I think this isn't as complicated as you're making it. Also, the previous answer isn't quite doing what the OP is asking...so here's my stab at it:
First, I assume html5, so you don't need the "javascript" as part of your script tags. Secondly, I don't think you need to pass around all those variables. Your anchor tag should reference
<a href=b.htm#content onclick="url2div();"<\a>
and your javascript should be
otherPageText = "<iframe src=\"HtmlPage2.html\" width=\"200\" height=\"200\"></iframe>";
document.getElementById("content").innerHTML = otherPageText;
After that, if you need variables, carefully try to pass them in one at a time.
Part of the original problem is that you're passing "this" which references the new page, not the old one, but by the time that happens you're on the new page and not bringing over the one you want back to the first page. Part of why I stayed away from it.
PS Sorry for the bad formatting. This is all very new to me...
So I have the following JavaScript function.
var LogoUrl = function() {
document.write('views/img/common/site-logo.svg');
}
And I want to have this function used in a html img src attribute.
Here is a example though this syntax wouldn't work, it should give you an idea of what I am looking for.
<img class="site-logo" src="<script> LogoUrl() </script>" alt="Site Logo">
And hoping this would export the following in the browser
<img class="site-logo" src="views/img/common/site-logo.svg" alt="Site Logo">
What is the best approach to doing this?
You can do this with the following instead:
<script>
document.write('<img class="site-logo" src="' + 'views/img/common/site-logo.svg' + '" alt="Site Logo">');
</script>
Since the script tag is indeed a tag, you can't put it inside the attributes of another tag.
A much better approach however would be the following:
Prepare a span element for the element to appear in, and give it a specific id. This would be your HTML:
This is my image: <span id="myImg"></span>.
and this will be your jQuery code:
$(function() {
$('<img>').class('site-logo')
.attr('src', 'views/img/common/site-logo.svg')
.attr('alt', 'Site Logo')
.appendTo('#myImg');
});
Alternatively, instead of preparing a span, you could prepare the image without defining a src attribute, with the following HTML:
This is my image: <img id="myImg" class="site-logo" alt="Site Logo">.
and the following jQuery code:
$(function() {
$('#myImg').attr('src', 'views/img/common/site-logo.svg');
});
You can use jquery $(document).ready() to set the image src.
$(document).ready(function (){
$('img.site-logo').attr('src', 'views/img/common/site-logo.svg');
});
You could do this - but this makes it obstructive.
<script>document.write("<img class=\"site-logo\" src=\"views/img/common/site-logo.svg\" alt=\"Site Logo\">")</script>
It is also not very organised because it ties everything so much with the markup that you might as well just have it as markup.
You're better off doing it properly by changing the src property
var logo = document.getElementsByClassName('site-logo')[0];
logo.src = 'http://www.develop.com/Images/v3/tech-symbols/angularjs_logo.png';
demo here http://jsfiddle.net/andyw_/XxTuA/268/
If this is all you need to do - I don't think it justifies the use of a selector library or front-end framework.
Ok, simple thing I'm overlooking here. The following javascript is returning the title variable outside the anchor tag rather than inside of it (as the code looks to be written to me).
I know I'm missing something obvious, like a method to return the variable as a string or something similar but I'm not sure what's going on.
Help?
EDIT: My mistake, it's "view site" which is being returned outside the <a> tag
// Convert logo img alt tags into div.caption 's
$(".imgs_wrap img").each(function(i, ele) {
var title = $(ele).attr('title');
var description = $(ele).attr('alt');
$(this).parent().prepend('<div class="caption popup"><p> ' +description + ' <a target="_blank" class="view_site" href="http://'+title+'" />View Site</a></div></p>');
});
You're mistakenly using the self-closing tag syntax when rendering the <a>:
bad line:
$(this).parent().prepend('<div class="caption popup"><p> ' +description + ' <a target="_blank" class="view_site" href="http://'+title+'" />View Site</a></div></p>');
change to:
$(this).parent().prepend('<div class="caption popup"><p> ' +description + ' <a target="_blank" class="view_site" href="http://'+title+'" >View Site</a></div></p>');
I need to put a javascript variable as image source. That is my image tag should be in this format
here i am adding my script
document.getElementById("pricefilter").innerHTML ='<img src="variablename/spinner.gif" title="Loading..." alt="Loading...">';
The variablename carries my image path. How can I put this in double quates.
Please help to solve this
Strings can be added together, if variablename contains the path:
document.getElementById("pricefilter").innerHTML ='<img src="' + variablename +
'/spinner.gif" title="Loading..." alt="Loading...">';
If i get your question correctly use
document.getElementById("pricefilter").src=ur variable;
One of previuos stackoverflow ques similar to urs showed this
<img src="blank.png" id="image" alt="just nothing">
<script type="text/javascript">
document.getElementById('image').src = "yourpicture.png";
</script>