Javascript/JQuery Image Picker

Je suis à la recherche pour JS/JQuery façon de faire les choses suivantes
1: Affichage d'une série d'éclats de peinture côte à côte avec un 'none' image
2: Lors d'une puce est cliqué
Une: mettez-le en Surbrillance avec une bordure de montrer qu'il a été sélectionné
B: Modifier la valeur d'un champ de texte/peut-être un champ caché dans le nom de la couleur appropriée
(de sorte que les images doivent être marquées de l'indigo, solaria, etc et de les mettre à jour en conséquence)

J'avais trouvé ce post sur Stackoverflow, mais je ne pouvais pas le faire fonctionner: jQuery image picker

Et voici mon code actuel, basé sur le lien ci-dessus

<!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 the img-source as 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>

Toute aide serait grandement appréciée!!!!

Bien j'ai fini par résoudre le problème en fait et voici le code que j'ai utilisé

<!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>
  • Je ne suis pas tout à fait sûr-je obtenir ce que votre question est, pouvez-vous préciser?
  • Je veux afficher 3 images lorsqu'une image est cliqué, je veux que la valeur d'un champ de formulaire mis à jour pour refléter le fait que cliquez. Si possible une bordure autour de l'image actuelle serait bien ainsi. Cela fait-il sens?
InformationsquelleAutor dscl | 2011-07-21
  1. 3

    Votre code ne fonctionne pas parce que vous avez oublié de joindre votre jquery états $(document).prêt bloc. Mise à jour de votre code fonctionne parce que vous avez déplacé le bloc de script vers le bas, mais, techniquement, vous pouvez placer dans le document.prêt

    Ici est une version de travail

    <!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 any images that might be selected
    $('#image_container img').removeClass("img_border")
    //set the img-source as 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 to a 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>
    • Merci beaucoup!! Je suis un newb avec JS/JQuery donc été essayant de choses ensemble, à partir d'exemples en ligne =)
    InformationsquelleAutor Michal
  2. 5

    Je sais que cela a été déjà répondu, mais j'ai développé un plugin qui permet de résoudre ce problème exact et est très bien entretenu.

    http://rvera.github.com/image-picker/

    • Votre plugin être utilisé pour stocker l'url de l'image dans un champ de formulaire masqué comme une liste délimitée par des url? Rien n'a été mentionné cela dans les docs...
    • Désolé, le plugin ne fait pas ça.
    InformationsquelleAutor RVera
  3. 2

    Mis à jour le code que j'ai enfin utilisé dans la question, mais ici il ainsi

    <!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>
    InformationsquelleAutor dscl