Javascript/JQuery-Image-Picker

Ich bin auf der Suche nach JS/JQuery Art und Weise zu tun die folgende
1: Anzeige einer Reihe von Lack-chips Seite an Seite zusammen mit einem 'kein' Bild
2: Wenn ein chip geklickt wird
A: Markieren Sie es mit einem Rahmen zu zeigen, dass es ausgewählt wurde
B: Ändern Sie den Wert von einem Textfeld/vielleicht ein hidden-Feld die entsprechende Farbe name
(also die Bilder sollten markiert werden, indigo, Solarien, usw und entsprechend aktualisieren)

Fand ich diesen Beitrag auf Stackoverflow, aber konnte es nicht funktioniert: jQuery image-picker

Und hier ist meine aktuelle code basierend auf den obigen 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 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>

Jede Hilfe wäre sehr dankbar!!!!

Gut, ich landete die Festsetzung der Problem-und hier ist der code, den ich verwendet

<!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>
  • Ich bin mir nicht ganz sicher, ob ich bekomme, was deine Frage ist, können Sie das klären?
  • Ich möchte zur Anzeige von 3 Bildern - wenn ein Bild angeklickt wird möchte ich den Wert von einem Formular-Feld aktualisiert, um widerzuspiegeln, dass klicken Sie auf. Wenn möglich, wird ein Rahmen um das aktuelle Bild wäre schön. Macht das Sinn?
InformationsquelleAutor dscl | 2011-07-21
  1. 3

    Dein code funktioniert nicht, weil Sie vergessen haben, schließen Sie die jquery-Anweisungen in $(document).bereit blockieren. Ihre aktualisierten code funktioniert, weil Sie zog den script-block unten, aber technisch solltest du es im Dokument.bereit

    Hier ist eine funktionierende 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 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>
    • Vielen Dank!! Ich bin ein newb mit JS/JQuery so wurde versucht, Stück die Dinge zusammen von Beispielen online =)
    InformationsquelleAutor Michal
  2. 5

    Ich weiß, das wurde schon beantwortet, aber entwickelte ich ein plugin, das löst genau dieses problem und ist ziemlich gut gepflegt.

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

    • Kann das plugin verwendet werden, zum speichern von Bild-urls in einer versteckten Formularfeld als eine Liste von durch Trennzeichen getrennte urls? Nichts wurde erwähnt von diesem in den docs...
    • Sorry, das plugin funktioniert nicht.
    • Dieses plugin tatsächlich nicht arbeiten, wenn Sie wollen, um html-Code hinzufügen der label-Teil..
    InformationsquelleAutor RVera
  3. 2

    Aktualisiert der code, den ich schließlich in der Frage, aber hier ist es auch

    <!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
Schreibe einen Kommentar