html - jQuery replaceWith if ID clicked -
i have basic website displays streams ip video cameras. 5 feeds displayed via table below '#main' feed inside div. want when 1 of feeds in table clicked, '#main' feed replaced feed it's displayed larger.
my js file testing first 2 cam feeds.
apologies if isn't formatted correct, it's first post here.
html:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>dsac cattle feed</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script type='text/javascript' src='camjq.js'></script> </head> <body> <div id="main"> <p>cam 1</p> <img width="640px" height="360px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" /> </div> <table> <tr> <td> <p style="text-align:center">cam 1</p> </td> <td> <p style="text-align:center">cam 2</p> </td> <td> <p style="text-align:center">cam 3</p> </td> <td> <p style="text-align:center">cam 4</p> </td> <td> <p style="text-align:center">cam 5</p> </td> </tr> <tr> <td> <div id="cam1"> <img width="128px" height="72px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" /> </div> </td> <td> <div id="cam2"> <img width="128px" height="72px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" /> </div> </td> <td> <img id="cam3" width="128px" height="72px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" /> </td> <td> <img id="cam4" width="128px" height="72px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" /> </td> <td> <img id="cam5" width="128px" height="72px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" /> </td> </tr> </table> </body> </html>
js:
$(document).ready(function(){ //cam1 jquery('#cam1').click(function(){ $(this).data('clicked', true); }); if (jquery('#cam1').data('clicked')) { $("#main").replacewith('<p> cam 1 </p><img width="640px" height="360px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />'); } //cam2 $('#cam2').click(function(){ $(this).data('clicked', true); }); if ($('#cam2').data('clicked')) { $("#main").replacewith('<p> cam 2 </p><img width="640px" height="360px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />'); } });
instead of replacewith()
use .html()
$(document).ready(function () { //cam1 $('#cam1').click(function () { $("#main").html('<p> cam 1 </p><img width="640px" height="360px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />'); }); //cam2 $('#cam2').click(function () { $("#main").html('<p> cam 2 </p><img width="640px" height="360px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />'); }); });
additionally, don't need use .data()
Comments
Post a Comment