How to change json retrieve data method to php - php

Question

I currently had found bootstrap image gallery from here https://blueimp.github.io/Bootstrap-Image-Gallery/
I had found that they are using ajax json method to display the image from flikr website. But i currently using php to retrieve the image from database. Anyway i can change the ajax json code to retrieve my image from php other than using json method? Thanks
Here are the ajax json code the code retrieving image from flikr :
// Load demo images from flickr:
$.ajax({
url: 'https://api.flickr.com/services/rest/',
data: {
format: 'json',
method: 'flickr.interestingness.getList',
api_key: '7617adae70159d09ba78cfec73c13be3'
},
dataType: 'jsonp',
jsonp: 'jsoncallback'
}).done(function (result) {
var linksContainer = $('#links'),
baseUrl;
// Add the demo images as links with thumbnails to the page:
$.each(result.photos.photo, function (index, photo) {
baseUrl = 'http://farm' + photo.farm + '.static.flickr.com/' +
photo.server + '/' + photo.id + '_' + photo.secret;
$('<a/>')
.append($('<img>').prop('src', baseUrl + '_s.jpg'))
.prop('href', baseUrl + '_b.jpg')
.prop('title', photo.title)
.attr('data-gallery', '')
.appendTo(linksContainer);
});
});
Here are the sample php code i plan to use to retrieve the image from my database:
<?php
include 'dbConnect.php';
global $conn;
if($kiosk=='0'){
$query = "SELECT * FROM M_Photo WHERE photo_kiosk ='$kiosk' AND photo_deleted ='0' ORDER BY photo_name";
}
else{
$query = "SELECT * FROM I_Photo WHERE photo_kiosk ='$kiosk' AND photo_deleted ='0' ORDER BY photo_name";
}
$result = sqlsrv_query($conn,$query);
while( $row = sqlsrv_fetch_array ( $result, SQLSRV_FETCH_ASSOC )){
?>
<li id="image-1" class="thumbnail">
<a style="background-image:url(Upload/<?php echo $row['photo_data']; ?>);background-size: 100px 100px;background-repeat: no-repeat;" title="<?php echo $row['photo_name']; ?>" href="Upload/<?php echo $row['photo_data']; ?>">
<img class="grayscale" src="Upload/<?php echo $row['photo_data']; ?>" alt="<?php echo $row['photo_name']; ?>" style="width:100px; height:100px" ></a>
</li>
<?php
}
sqlsrv_free_stmt($result);
sqlsrv_close($conn);
?>
Anyway to change the ajax code to achieve that?

Answer 1

Try this php code:
<?php
include 'dbConnect.php';
global $conn;
if($kiosk=='0') {
$query="SELECT * FROM M_Photo WHERE photo_kiosk ='$kiosk' AND photo_deleted ='0' ORDER BY photo_name";
} else {
$query="SELECT * FROM I_Photo WHERE photo_kiosk ='$kiosk' AND photo_deleted ='0' ORDER BY photo_name";
}
$result=sqlsrv_query($conn,$query);
while($row=sqlsrv_fetch_array($result,SQLSRV_FETCH_ASSOC)) {
}
$row=json_encode($row);
echo $row;
sqlsrv_free_stmt($result);
sqlsrv_close($conn);
?>
And javascript:
<script type="text/javascript">
$.ajax({
url:'your php file address',
dataType:'json'
}).done(function(result) {
var linksContainer=$('#links'), baseUrl;
$.each(result, function(index,photo) {
baseUrl='Upload/'+photo.photo_data;
$('<a/>').append($('<img>').prop('src','Upload/'+photo.photo_data)).prop('href','Upload/'+photo.photo_data).prop('title',photo.name).attr('data-gallery','').appendTo(linksContainer);
});
});
</script>