CODEWITHSUNDEEP
javascriptphpmysqlselect
luckr
luckr

Reputation: 73

Create a custom selected list

Well im adding to database some records but i dont like the way i did and wanted to make something way easier for the user and better.

What i did was: https://i.sstatic.net/JEfVZ.jpg

And what i want is: https://i.sstatic.net/FxqWR.jpg

Well i guess i know how to create the divs geting all the images from database and the horizontal scroll bar but what i dont know is when i select the image that id from image will appear on the input create by me.

Help needed.

Code from what i have:

<select name="id_artigo" id="attribute119">
<?php 
do {  
?>
<option value="<?php echo $row_artigos['id_artigo']?>" ><?php echo $row_artigos['id_artigo']?></option>
<?php
} while ($row_artigos = mysql_fetch_assoc($artigos));
?>
</select>

<div id="editimg"><p><img src="images/artigos/1.png" id="main" /></p></div>

Js:

$('#attribute119').change(function () {
  $('#main').attr('src', 'images/artigos/' + $('#attribute119 :selected').text() + '.png');
});

Upvotes: 0

Views: 54

Answers (3)

Anas
Anas

Reputation: 366

You can use jQuery slideshow plugin like jcarousel or jssor. Just do a google search on "jQuery slideshow" or "jQuery carousel".

I recommend you to use jcarousel.

Anas

Upvotes: 1

Shai
Shai

Reputation: 7327

  1. Since you don't want it to look like a drop-down any more, replace the drop-down with a hidden field, which will hold the ID of the item they select:

    <input type="hidden" name="id_artigo" />

    (for testing you could use type="text" instead)

  2. Give each of your images a data-id-artigo attribute:

    <img class="artigo_img" src="images/artigos/1.png" data-id-artigo="1">

  3. When an image is clicked, update the hidden ID's value:

    $('.artigo_img').on('click', function() {
    var idArtigo = $(this).data('idArtigo'); // get the artigo ID from the `data-` attribute
    $('[name="id_artigo"]').val(idArtigo);   // update the value of the hidden field
});

When the form is submitted, id_artigo will be equal to the selected item, just like before.

Upvotes: 0

fellowworldcitizen
fellowworldcitizen

Reputation: 3441

I see now that you just want to select 1 image, this answer is for selecting multiple images. (not tested, so there might be some errors)

    <style>

.img_holder
{
    height:100px;
    clear:both;
}

.floating_img
{
    float:left;
    width:100px;
    height:100px;
}
.img_selected
{
  border:1px solid black;
}

</style>

<div class="img_holder">
<?php 

$img_id_arr = array();

do {  

$selected = true; //<--implement if they are selected

$selected_class = '';
if($selected)
    $img_id_arr[] = $row_artigos['id_artigo'];
    $selected_class = ' img_selected';
}

?>
<div class="floating_img<?php echo $selected_class; ?>" onclick="toggle_img(<?php echo $row_artigos['id_artigo']; ?>);"><img src="images/artigos/<?php echo $row_artigos['id_artigo']; ?>.png" id="main" /></div>
<?php
} while ($row_artigos = mysql_fetch_assoc($artigos));
?>
<input typ="hidden" id="my_selected_images" name="my_selected_images" value="<?php echo implode(';',$img_id_arr); ?>">

<script>

function toggle_img(img_id)
{
    var selected_imgs = $('#my_selected_images').value;
    var img_arr = selected_imgs.split(";");
    var found = false;
    var new_arr = [];
    for (i = 0; i < img_arr.length; i++) { 
        if(img_id == img_arr[i])
        {
            found = true;
            //deselect img
        }
        else{
            //leave other item untouched
            new_arr.push(img_arr[i]);
        }
    }

    if(!found)
    {
        new_arr.push(img_id);
        //select img
    }

    $('#my_selected_images').value = new_arr.join(';');

}
</script>
</div>

Upvotes: 0

Related Questions