0

I have a select tag with nested option tags. I want to use this to display images, however the images are not displaying. Am I not understanding how the select tag works? 

<select multiple="multiple" class="image-picker masonry" id="image_picker" style="width: 10000px; height: 10000px;">
        <option class="masonryitem brick" img src="/Images/Image1.jpg" width="180" height="180" alt="">
        </option>

        <option class="masonryitem brick" img src="/Images/Image2.jpg" width="180" height="270" alt="" >
        </option>
    </select>

I want to make the images use the image-picker so they can be selectable

Lulutho Mgwali
  • 823
  • 1
  • 11
  • 33
  • 3
    Possible duplicate of [How to add a images in select list](https://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list) – Turnip May 30 '17 at 21:45
  • You cant do that. This question has been asked many times before. Also, your HTML not valid. – Turnip May 30 '17 at 21:49
  • I do not want to create a drop down list with images. I want to create a gallery. Something like this https://rvera.github.io/image-picker/ – Lulutho Mgwali May 30 '17 at 21:56
  • So are you having a problem with that specific plugin? Or are you wanting to do this yourself from scratch? In which case your question would be far too broad. – Turnip May 30 '17 at 22:06

2 Answers2

2

HTML

<select multiple="multiple" class="image-picker masonry" id="image_picker" style="width: 10000px; height: 10000px;">
        <option class="masonryitem brick" alt="">one
        </option>
        <option class="masonryitem brick"  alt="" >two
        </option>
    </select>

CSS

select#image_picker option[value="one"]   { background-image:url(/Images/Image1.jpg);   }
select#image_picker option[value="two"] { background-image:url(/Images/Image2.jpg); }
Daniel Taub
  • 5,133
  • 7
  • 42
  • 72
0

The documentation clearly states:

Simply add the attribute data-img-src with the url of the image you want to use as a preview

Michael Myers
  • 188,989
  • 46
  • 291
  • 292
Xavier J
  • 4,326
  • 1
  • 14
  • 25