I've managed to get the picture to open the bigger version of the picture into a new window using this code:
<IMG SRC="pic_small.jpg" onClick="view();">
<script language="JavaScript">
function view() {
imgsrc = "pic_big.jpg";
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
</script>
The problem I got now is that I got many more pictures on my webpage and I'd like to not have to write another function for every script but instead having one function for all the pictures. In other words I'd like to have a script that does the same thing as above, but works on all of these (modified if needed) HTML lines
<IMG SRC="pic1_small.jpg" onClick="view();">
<IMG SRC="pic2_small.jpg" onClick="view();">
<IMG SRC="pic3_small.jpg" onClick="view();">
<IMG SRC="pic4_small.jpg" onClick="view();">
I was also wondering if there is some way to make the window that opens the the same size as the big picture.
For your first question
<IMG SRC="pic_small.jpg" onClick="view(this);">
<script language="JavaScript">
function view(img) {
imgsrc = img.src.split("_")[0] + "_big.jpg";
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
</script>
UPDATE
To your second question, it can be done.
UPDATE 2
This depends on your image names keeping that same format. Alternatively, you could do this:
<img src="pic_small.jpg" onclick="view('pic_big.jpg')" />
<script type="text/javascript">
function view(imgsrc) {
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
</script>
Using a js library such as lightbox is a good option. It does more or less what you ask. See e.g. Lightbox 2
By including lightbox, in combination with jquery, in your html, you can create a list of images with tags with a "rel" property of "lightbox". Lightbox will then automatically activate when you click the link surrounding the image. Here is an example.
image #1
See more examples here in the "how to use" section in the aforementioned link
Look at jQuery library which almost de-facto library for JS.
Using it you can do something like that
$('img').click(function(){
view($(this).attr('src'));
})
function view(small){
var big = small.split("_")[0] + "_big.jpg";
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
This way all your images will have the same behavior
Related
I have a modal dialog that is opened when user clicks in a button. It must be dynamic. It has a lot of images from external sources, e.g. <img src="http://example.com/image.jpg">. After this modal is opened I want to sum the height of all images loaded. So I'm calling imageCalculation() in onShow
<p:dialog
id="myDialog"
widgetVar="myDialogWV"
modal="true"
dynamic="true"
onShow="imageCalculation(); ">
<ui:include src="/somePage.xhtml" />
</p:dialog>
<script type="text/javascript">
function imageCalculation(){
var total = 0;
$.each($('#form\\:myDialog').find('img'), function(k,v){
total += v.naturalHeight;
});
alert(total);
}
</script>
The problem is that at the moment imageCalculation() is called, the images haven't been loaded from external sources yet, and naturalHeight is still 0.
Is there a way to run a javascript after all the dialog content is completely loaded?
EDIT: The content from somePage.xhtml is populated by a p:dataGrid that gets HTML code pieces from DB. Some of these codes are <img... So theoretically I can't change them
Thanks
I've found a plugin to help me: waitForImages jQuery plugin
$('selector').waitForImages(function() {
alert('All images are loaded.');
});
I'm not sure but you can try to add onload attribute to all pictures.
Like this:
<script>
function loadHandler(x) {
console.log(x+" element loaded!");
}
</script>
<img src="img1.png" onload="loadHandler('1 image')">
<img src="img2.png" onload="loadHandler('2 image')">
//etc...
Then you can count pictures for loading and already loaded ones in loadHandler()
I am trying to swap images using JavaScript. I have a main content area the loads one image. I have a sidebar with a list of links and I want to use JavaScript to change the image with each link. here is my code so far:
<html>
<head>
<title>Rat Dog Inc. ~ Services</title>
<script type="text/javascript">
var myImg;
var myImage= [];
myImage[0] = "../images/rd_surf_large.jpg";
myImage[1] = "../images/laundry.png";
myImage[2] = "../images/tug-o-war.png";
myImage[3] = "../images/cuddlepuppy.png";
myImage[4] = "../images/rd-howling.mp4";
function displayImg(){
document.getElementById('myImage[]');
}
</script>
</head>
<body>
<div id="main">
<img src="../images/rd_surf_large.png" alt="Rat Dog Inc." id="myImg"/>
</div>
<div id="sidebar">
<h2>Rat Dog Inc. Most Popular Services</h2>
<ul>
<li>Surfing Lessons <span style="font-size: 12px">(img)</span></li>
<li>Laundry Folding <span style="font-size: 12px">(img)</span></li>
<li>Tug-O-War Arm Workouts <span style="font-size: 12px">(img)</span></li>
<li>Cuddling <span style="font-size: 12px">(img)</span></li>
<li>Howling Lessons <span style="font-size: 12px">(video)</span></li>
</ul>
</div>
Ok. So here's the deal.
When you put your image on your page , like this:
<img src="image1.jpg" id="myImage">
And we assign the I'd 'myImage' to it....if we want to change the image via a link (I prefare a button), we use javascript in a way to manipulate it.
You simply use this method known as :
document.getElementById()
Which finds an element in our page by its I'd.
So if we put this button on our page:
<button onclick="changeImage()">Change The Image</button>
And put this script (which has the changeImage() function) :
<script>
function changeImage(){
var myImage = document.getElementById("myImage");
//then we change the src of the image
myImage.src="image2.jpg"
}
</script>
Our image will change of we click the button.
For reference , please visit http://www.htmldog.com/guides/javascript/intermediate/thedom
Thank you
You can use document.getElementById("image").src="image.png"; to change the src tag of an element.
Although for what you are doing, I reccomend you take a look at jQuery
please try and use this method of getElementById
For example:
<img id="image" src="image1.jpg">
<button onclick="changeToImage2('image')">Image 2</button>
<script>
function changeToImage(id) {
var myImage = document.getElementById(id);
myImage.src = "image2.jpg";
}
// then create other buttons and other functions to change the image.
</script>
Your javascript is incorrect. I'm not quite sure you understand how it works.
First of all, your function doesn't accept any parameters, and yet you're providing it with one. It will just ignore this because it doesn't know what to do with it.
Next, your document.getElementById in your displayImg() has the wrong input. Right now it's literally looking for an element with the ID "myImage[]"... of which there are none.
Also, you have a variable you never use (myImg). You should probably get rid of it.
Again, I'm getting the sense that you don't really know javascript that well or don't get the theory behind it. If you need help, w3schools has some great tutorials.
So what I'm trying to do is to get the first image in a blogpost to look like a header for every blog post page....
This is what I have so far:
<b:if cond='data:post.firstImageUrl'>
<img expr:src ="data:post.firstImageUrl" expr:alt="data:post.title"/>
</b:if>
But then it's not really working. Can someone please help me out? Please see this for an example. I want the first image in my post to look like that header on the page....
I have had trouble with that too. I suppose you want to use the image as a background image.
I worked around that using some jquery.
Your aim is a little bit different than mine, so I would suggest you actually add a class to your first image (may want to do that manually, or use javascript), get the source, add it as a background image to your header and hide the image tag (don't do that if repetition is intended)
Markup would then be something like:
<header class="imgbg"></header>
<div class="post">
<h1>Title</h1>
<p>Text</p>
<img src="#" class="first-img">
</div>
and jquery:
function getimgsrc(){
$('.post').find('.first-img').each(function(n, image){
var image = $(image);
var thisurl = $(this).attr('src');
$('.imgbg').css('background-image', 'url(' + thisurl + ')');
$('.first-img').remove();
});
}
I built a codepen to illustrate this a bit better: http://codepen.io/bekreatief/pen/BaFnx
I’m new with JS and looking for any tips how to implment or even how can I replace a part of big image (that conisists of two smaller images) when you change some option on the sidebar for example when you change product parameters.
When you click either or “Kolor karnisza:” or “Wzór końcówki:” a part of image changes. Either the color of curtain rod or curtain rod end.
How can I achieve this, as far as I already learnt two images are positioned absolutely with z-index and I need some JS or jQuery library to do this effect (what library?).
This is the website I’m talking about:
https://www.sklep-karnisze.net/1136,-34-Carbonera-34-podwojne-proste-19-mm?r=#/#8,7,2,50,1,10,
Thx in advance for your help.
<head>
<script>
function changeImage(imgName)
{
image = document.getElementById('largepic');
image.src = imgName;
}
</script>
</head>
<body>
<img src = 'largemaimimage.jpg' id = 'largepic' />
<img src ='small1.jpg' onClick="javaScript:changeImage('small1.jpg');"/>
<img src ='small2.jpg' onClick="javaScript:changeImage('small2.jpg');"/>
<img src ='small3.jpg' onClick="javaScript:changeImage('small3.jpg');"/>
</body>
Many Times this is answered on this site
I am buidling a small image navigator where the user inserts an image number and it has to load in the page so he can view it and do some processing on it later.
The images will be physically named 1,2,3,4,5.jpg for example.
Any quick code that i can use to make the corresponding image load
I know this is fairly simple - but i am pretty tight on deadline and would appreciate some code that works
thanks a lot in advance
OK, use jquery. It is easy
Here is an example
HTML
<input type="text" id="imagenum" />
View Image
<img class="previewimage" src="">
The Script
$(document).ready(function() {
$(".viewimage").click(function() {
$(".previewimage").attr('src', "imagetopath\"+$("#imagenum").val()+".jpg");
});
//To catch the enter key
$('#imagenum').keypress(function(event) {
if (event.keyCode == '13') {
$(".previewimage").attr('src', "imagetopath\"+$(this).val()+".jpg");
}
});
});
<img src="<?php print $ImgValue; ?>">
seems to work as an alternative to JQuery.
any other solution ?