İnput gibi tıklayınca resim işaretleme - ImagePicker.js

Web sayfalarına eklenmiş olan resimler bildiğiniz üzere tıklandığında seçilme  gibi  bir özelliğe sahip değiller. Henüz  bunun için bir element yapılmamış olsa da Javascript geliştiriciler tarafından web sitelerindeki resimlerin tıklandığında seçilmesini sağlayan  jQuery eklentileri var bir kaç tane. ImagePicker de bunlardan bir tanesidir. Sosyal arkadaşlık sitelerinde sık sık karşılaştığım  tek tek resim silme olayı benim için en çok sıkıntı yapan durumlardan bir tanesidir. Bu tarz örnekler kullanılıp toplu resimleri seçme özelliği olsa ve kolay bir şekilde silinebilse çok daha iyi olur bizim için. Sadece silme işlemler için de değil tabi, mesela Wordpress' yeni bir yazı eklerken resimleri toplu bir şekilde bu örnekte olduğu gibi seçip yazı içine ekleyebiliyoruz. ImagePicker uygulamasında tek tek resim seçme dışında bir kaç tane daha ayarı bulunuyor.  Çoklu, sınırlı sayıda ve limite ulaştığında uyarı vermesi gibi seçenekler bulunuyor. Kullanımı kolay ve yapacağınız işlemler basittir.  Bu eklentiyi kullanmak istediğiniz resimlerin adresini src= şeklinde değil de data-img-src= şeklinde ayarlamanız gerekiyor. Kullanım

1. Head etiketleri arasına eklemeniz gereken bölümler.

Js ve Css dosya adresleri : 

 <link rel="stylesheet" type="text/css" href="image-picker.css">
 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="image-picker.min.js"></script>

 JavaScript :  Tekli:

<script>
$("select").imagepicker()
</script>

Limitli :

<script>
$("select").imagepicker({limit: 2})
</script>

Limit aşımı olduğunda uyarı vermesi :

<script>
$("select").imagepicker({limit_reached: function(){alert('We are full')}})
</script>

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html resim kodları :  Tek :

<select class="image-picker show-html">
 <option data-img-src="img/01.png" value="1"> Page 1 </option>
 <option data-img-src="img/02.png" value="2"> Page 2 </option>
 <option data-img-src="img/03.png" value="3"> Page 3 </option>
 <option data-img-src="img/04.png" value="4"> Page 4 </option>
</select>

Çoklu :

<select multiple="multiple" class="image-picker show-html">
 <option data-img-src="resim1.jpg" value="1">Cute Kitten 1</option>
 <option data-img-src="resim.jpg" value="2">Cute Kitten 2</option>
 <option data-img-src="resim3.jpg" value="3">Cute Kitten 3</option>
 <option data-img-src="resim4.jpg" value="4">Cute Kitten 4</option>
</select>

Limitli :

<select class="image-picker show-html" data-limit="2" multiple="multiple">
 <option data-img-src="resim1.jpg" value="1">Cute Kitten 1</option>
 <option data-img-src="resim2.jpg" value="2">Cute Kitten 2</option>
 <option data-img-src="resim3.jpg" value="3">Cute Kitten 3</option>
 <option data-img-src="resim4.jpg" value="4">Cute Kitten 4</option>
</select>

Limit aşımı olduğunda uyarı vermesi :

<select class="image-picker limit_callback show-html" data-limit="2" multiple="multiple">
 <option data-img-src="resim1.jpg" value="1">Cute Kitten 1</option>
 <option data-img-src="resim.jpg" value="2">Cute Kitten 2</option>
 <option data-img-src="resim3.jpg" value="3">Cute Kitten 3</option>
 <option data-img-src="resim4.jpg" value="4">Cute Kitten 4</option>
</select>