Javascript/JQuery Image Picker -
i'm looking js/jquery way following 1: display series of paint chips side side along 'none' image 2: when chip clicked a: highlight border show has been selected b: change value of text field/perhaps hidden field appropriate color name (so images should flagged indigo, solaria, etc , update accordingly)
i had found post on stackoverflow, couldn't working: jquery image picker
and here's current code based on above link
<!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>untitled document</title> <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript"> $('div#image_container img').click(function(){ // set img-source value of image_from_list $('input#image_from_list').val( $(this).attr("src") ); }); </script> </head> <body> <div id="image_container"> <img src="images/vermillion.jpg" /> <img src="images/riverway.jpg" /> <img src="images/solaria.jpg" /> </div> <form action="" method="get"> <input id="image_from_list" name="image_from_list" type="text" value="" /> </form> </body> </html> any appreciated!!!!
well ended fixing issue , here's code used
<!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>untitled document</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div id="image_container"> <img src="images/vermillion.jpg" col="red" border="0" /> <img src="images/riverway.jpg" col="blue" border="0" /> <img src="images/solaria.jpg" col="yellow" border="0" /> </div> <form action="" method="get"> <input id="image_from_list" name="image_from_list" type="text" value="" /> </form> <script> $("div#image_container img").click(function () { $("div#image_container img").attr("border","0"); $(this).attr("border","4"); $("input#image_from_list").val($(this).attr("col")); }); </script> </body> </html>
your code not work because forgot enclose jquery statements in $(document).ready block. updated code works because moved script block bottom technically should enclose in document.ready
here working version
<!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>untitled document</title> <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#image_container img').click(function(){ //remove border on images might selected $('#image_container img').removeclass("img_border") // set img-source value of image_from_list $('#image_from_list').val( $(this).attr("src") ); $('#data_value').val( $(this).attr("id") ); // $('#data_value').val( $(this).data("options").color ); //add border clicked image $(this).addclass("img_border") }); }) </script> <style> .img_border { border: 2px solid red; } </style> </head> <body> <div id="image_container"> <img src="images/vermillion.jpg" id="vermillion"/> <img src="images/riverway.jpg" id="riverway"/> <img src="images/solaria.jpg" id="solaria"/> </div> <form action="" method="get"> <input id="image_from_list" name="image_from_list" type="text" value="" /> <input id="data_value" type="text" value="" /> </form> </body> </html>
Comments
Post a Comment