I am creating a small application where there are multiple images displayed and when user clicks on any one of the images it gets bigger and replaces the image that is in middle.
But I am not getting the clicked image.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="text/javascript">
function swapImage(this.id) {
document.write("In SwapImage");
switch (this.id) {
case img2:
IMG1.src = "component1/images/image1.jpg"
intImage = 2
return(false);
case img3:
IMG1.src = "component1/images/image1.jpg"
intImage = 2
return(false);
case img4:
IMG1.src = "component1/images/image1.jpg"
intImage = 2
return(false);
}
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id="IMG1" name="IMG1" src="image1.jpg" height="100px" width="100px">
<IMG id="IMG2" name="IMG2" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.id);">
<IMG id="IMG3" name="IMG3" height="40px" width="40px" src="image2.jpg" onclick="swapImage();">
<a href="#">
<IMG id="IMG4" name="IMG4" height="40px" width="40px" src="image1.jpg" onclick="swapImage();">
</a>
</BODY>
</HTML>
How about this?
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function swapImage(src) {
document.getElementById("IMG1").src = src;
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id="IMG1" src="image1.jpg" height="100px" width="100px">
<IMG id="IMG2" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.src);">
<IMG id="IMG3" height="40px" width="40px" src="image2.jpg" onclick="swapImage(this.src);">
<IMG id="IMG4" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.src);">
</BODY>
</HTML>
There are some errors in your code, for example:
The document.write should not be used like this
You are doing switch/case on non existing variables (img2, img3, img4)
JavaScript is case sensitive. IMG4 does not equal img4
return is a statement. If you want to return false, you write return false;
Each statement should end with a semicolon.
HTML tag names should be written in lowercase
this.id is used incorrectly in the swapImage function (shouldn't be there at all)..
..but it is correct when used in IMG2..
..but is incorrect in IMG3 and IMG4
The img tag should not have a "name" attribute
Hope this helps.
img3 and img4 are missing the this.id reference, so the method doesn't know about the image being clicked... is that what you were asking about?
To add to Fabian's answer, in your function your parameter should be id, not this.id, and your switch statement should do the same, like so:
function swapImage(id) {
switch (id) {
// case statements
}
}
I suppose the question is: "Why does this script fail?".
There are several issues with your script:
document.write() is not supposed to be used for logging. It can easily corrupt your page.
You don't set the IMG1 variable. You probably wont something like var IMG1 = document.getElementById("IMG1"); at the start of your script.
The cases in the switch statement have to be string literals. Instead of case img3: you have to write case "img3":
Is this what you were trying to do (untested)?
<html>
<head>
<script type="text/javascript">
var swapImage = function() {
var IMG1=document.getElementById("img1");
return function(){
switch (this.id) {
case "img2":
IMG1.src = "component1/images/image2.jpg";
intImage = 2;
break;
case "img3":
IMG1.src = "component1/images/image3.jpg";
intImage = 2;
break;
case "img4":
IMG1.src = "component1/images/image4.jpg";
intImage = 2;
break;
default:
break;
}
return false;
}
};
</script>
</head>
<body>
<IMG id="img1" height="100px" width="100px" src="image1.jpg">
<IMG id="img2" height="40px" width="40px" src="image2.jpg" onclick="swapImage();">
<IMG id="img3" height="40px" width="40px" src="image3.jpg" onclick="swapImage();">
<IMG id="img4" height="40px" width="40px" src="image4.jpg" onclick="swapImage();">
</body>
</html>
Please note that is not a good way to do this.
what about this.
<style>
ul li{
float: left;
margin:10px;
list-style: none;
}
</style>
<div><img src="http://placehold.it/300x200" alt="" id="zoomImg" height="200" width="300" /></div>
<ul>
<li><img src="http://placehold.it/100x100&text=First" alt="img1" onclick="swapImage(this.src)"></li>
<li><img src="http://placehold.it/100x100&text=Second" alt="img2" onclick="swapImage(this.src)"></li>
<li><img src="http://placehold.it/100x100&text=Third" alt="img3" onclick="swapImage(this.src)"></li>
</ul>
<script type="text/javascript">
function swapImage(src){
var zoomImg = document.getElementById('zoomImg');
zoomImg.src = src;
}
</script>
Related
i'm trying to 'cut' the hash of some urls in iteration, leaving only the img url (https://i.ytimg.com/vi/9Eu7SXGyvzQ/hqdefault.jpg) without the hash (?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLDi79vN15idfFETvntyC9yat7FvZQ).
I got it working in this example (2 images) but in "real code" fail, as you can see they are still some issues in code I cannot figure out, maybe redundancy, not calling the src string correctly.
Need some advice.
Thanks.
function changeSourceAll() {
var images = document.querySelectorAll("#img,.style-scope,.yt-img-shadow");
for (var i = 0; i <= images.length; i++) {
var mini = images[i].src.substring(48);
var source = images[i].src = images[i].src.replace(mini, "");
}
}
changeSourceAll();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sometitle</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<img id="img" draggable="false" class="style-scope yt-img-shadow" alt="" width="210" src="https://i.ytimg.com/vi/9Eu7SXGyvzQ/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLDi79vN15idfFETvntyC9yat7FvZQ">
<img id="img" draggable="false" class="style-scope yt-img-shadow" alt="" width="210" src="https://i.ytimg.com/vi/gCI1L0gP-vk/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLAUz6VUtsyrv5VZcfRvtnYM48ymHA">
<script src="java.js"></script>
</main>
</body>
</html>
Use a common selector to get all your img elements: for instance, you could rely on the class .yt-img-shadow.
Then use split() to divide each image src URL in two parts, separated by the symbol ?, and re-assign the "short" version of your URL to the image.
function changeSourceAll() {
const images = document.querySelectorAll(".yt-img-shadow");
for (let i = 0; i < images.length; i++) {
const mini = images[i].src.split('?')[0];
images[i].src = mini;
}
}
changeSourceAll();
<main>
<img id="img1" draggable="false" class="style-scope yt-img-shadow" alt="" width="210" src="https://i.ytimg.com/vi/9Eu7SXGyvzQ/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLDi79vN15idfFETvntyC9yat7FvZQ">
<img id="img2" draggable="false" class="style-scope yt-img-shadow" alt="" width="210" src="https://i.ytimg.com/vi/gCI1L0gP-vk/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLAUz6VUtsyrv5VZcfRvtnYM48ymHA">
</main>
I create kind of gallery in Wordpress. However, posts are listed with plugin (they are attached to map - WP Google Map) and I can't use any gallery plugin. I just upload images and want to add them to div "showimagediv". This works fine but I can't make PREV/NEXT.
This is what it looks like:
$(document).ready(function() {
$('.thumb').on('click', function() {
var img = $('<img />', {
src: this.src,
'class': 'fullImage'
});
$('.showimagediv').html(img).show();
});
$('.showimagediv').on('click', function() {
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post_content">
<img src="image1.jpg" class="thumb" />
<img src="image2.jpg" class="thumb" />
<img src="image3.jpg" class="thumb" />
</div>
<div class="post_content">
<img src="image4.jpg" class="thumb" />
<img src="image5.jpg" class="thumb" />
<img src="image6.jpg" class="thumb" />
</div>
<div class="post_content">
<img src="image7.jpg" class="thumb" />
<img src="image8.jpg" class="thumb" />
<img src="image9.jpg" class="thumb" />
</div>
It works well but doesn't give me option to to PREV/NEXT.
This is untested - but might help you get the idea.
HTML
<div class="nextSelector">
<span>NEXT</span>
</div>
JS
$('.nextSelector').on('click',function(){
var nextImage = $('img.fullImage + img');
$('img.fullImage').toggleClass("thumb fullImage");
nextImage.toggleClass("thumb fullImage");
})
I'm looking for a sideways image roulette wheel. Kind of like this
http://image.prntscr.com/image/b178316bc4994229831f21109aa59555.png
I can't seem to find a source or example anywhere.
Basic HTML
`<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="" alt="" id="picture1"/>
<img src="" alt="" id="picture2"/>
<img src="" alt="" id="picture3"/>
<img src="" alt="" id="picture4"/>
<button type="button" name="button" onclick="spin()">click</button>
</body>
</html>`
And javascript
function spin(){
var x = Math.floor( Math.random() * 3 )
switch (x) {
case 0:
document.getElementById('picture1');
break;
case 1:
document.getElementById('picture2')
break;
case 2:
document.getElementById('picture3')
break;
case 3:
document.getElementById('picture4')
break;
}
}
The rest is up to you friend
At a website I am displaying images in 5x 5 grid, using . On the last picture, custom parts, I wish to display a rotating images. This panelGallery js script works fine on all screen sizes apart from 15" screen, when testing, where the whole of the 15" screen is gets occupied by magnified version of the small rotating images, covering all the images behind.
Any help to solve this pestering problem would be much welcome.
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.panelgallery-1_1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#container').panelGallery();
});
</script>
<script>
if( self == top ) {
document.documentElement.style.display = 'block' ;
} else {
top.location = self.location ;
}
</script>
</head>
<div class="PZ3zoom PZ3-r Bdr Cap Lnk" style="width:130px; height:104px;"><a href="http://www.hpcgears.com/n/products/16.custom_products/custom_parts.php" onclick="return true">
<div id="container">
<img alt="" src="1.images/images_special/plastic1.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gear.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gear2.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/custom1.gif" name="tb" width="130" height="104" />
<img alt="" src="1.images/images_special/double_gears.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gearbox.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gearbox3.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/custom2.gif" name="tb" width="130" height="104" />
<img alt="" src="1.images/images_special/gearbox2.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gear3.jpg" name="tb" width="130" height="104"/></div>
<span class="PZ3inr"> <em><span style="color:#ccf; background:inherit;">Custom parts</span></em></span></span></a>
Custom Parts
A live example would help provide a better example.
however, here's my fix - not knowing all the moving parts(css, the js library you are using, etc..). So I suggest making a CSS class and creating a fixed max width to prevent it from displaying huge at 15 inches wide.
Try a media over-ride on the container
<div class="container">...</div>
a CSS solution
#media screen and (max-width: 1800px) {
.container { width:1800; }
}
or you just just set a max-width on that div
.container { max-width:1800px; }
Now instead of 1800px use whatever screen width the images displayed correctly at.
I have an ajax web application, where every 10 seconds I request content from the server. The server sends back HTML with links to images. Right now, I set the innerHTML of a div tag to the HTML returned from the server, which dynamically updates the web page with out reloading the whole page.
HOWEVER, the problem is, the images load separately after setting the innerHTML causing the application to look funky and slow.
How can I have all my images ready and then swap the innerHTML when I have all the resources?
Add an attribute(or data attribute) to the DOM of the images, then with jQuery listen for the "loaded" event change the attribute loaded to be true. Then verify if still images in the queue, if not execute a callback for the complete process.
Markup:
<img src="img/1.png" class="imgToLoad" loaded="false" />
<img src="img/2.png" class="imgToLoad" loaded="false" />
<img src="img/3.png" class="imgToLoad" loaded="false" />
<img src="img/4.png" class="imgToLoad" loaded="false" />
Pseudocode:
function allImagesLoaded(){
$('#yourmaindiv').show();
console.log('images loaded!');
}
$('img.imgToLoad').load(function(){
$(this).attr('loaded', 'true');
if( $('img.imgToLoad[loaded=false]').length === 0 ){
allImagesLoaded();
}
});
For your images :
JavaScript
$(function () {
preload();
function preload() {
var imageObj = new Image(),
images = [];
images[0] = 'img/1.png';
images[1] = 'img/2.png';
images[2] = 'img/3.png';
images[3] = 'img/4.png';
images[4] = 'img/5.png';
for (var i = 0; i < images.length; i++) {
imageObj.src = images[i];
}
}
});
HTML
<body>
....
<!--[if IE]>
<div id="preload">
<img src="img/1.png" width="1" height="1" alt="" />
<img src="img/2.png" width="1" height="1" alt="" />
<img src="img/3.png" width="1" height="1" alt="" />
<img src="img/4.png" width="1" height="1" alt="" />
<img src="img/5.png" width="1" height="1" alt="" />
</div>
<![endif]-->
</body>
CSS for IE
#preload {
position: absolute;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}