How to change json retrieve data method to 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>