0

I am trying to make code that lets me add checkmarks to clicked images from my database. I am able to get the images to display, however I am unable to select the image/get the check to appear.

index.php

<?php
  $result = mysql_query("select * from db");
  $count = 0;
  while ($row = mysql_fetch_array($result)) {
    $count++;
    echo '<img src="data:image/jpeg;base64,' . base64_encode($row['img']) . '" width="290" height="290" class = box>';
  }
?>

click.js

$(document.ready(function(){
  $('.box').live("click", function() {
    if($(this).find('.check_image').length == 0){
      $(this).append("<div class='check_image'><img src='check.png' /></div>");
    }else{
      $(this).find('.check_image').remove();
   }
});
Pang
  • 9,564
  • 146
  • 81
  • 122
johnnnieyy
  • 11
  • 2
  • A suggestion is create a column in your image table name `check set (2) values 0,1 and default 0 (uncheck)` .Now when a image click/unclick send an ajax request with image id and change the column values correspondingly. Now at the time of fetching images fetch the checked column too and based on it's value make you box checked-unchecked. – Alive to die - Anant Mar 08 '17 at 05:52
  • 2
    Stop using those insecure, unmaintained, long deprecated database APIs. http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php – miken32 Mar 08 '17 at 06:12
  • Your code uses the `mysql_xxx()` functions. **Stop right there.** Before you do anything else, follow the link given by @miken32 above, and learn why you should not be using these functions any more. You should urgently consider re-writing your code to use the more up-to-date database APIs available in PHP. – Simba Mar 08 '17 at 13:13

1 Answers1

0

Ok so I would suggest getting CSS to do display the tick. It will mean wrapping your echoed img tab in a div (you can't use the pseudo selector :after directly on an img tag alas. I have used a font library (font-awesome) this is a great way of getting icons like ticks and trashcans etc into your pages. They scale and can be coloured.

as has been mentioned in other posts you are using some depreciated calls in both your PHP and jQuery. Have a play with this:

$('.clickable').on('click',function(e){
$(this).toggleClass('clicked');
})
.clickable.clicked:after{
  font-family: FontAwesome;
  content: "\f00c";
  color:lime;
  position:absolute;
  top:2px;
  right:2px;
  font-size:40px;
  text-shadow: -2px 3px 2px rgba(150, 150, 150, 0.8);
}

.clickable{
  cursor:pointer;
  position:relative;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="clickable" style="width:320px;height:240px;">
<img src="http://www.richardhulbert.com/wp-content/uploads/2011/04/New-Forest-11.jpg"  alt="nice van bros!" />
</div>
Richard
  • 111
  • 1
  • 4