JQuery Image Selection
First of all, I am new to JQuery.
I have images like this. What I want is that when the user image is clicked, it borders on the image. The user can select multiple images. All this should be limited when choosing. After clicking the button, I will have the id of the images.
<tr><img id="i will put value for db processing"src="urlofimage"</tr>
How can i do this?
source to share
Do you mean:
$.fn.hasBorder = function() {
if ((this.outerWidth() - this.innerWidth() > 0) || (this.outerHeight() - this.innerHeight() > 0)){
return true;
}
else{
return false;
}
};
$(document).ready(function() {
var selectedImgsArr = [];
$("img").click(function() {
if($(this).hasBorder()) {
$(this).css("border", "");
//you can remove the id from array if you need to
}
else {
$(this).css("border", "1 px solid red");
selectedImgsArr.push($(this).attr("id")); //something like this
}
});
});
source to share
simple example:
style:
ul { list-style: none; }
ul li { display: inline; }
ul li img { border: 2px solid white; cursor: pointer; }
ul li img:hover,
ul li img.hover { border: 2px solid black; }
javascript:
$(function() {
$("img").click(function() {
$(this).toggleClass("hover");
});
$("#btn").click(function() {
var imgs = $("img.hover").length;
alert('there are ' + imgs + ' images selected');
});
});
result:
source to share
Simple enough, just add a new CSS class to the image on click.
<html>
...
<td><img class='galImages' src='urlofimage' /></td>
...
</html>
<script>
$document.ready(function() {
$('img.galImages').click(function() {
if($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
$(this).addClass('selected');
}
});
});
</script>
<style>
.selected {
1px solid #f00;
}
</style>
I prefer this method for defining the style of the script to simply remove stylistic elements from the functionality. Makes everything reusable and easy to change later if required. Above code supports both applying formatting and removing it on secondary click. (IE: it is removed if it exists.)
source to share
give them all classes:
<tr><img class="clickable" id="i will put value for db processing" src="urlofimage" /></tr>
<script>
$(document).ready(function() {
var clickedarray = new Array();
$('.clickable').click(function() {
//add border
$(this).css({border: '1px solid #000'});
//store in array
clickedarray.push($(this).attr('id'));
});
});
</script>
source to share
first add the class to select and then add items to the array which have the class "selected-image" at the time of form submission
$(document).ready(function() {
var selectedImgsArr = new Array();
$("img").click(function() {
if($(this).hasClass("selected-image"))
$(this).removeClass("selected-image");
else
$(this).addClass("selected-image");
});
$("form").submit(function(){
selectedImgsArr.push($(".selected-image").attr("src"));
})
});
source to share