This is kind of a difficult question to pose as I don't have a lot of backend knowledge so forgive me if my jargon is not up to par.
Basically, I have a gallery of images and I need users to be able to "like" an image and have that increment a counter which then is stored to the server. So, if say 50 users liked a particular image, it would show "50" on that image to all users.
I'm assuming php and ajax are the best bet here.
Any help would be greatly appreciated.
Okay, here an example for a very simple like mechanism.
NOTE:
First we need our Gallery Markup:
<ul>
<li><a class="likeLink" data-imageid="1"><img src="https://dummyimage.com/100x100/000/fff" /><span class="likes">0</span></a></li>
<li><a class="likeLink" data-imageid="2"><img src="https://dummyimage.com/100x100/000/fff" /><span class="likes">0</span></a></li>
<li><a class="likeLink" data-imageid="3"><img src="https://dummyimage.com/100x100/000/fff" /><span class="likes">0</span></a></li>
<li><a class="likeLink" data-imageid="4"><img src="https://dummyimage.com/100x100/000/fff" /><span class="likes">0</span></a></li>
</ul>
data-imageid: This is our reference for the likes set on an image
< span class="likes" >: just a litte container that show likes for an image
Now we need a "store", in this example case a simple json object:
{
"images":[
{"imageId":1,"likes":0},
{"imageId":2,"likes":0},
{"imageId":3,"likes":0},
{"imageId":4,"likes":0}
]
}
Next we need is a bit JavaScript:
$(document).ready(function(){
// Initial loading likes for images
$.ajax({
type: 'GET',
url: 'setlike.php?getAllLikes',
success: function (data) {
$.each(data.images, function(index, value){
$('.likeLink[data-imageid="'+ value.imageId +'"]').find('.likes').html(value.likes);
});
}
});
// Set a like for an image
$('.likeLink').on('click', function(){
var imageId = $(this).attr('data-imageid');
$.ajax({
type: 'POST',
url: 'setlike.php',
data: { imageId: imageId },
success: function (data) {
$('.likeLink[data-imageid="'+ data.imageId +'"]').find('.likes').html(data.likes);
}
});
})
})
Last but not least, we need a php script that handle our ajax requests:
header('Content-Type: application/json');
$data = file_get_contents('store.json'); // In this file is our json object
if(isset($_GET['getAllLikes'])) {
echo $data;
}
if(isset($_POST['imageId']))
{
$jsonObj = json_decode($data);
$likedImg = null;
foreach($jsonObj->images as $v)
{
if($v->imageId == $_POST['imageId'])
{
$v->likes++;
$likedImg = $v;
}
}
file_put_contents('store.json', json_encode($jsonObj));
echo json_encode($likedImg);
}