How to change img src with a transition by clicking another image - javascript

So I'm on a project which requires me to use table, and forbids me to use any div tag.
I want to make a slider in one row of my table.
I want the image to change with a click on other image in the second row.
I've managed to do that using this code:
function changeImage(a) {
document.getElementById("imgblockjs").src=a;
}
And the html:
<HTML>
<HEAD>
<TITLE>
Home -- RTR
</TITLE>
<LINK REL="ICON" TYPE="IMAGE/PNG" HREF="../img/logo.png" />
<SCRIPT src="../script.js"></SCRIPT>
</HEAD>
<BODY>
<table border="0" width="100%" height="10px" cellspacing="0">
<tr>
<td colspan="4" >
<img id="imgblockjs" src="../img/singa.jpg" width="100%" height="300px" />
</td>
</tr>
<tr>
<td colspan="4" id="imgchanger">
<img src="../img/singa.jpg" id="imgthumb1" onclick="changeImage('../img/lion.jpg');">
<img src="../img/gajah.jpg" id="imgthumb2" onclick="changeImage('../img/elephant.jpg');">
</td>
</tr>
</table>
</BODY>
</HTML>
But that code doesn't have any transition.
I've tried using jquery:
$("#imgthumb1").click(function() {
$("#imgblockjs").fadeOut(1000, function changeImage(a) {
document.getElementById("imgblockjs").src=a;
}).fadeIn(1000);
return false;
});
I'm actually very new to jquery and haven't learn all the basics, I got the above jquery code on the internet and modified it a bit, thinking it would work. But it doesn't.
Can someone fix it? Or maybe use a different code? Basically I want the attribute src to be changed instead of having images on top of another. But if it's not possible, I'm open to any suggestion.
Also if possible I planned to make the picture change every 5 seconds automatically, using transition. But my first question is the priority
Thanks in advance

You can change that images dynamically using JQuery
I have added the classes to the images so that I can access them using class
Main Image: added class "fullimage"
small Images: added class "changeimage"
$('.changeimage').click(function(){
//getting the current clicked image source
var clickedItemImage=$(this).attr('src');
//setting the src of your main image
$(".fullimage").attr('src',clickedItemImage);
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<table border="0" width="100%" height="10px" cellspacing="0">
<tr>
<td colspan="4" >
<img id="imgblockjs" class="fullimage" src="../img/singa.jpg" width="100%" height="300px" />
</td>
</tr>
<tr>
<td colspan="4" id="imgchanger">
<img class="changeimage" src="../img/singa.jpg" id="imgthumb">
<img class="changeimage" src="../img/gajah.jpg" id="imgthumb">
</td>
</tr>
</table>
I hope it helps :)

$("img").on("click", function(){
$("#imgblockjs").fadeOut(1000, function() {
$("#imgblockjs").attr("src",this.src);
}.bind(this)).fadeIn(1000);
});
If an image is clicked, change the #imgblockjs.src to this images src...

Related

How to change .click(), fadein, and fadeout from jQuery to pure JavaScript code

So I have this project which requires me to use table and forbids me to use any <div> tags and jQuery.
I want to make a slider in one row of my table. I want the image to change with a click on other image in the second row. I've managed to do that using this code:
function changeImage(a) {
document.getElementById("imgblockjs").src=a;
}
And the html:
<HTML>
<HEAD>
<TITLE>
Home -- RTR
</TITLE>
<LINK REL="ICON" TYPE="IMAGE/PNG" HREF="../img/logo.png" />
<SCRIPT src="../script.js"></SCRIPT>
</HEAD>
<BODY>
<table border="0" width="100%" height="10px" cellspacing="0">
<tr>
<td colspan="4" >
<img id="imgblockjs" src="../img/singa.jpg" width="100%" height="300px" />
</td>
</tr>
<tr>
<td colspan="4" id="imgchanger">
<img src="../img/singa.jpg" id="imgthumb1" onclick="changeImage('../img/lion.jpg');">
<img src="../img/gajah.jpg" id="imgthumb2" onclick="changeImage('../img/elephant.jpg');">
</td>
</tr>
</table>
</BODY>
</HTML>
But that code doesn't have any transition.
After hours research on the internet, I found a jQuery code which works nicely:
$("#imgthumb1").click(function() {
$("#imgblockjs").fadeOut(1000, function() {
$("#imgblockjs").attr("src",$("#imgthumb1").attr("href"));
}).fadeIn(1000);
return false;
});
$("#imgthumb2").click(function() {
$("#imgblockjs").fadeOut(1000, function() {
$("#imgblockjs").attr("src",$("#imgthumb2").attr("href"));
}).fadeIn(1000);
return false;
});
$("#imgthumb3").click(function() {
$("#imgblockjs").fadeOut(1000, function() {
$("#imgblockjs").attr("src",$("#imgthumb3").attr("src"));
}).fadeIn(1000);
return false;
});
$("#imgthumb4").click(function() {
$("#imgblockjs").fadeOut(1000, function() {
$("#imgblockjs").attr("src",$("#imgthumb4").attr("src"));
}).fadeIn(1000);
return false;
});
with the html:
<tr><td colspan="4">
<img id="imgblockjs" src="../img/singa.jpg" />
</td></tr>
<tr><td colspan="4">
<a id="imgthumb1" href="../img/singa.jpg"><img src="../img/singa.jpg" /></a>
<a id="imgthumb2" href="../img/gajah.jpg"><img src="../img/gajah.jpg" /></a>
</td></tr>
But as I said before, I mustn't use jQuery. How can I convert the jQuery code to pure JavaScript code? Or I would be happy if there's any other suggestions.
Note, I simplified my html on purpose. Also, if possible I don't want any CSS because it may mess with original CSS file, but simple and short CSS is acceptable.
Below is vanilla JavaScript for changing the image from the thumbnails.
var changeImage = document.getElementById("imgblockjs");
document.getElementById("imgthumb1").addEventListener("click", function(e) {
changeImage.setAttribute("src", this.getAttribute("href"));
e.preventDefault();
})
However with this code you will not have the animation attached.
If you would like vanilla JavaScript animation there is very little support for that across browsers. You can check out more about that here https://developer.mozilla.org/en-US/docs/Web/API/Element/animate
document.getElementById("imgthumb2").addEventListener("click", function(e) {
var self = this;
var animStart = changeImage.animate([{
opacity: 1
}, {
opacity: 0
}], {
duration: 1000
})
animStart.onfinish = function() {
changeImage.setAttribute("src", self.getAttribute("href"));
changeImage.animate([{
opacity: 0
}, {
opacity: 1
}], {
duration: 1000
});
}
e.preventDefault();
})
If you like animations but would like to avoid jQuery you can use GSAP JavaScript animation library from here https://greensock.com/. Or you can always use a CSS animation option.
I hope this helps a little.

How to Exclude specific images from JavaScript Photobox animation in a div?

I am using photobox to display all images within a div in a nice gallery style. However I want to include an image in the div that I do not want in the gallery, a PDF icon, which onlick will download a pdf file. At the moment this icon appears in the gallery when clicked, I would like to know how to exclude maybe a section of the div.
Here is my code
<div id="gallery">
<td width="226" align="right"><table width="206" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="199" align="center"><img src="images/GrndFloor_dimension_th.jpg" alt="Ground Floor" width="182" height="182" border="0"/></td>
</tr>
<tr>
<td height="64" align="center" background="images/thumbs-text-holder.jpg" class="planscopy" style="background-repeat:no-repeat"><table width="151" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="104"><span class="planscopy" style="background-repeat:no-repeat">Ground Floor - Dimensions</span></td>
<td width="47" align="right"><img src="images/pdf.png" width="48" height="51"/></td>
</tr>
</table></td>
</tr>
</table></td>
</div>
<script type="text/javascript">
$('#gallery').photobox('a', { thumbs: true }, imageLoaded);
function imageLoaded() {
console.log('image has been loaded...');
}
I would like the pdf.png image not to appear in the gallery, just to be a link to the document. Is there maybe a way to exclude a div id within a div?
Any help would be greatly appreciated.
try to give the A-Element ( PDF ) a class like "exclude" and try this JS-Code:
<td width="47" align="right"><a class="exclude" href="docs/Ground Floor Plan - Dimensions.pdf" target="_blank"><img src="images/pdf.png" width="48" height="51"/></a></td>
<script type="text/javascript">
$('#gallery').photobox('a:not(.exclude)', { thumbs: true }, imageLoaded);
function imageLoaded() {
console.log('image has been loaded...');
}
</script>
$("#gallery").photobox("a:not(:has([src$='pdf.png']))', { thumbs: true }, imageLoaded);
will work.(Demo for selector: http://jsfiddle.net/pUkz2/)
Note that the above selector is slower than if you add the class pdf to the a and use
$("#gallery").photobox("a:not(.pdf)', { thumbs: true }, imageLoaded);
I did a performance test: http://jsperf.com/pukz2

Onclick event to put an image from a table to another table. Javascript, HTML

I have two tables. One table contains several images and the other one is empty.
What I want is that clicking on one of the images from the first table will take that image and put it on the other table enlarging its size.
This is how my tables look like:
<div>
<table id="enlarged" width="530px" border="1">
<tr>
<th>Enlarged Picture.</th>
</tr>
<tr>
<td>
<div id="div1"> </div>
</td>
</tr>
</div>
<br/>
<div>
<table id="small" width="530px" border="1">
<tr>
<th>Click on picture to see it enlarged.</th>
</tr>
<tr>
<td>
<img id="picture1" src="winter.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">
<img id="picture2" src="winter1.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">
<img id="picture3" src="winter2.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">
<img id="picture4" src="winter3.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">
<img id="picture5" src="winter4.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">
</td>
</tr>
</table>
</div>
What i've tried:
function addPictureToTable(){
var myPicture = document.getElementById("picture1");
var table = document.getElementById("enlarged");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= myPicture;
}
If it helps, my pictures taken from the first table can be put into a simple div, not needing the second table.
First, I should ask, what is the issue that you are having with your current code?
Second, I would suggest making the elementID be a parameter to your addPictureToTable function, so that:
<img id="picture1" src="winter.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable();">
becomes:
<img id="picture1" src="winter.jpg" style="height:100px; width:100px; align:left;" onclick="addPictureToTable("picture1");">
Making:
var myPicture = document.getElementById("picture1");
become:
var myPicture = document.getElementById(elID);
Also, I'm not sure why you are using table.insertRow(rowCount) unless you just want to keep expanding the table with every click. I'd think you'd just want to get div1 by ID, then do the .innerHTML on that one.
Oh, and you might want to remove the onClick event of the element that you insert into the new div, and probably the element ID as well... maybe just better to just put an img tag in the div, and set the src attribute of the "enlarged" image you want to edit to be the src of the one that was clicked on.
Yes, looking at your code again, that's definitely what you want to do, generate a shell img tag, with its own width/height attributes, and just dynamically set the src attribute (right now, you are including the height/width attributes from the source img, so the size is always the same as the size is in the second table)
I don't know what your end-application is ... but it seems that a cooler and more modern way of doing what you're doing is to use some sort of face-box jquery plugin..
http://wowslider.com/rq/jquery-picture-slider/
http://defunkt.io/facebox/
are somethings you can try!

Adding a Skip Button to FastForward a .fadeIn / .fadeOut?

Just to clarify, when you load my site I have a bit of text that fades in (quote), and then fades out. Afterwards a new bit of text (my brand name) fades in.
Since I want people to have enough time to read the first text (the quote) the fade in and fade out are a bit long, however I don't want people to get impatient after visiting the site for the 5th time and having to wait every time.
Therefore I was thinking of a "skip-like" button or text (IE: SKIP) so that they can fastforward to where the brand name fades in.
Any help would be appreciated!!! Here's an example of what I currently have!!
http://jsfiddle.net/K6SpB/
HTML
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<center>
<div id="mytext" align="center">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="200">
<center>
<font size="4px" id="quote" color="black">THIS IS A QUOTE.</font>
<br>
<font size="12px" id="brandname" color="black">BRAND NAME.</font>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>
JAVASCRIPT
$(document).ready(function() {
$('#quote').hide().delay(1000).fadeIn(5000).delay(3000).fadeOut(2000);
$('#brandname').hide().delay(11500).fadeIn(2000);
});​
CSS
<style type="text/css">
#quote, #brandname {
position:relative;
display: none;
float:center;
}
#mytext {
}
</style>​
You probably want jQuery .stop() (http://api.jquery.com/stop/)
So, if you add a Skip link:
Skip
The code would look like this:
$('#skip').click(function(e) {
e.preventDefault();
$('#quote, #brandname').stop(true, true);
});
The first "true" tells jQuery to remove any pending animations from the animation queue, the second "true" tells it to skip straight to the end of the animation.

Multiple IP Camera Feeds On Same Webpage

I have 2 IP Cameras that have a internal server page (i.e. http:\192.168.1.10\video.html). This page receives jpeg images from the camera and auto-refreshes (loads) using javascript.
Source code from the video.html
<html>
<head>
<title>ipCam - JPEG Video</title>
<style type='text/css'>
html,body
{
background-color:white;
color:black;
font-family:arial;
font-size:12pt;
}
a,a:visited,a:active
{
color:grey;
text-decoration:none;
}
a:hover
{
text-decoration: underline;
}
h1
{
background-color:black;
color:white;
padding:5px;
}
h2
{
background-color:lightgrey;
padding:5px;
}
</style>
<script type='text/javascript'>
function loadImage()
{
var now=new Date();
document.getElementById('the_img').src='image.jpg?'+now.getTime();
}
</script>
</head>
<body>
<img id='the_img' src='image.jpg' onload='loadImage()' onerror='loadImage()'>
<br><br>
<a href='.'>Home</a>
</body>
What I would like to do is build a custom site that has both live feeds in it. I would prefer not to use <iframe>. I would rather use Javascript or something of the sort.
I have a basic understanding of HTML but very little Javascript experience. I can obviously look at the code a get a good idea of what is going on, but this has stumped me!
Any help would be appreciated!
I would guess that you could create a new HTML page (just copy the video.html from one of the cameras) on a local webserver and modify the script to include the ID of the img element you are updating and the IP address of the camera you are grabbing the feed from...something like this (which is set to automatically update the images every 4 seconds) -- (disclaimer: air code, not tested)
Thanks #A.M.K. for fixing some stupid mistakes in my code:
<script type='text/javascript'>
function loadImage(imgID, address)
{
var now=new Date();
document.getElementById(imgID).src='http://' + address + '/image.jpg?'+now.getTime();
}
setInterval(function() {
loadImage("the_img_1", "192.168.0.1");
loadImage("the_img_2", "192.168.0.2");
}, 4000); //Interval to refresh at, in milliseconds
</script>
Then just setup another img tag to receive the image:
<body>
<img id='the_img_1' src='http://192.168.0.1/image.jpg'>
<br><br>
<img id='the_img_2' src='http://192.168.0.2/image.jpg'>
<a href='.'>Home</a>
</body>
Note that you have two img elements now, each with a unique id which is fed to the function along with the IP address of the camera.
That may not work exactly in your situation, but that should give you an idea of how to accomplish it...
// JS 9 CAM...
//LAN.JS add http : // if you need
var URL11='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL12='IP:Port/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=XXXXX&pwd=XXXXX';
var URL13='IP:Port/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=XXXXX&pwd=XXXXX';
var URL14='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL15='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL16='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL17='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL18='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL19='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var L=window.location.search;
L=L.substring(1,5);
if(L=="")L=1;
NewImage=new Image();
var I=new Date().getTime();
var imgW=320*L;
function kamera1011(){document.getElementById("imgDisplay11").src=URL11+'&'+I++;};
function kamera1012(){document.getElementById("imgDisplay12").src=URL12+'&'+I++;};
function kamera1013(){document.getElementById("imgDisplay13").src=URL13+'&'+I++;};
function kamera1014(){document.getElementById("imgDisplay14").src=URL14+'&'+I++;};
function kamera1015(){document.getElementById("imgDisplay15").src=URL15+'&'+I++;};
function kamera1016(){document.getElementById("imgDisplay16").src=URL16+'&'+I++;};
function kamera1017(){document.getElementById("imgDisplay17").src=URL17+'&'+I++;};
function kamera1018(){document.getElementById("imgDisplay18").src=URL18+'&'+I++;};
function kamera1019(){document.getElementById("imgDisplay19").src=URL19+'&'+I++;};
function kamera1020(){document.getElementById("imgDisplay20").src=URL20+'&'+I++;};
function kamera1021(){document.getElementById("imgDisplay21").src=URL21+'&'+I++;};
function kamera1022(){document.getElementById("imgDisplay22").src=URL22+'&'+I++;}
<! HTML-index.htm >
<html>
<script language="JavaScript" src="js/lan.js"></script>
<body onload="kamera1011(); kamera1012(); kamera1013(); kamera1014(); kamera1015(); kamera1016(); kamera1017(); kamera1018(); kamera1019();>
<table border="1" width="100%" cellspacing="1" cellpadding="1">
<tr>
<td width="100%" align="center">
</td>
<td>
<a href="index.htm">
Updates Cams...
</a>
</td>
</tr>
<tr>
<td>
<! Cam 1 >
<img id="imgDisplay11" border="1" width="412" height="318" onload=setTimeout("kamera1011()",10) onerror=setTimeout("kamera1011()",100)>
</td>
<td>
<! Cam 2 >
<img id="imgDisplay12" border="1" width="412" height="318" onload=setTimeout("kamera1012()",10) onerror=setTimeout("kamera1012()",100)>
</td>
<td>
<img id="imgDisplay13" border="1" width="412" height="318" onload=setTimeout("kamera1013()",10) onerror=setTimeout("kamera1013()",100)>
</td>
</tr>
<tr>
<td>
<img id="imgDisplay14" border="1" width="412" height="318" onload=setTimeout("kamera1014()",10) onerror=setTimeout("kamera1014()",100)>
</td>
<td>
<! Cam 5 >
<img id="imgDisplay15" border="1" width="412" height="318" onload=setTimeout("kamera1015()",10) onerror=setTimeout("kamera1015()",100)>
</td>
<td>
<! Cam 6 >
<img id="imgDisplay16" border="1" width="412" height="318" onload=setTimeout("kamera1016()",10) onerror=setTimeout("kamera1016()",100)>
</td>
</tr>
<tr>
<td>
<! Cam 9 >
<img id="imgDisplay17" border="1" width="412" height="318" onload=setTimeout("kamera1017()",10) onerror=setTimeout("kamera1017()",100)>
</td>
<td>
<! Cam 8 >
<img id="imgDisplay18" border="1" width="412" height="318" onload=setTimeout("kamera1018()",10) onerror=setTimeout("kamera1018()",100)>
</td>
<td>
<! Cam 9 >
<img id="imgDisplay19" border="1" width="412" height="318" onload=setTimeout("kamera1019()",10) onerror=setTimeout("kamera1019()",100)>
</td>
</tr>
</table></html>
Just put the following javascript in your page, changing the interval parameter to your like:
<script type='text/javascript'>
var interval = 5; //Interval in seconds, to retrieve images
setInterval(function loadImage() {
var now=new Date();
document.getElementById('the_img').src='image.jpg?'+now.getTime();
}, interval * 1000);
</script>
and in the html just insert the image wherever you want, like this:
<img id='the_img' src='image.jpg'>

Categories