Facebook like photo gallery with comments

Facebook like photo gallery with comments

113 268980
Facebook like photo gallery with comments
Facebook like photo gallery with comments

Facebook like photo gallery with comments

Have you thought about own facebook-style photo gallry system with comments? I think – yes. Today I made up my mind to prepare it for you. Main idea – when we click at images – they popup (ajax) with bigger image at the left and comments section at the right. All images are in the database (mySQL). And, of course, we will use PHP to achieve our result. Also, our comment system will prevent accepting more than 1 comment per 10 mins (to avoid spam).

Live Demo

[sociallocker]

download in package

[/sociallocker]


Now – download the source files and lets start coding !


Step 1. SQL

For our gallery I prepared two SQL tables: first table keeps records of our images. It contains several fields: title, filename, description, time of adding and comments count. Another table keeps comments. So, execute next SQL instructions:

CREATE TABLE IF NOT EXISTS `s281_photos` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `title` varchar(255) default '',
  `filename` varchar(255) default '',
  `description` text NOT NULL,
  `when` int(11) NOT NULL default '0',
  `comments_count` int(11) NOT NULL default '0',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
INSERT INTO `s281_photos` (`title`, `filename`, `description`, `when`) VALUES
('Item #1', 'photo1.jpg', 'Description of Item #1', UNIX_TIMESTAMP()),
('Item #2', 'photo2.jpg', 'Description of Item #2', UNIX_TIMESTAMP()+1),
('Item #3', 'photo3.jpg', 'Description of Item #3', UNIX_TIMESTAMP()+2),
('Item #4', 'photo4.jpg', 'Description of Item #4', UNIX_TIMESTAMP()+3),
('Item #5', 'photo5.jpg', 'Description of Item #5', UNIX_TIMESTAMP()+4),
('Item #6', 'photo6.jpg', 'Description of Item #6', UNIX_TIMESTAMP()+5),
('Item #7', 'photo7.jpg', 'Description of Item #7', UNIX_TIMESTAMP()+6),
('Item #8', 'photo8.jpg', 'Description of Item #8', UNIX_TIMESTAMP()+7),
('Item #9', 'photo9.jpg', 'Description of Item #9', UNIX_TIMESTAMP()+8),
('Item #10', 'photo10.jpg', 'Description of Item #10', UNIX_TIMESTAMP()+9);
CREATE TABLE IF NOT EXISTS `s281_items_cmts` (
  `c_id` int(11) NOT NULL AUTO_INCREMENT ,
  `c_item_id` int(12) NOT NULL default '0',
  `c_ip` varchar(20) default NULL,
  `c_name` varchar(64) default '',
  `c_text` text NOT NULL ,
  `c_when` int(11) NOT NULL default '0',
  PRIMARY KEY (`c_id`),
  KEY `c_item_id` (`c_item_id`)
) ENGINE=MYISAM DEFAULT CHARSET=utf8;

Step 2. PHP

Now, please create empty index.php file and put next code:

index.php

<?php
// disable warnings
if (version_compare(phpversion(), "5.3.0", ">=")  == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
require_once('classes/CMySQL.php'); // include service classes to work with database and comments
require_once('classes/CMyComments.php');
if ($_POST['action'] == 'accept_comment') {
    echo $GLOBALS['MyComments']->acceptComment();
    exit;
}
// prepare a list with photos
$sPhotos = '';
$aItems = $GLOBALS['MySQL']->getAll("SELECT * FROM `s281_photos` ORDER by `when` ASC"); // get photos info
foreach ($aItems as $i => $aItemInfo) {
    $sPhotos .= '<div class="photo"><img src="images/thumb_'.$aItemInfo['filename'].'" id="'.$aItemInfo['id'].'" /><p>'.$aItemInfo['title'].' item</p><i>'.$aItemInfo['description'].'</i></div>';
}
?>
<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="utf-8" />
    <title>Facebook like photo gallery with comments | Script Tutorials</title>
    <!-- Link styles -->
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <!-- Link scripts -->
    <script src="https://www.google.com/jsapi"></script>
    <script>
        google.load("jquery", "1.7.1");
    </script>
    <script src="js/script.js"></script>
</head>
<body>
    <header>
        <h2>Facebook like photo gallery with comments</h2>
        <a href="https://script-tutorials.com/facebook-like-photo-gallery-with-comments/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
    </header>
    <!-- Container with last photos -->
    <div class="container">
        <h1>Last photos:</h1>
        <?= $sPhotos ?>
    </div>
    <!-- Hidden preview block -->
    <div id="photo_preview" style="display:none">
        <div class="photo_wrp">
            <img class="close" src="images/close.gif" />
            <div style="clear:both"></div>
            <div class="pleft">test1</div>
            <div class="pright">test2</div>
            <div style="clear:both"></div>
        </div>
    </div>
</body></html>

We have just created main index file of our gallery. By default – script generates a list of images (with title and description), and it also generates an empty hidden object which we are going to use in order to accept custom content by ajax requests. Also, when we post comments, we forward this request (to accept new comment) into comments class. Now, lets review next important php file:

photos_ajx.php

<?php
// disable warnings
if (version_compare(phpversion(), "5.3.0", ">=")  == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
if ($_POST['action'] == 'get_info' && (int)$_POST['id'] > 0) {
    require_once('classes/CMySQL.php'); // include service classes to work with database and comments
    require_once('classes/CMyComments.php');
    // get photo info
    $iPid = (int)$_POST['id'];
    $aImageInfo = $GLOBALS['MySQL']->getRow("SELECT * FROM `s281_photos` WHERE `id` = '{$iPid}'");
    // prepare last 10 comments
    $sCommentsBlock = $GLOBALS['MyComments']->getComments($iPid);
    $aItems = $GLOBALS['MySQL']->getAll("SELECT * FROM `s281_photos` ORDER by `when` ASC"); // get photos info
    // Prev & Next navigation
    $sNext = $sPrev = '';
    $iPrev = (int)$GLOBALS['MySQL']->getOne("SELECT `id` FROM `s281_photos` WHERE `id` < '{$iPid}' ORDER BY `id` DESC LIMIT 1");
    $iNext = (int)$GLOBALS['MySQL']->getOne("SELECT `id` FROM `s281_photos` WHERE `id` > '{$iPid}' ORDER BY `id` ASC LIMIT 1");
    $sPrevBtn = ($iPrev) ? '<div class="preview_prev" onclick="getPhotoPreviewAjx(\''.$iPrev.'\')"><img src="images/prev.png" alt="prev" /></div>' : '';
    $sNextBtn = ($iNext) ? '<div class="preview_next" onclick="getPhotoPreviewAjx(\''.$iNext.'\')"><img src="images/next.png" alt="next" /></div>' : '';
    require_once('classes/Services_JSON.php');
    $oJson = new Services_JSON();
    header('Content-Type:text/javascript');
    echo $oJson->encode(array(
        'data1' => '<img class="fileUnitSpacer" src="images/'. $aImageInfo['filename'] .'">' . $sPrevBtn . $sNextBtn,
        'data2' => $sCommentsBlock,
    ));
    exit;
}

This file sends back information about requested photo. This is an enlarged image, block with comments and navigation buttons (to open previous / next images ajaxy). As you can see – we use comments class, now, it’s time to look at it too:

classes/CMyComments.php

<?php
class CMyComments {
    // constructor
    function CMyComments() {
    }
    // return comments block
    function getComments($i) {
        // draw last 10 comments
        $sComments = '';
        $aComments = $GLOBALS['MySQL']->getAll("SELECT * FROM `s281_items_cmts` WHERE `c_item_id` = '{$i}' ORDER BY `c_when` DESC LIMIT 10");
        foreach ($aComments as $i => $aCmtsInfo) {
            $sWhen = date('F j, Y H:i', $aCmtsInfo['c_when']);
            $sComments .= <<<EOF
<div class="comment" id="{$aCmtsInfo['c_id']}">
    <p>Comment from {$aCmtsInfo['c_name']} <span>({$sWhen})</span>:</p>
    <p>{$aCmtsInfo['c_text']}</p>
</div>
EOF;
        }
        return <<<EOF
<div class="comments" id="comments">
    <h2>Comments</h2>
    <div id="comments_warning1" style="display:none">Don`t forget to fill both fields (Name and Comment)</div>
    <div id="comments_warning2" style="display:none">You can't post more than one comment per 10 minutes (spam protection)</div>
    <form onsubmit="return false;">
        <table>
            <tr><td class="label"><label>Your name: </label></td><td class="field"><input type="text" value="" title="Please enter your name" id="name" /></td></tr>
            <tr><td class="label"><label>Comment: </label></td><td class="field"><textarea name="text" id="text"></textarea></td></tr>
            <tr><td class="label">&nbsp;</td><td class="field"><button onclick="submitComment({$i}); return false;">Post comment</button></td></tr>
        </table>
    </form>
    <div id="comments_list">{$sComments}</div>
</div>
EOF;
    }
    function acceptComment() {
        $iItemId = (int)$_POST['id']; // prepare necessary information
        $sIp = $this->getVisitorIP();
        $sName = $GLOBALS['MySQL']->escape(strip_tags($_POST['name']));
        $sText = $GLOBALS['MySQL']->escape(strip_tags($_POST['text']));
        if ($sName && $sText) {
            // check - if there is any recent post from you or not
            $iOldId = $GLOBALS['MySQL']->getOne("SELECT `c_item_id` FROM `s281_items_cmts` WHERE `c_item_id` = '{$iItemId}' AND `c_ip` = '{$sIp}' AND `c_when` >= UNIX_TIMESTAMP() - 600 LIMIT 1");
            if (! $iOldId) {
                // if everything is fine - allow to add comment
                $GLOBALS['MySQL']->res("INSERT INTO `s281_items_cmts` SET `c_item_id` = '{$iItemId}', `c_ip` = '{$sIp}', `c_when` = UNIX_TIMESTAMP(), `c_name` = '{$sName}', `c_text` = '{$sText}'");
                $GLOBALS['MySQL']->res("UPDATE `s281_photos` SET `comments_count` = `comments_count` + 1 WHERE `id` = '{$iItemId}'");
                // and print out last 10 comments
                $sOut = '';
                $aComments = $GLOBALS['MySQL']->getAll("SELECT * FROM `s281_items_cmts` WHERE `c_item_id` = '{$iItemId}' ORDER BY `c_when` DESC LIMIT 10");
                foreach ($aComments as $i => $aCmtsInfo) {
                    $sWhen = date('F j, Y H:i', $aCmtsInfo['c_when']);
                    $sOut .= <<<EOF
<div class="comment" id="{$aCmtsInfo['c_id']}">
    <p>Comment from {$aCmtsInfo['c_name']} <span>({$sWhen})</span>:</p>
    <p>{$aCmtsInfo['c_text']}</p>
</div>
EOF;
                }
                return $sOut;
            }
        }
        return 1;
    }
    // get visitor IP
    function getVisitorIP() {
        $ip = "0.0.0.0";
        if( ( isset( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) && ( !empty( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) ) {
            $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
        } elseif( ( isset( $_SERVER['HTTP_CLIENT_IP'])) && (!empty($_SERVER['HTTP_CLIENT_IP'] ) ) ) {
            $ip = explode(".",$_SERVER['HTTP_CLIENT_IP']);
            $ip = $ip[3].".".$ip[2].".".$ip[1].".".$ip[0];
        } elseif((!isset( $_SERVER['HTTP_X_FORWARDED_FOR'])) || (empty($_SERVER['HTTP_X_FORWARDED_FOR']))) {
            if ((!isset( $_SERVER['HTTP_CLIENT_IP'])) && (empty($_SERVER['HTTP_CLIENT_IP']))) {
                $ip = $_SERVER['REMOTE_ADDR'];
            }
        }
        return $ip;
    }
}
$GLOBALS['MyComments'] = new CMyComments();
?>

This class performs two main functions – it can accept new comments and also it can give us a box with comments. There are two more service classes: CMySQL.php and Services_JSON.php. They are two known classes to work with database and json. You can adjust database settings in database class. Both classes available in our package.

Step 3. Javascript

Now we should prepare user interface behavior with using javascript, please prepare next file for the project:

js/script.js

// close photo preview block
function closePhotoPreview() {
    $('#photo_preview').hide();
    $('#photo_preview .pleft').html('empty');
    $('#photo_preview .pright').html('empty');
};
// display photo preview block
function getPhotoPreviewAjx(id) {
    $.post('photos_ajx.php', {action: 'get_info', id: id},
        function(data){
            $('#photo_preview .pleft').html(data.data1);
            $('#photo_preview .pright').html(data.data2);
            $('#photo_preview').show();
        }, "json"
    );
};
// submit comment
function submitComment(id) {
    var sName = $('#name').val();
    var sText = $('#text').val();
    if (sName && sText) {
        $.post('index.php', { action: 'accept_comment', name: sName, text: sText, id: id },
            function(data){
                if (data != '1') {
                    $('#comments_list').fadeOut(1000, function () {
                        $(this).html(data);
                        $(this).fadeIn(1000);
                    });
                } else {
                    $('#comments_warning2').fadeIn(1000, function () {
                        $(this).fadeOut(1000);
                    });
                }
            }
        );
    } else {
        $('#comments_warning1').fadeIn(1000, function () {
            $(this).fadeOut(1000);
        });
    }
};
// init
$(function(){
    // onclick event handlers
    $('#photo_preview .photo_wrp').click(function (event) {
        event.preventDefault();
        return false;
    });
    $('#photo_preview').click(function (event) {
        closePhotoPreview();
    });
    $('#photo_preview img.close').click(function (event) {
        closePhotoPreview();
    });
    // display photo preview ajaxy
    $('.container .photo img').click(function (event) {
        if (event.preventDefault) event.preventDefault();
        getPhotoPreviewAjx($(this).attr('id'));
    });
})

Please note, we use jQuery instructions in our script (I hope that you haven’t forgot that we linked jQuery library in the header section through google service).

Step 4. CSS

In the long run, we should stylize our page elements (our container with photos, photo preview area with comments):

css/main.css

/* project styles */
.container {
    border: 1px solid #111111;
    color: #000000;
    margin: 20px auto;
    overflow: hidden;
    padding: 15px;
    position: relative;
    text-align: center;
    width: 1090px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.photo {
    border: 1px solid transparent;
    float: left;
    margin: 4px;
    overflow: hidden;
    padding: 4px;
    white-space: nowrap;
    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    /* CSS3 transition */
    -moz-transition: border 0.2s ease 0s;
    -ms-transition: border 0.2s ease 0s;
    -o-transition: border 0.2s ease 0s;
    -webkit-transition: border 0.2s ease 0s;
    transition: border 0.2s ease 0s;
}
.photo:hover {
    border-color: #444;
}
.photo img {
    cursor: pointer;
    width: 200px;
}
.photo p, .photo i {
    display: block;
}
.photo p {
    font-weight: bold;
}
/* preview styles */
#photo_preview {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    color: #000000;
    display: none;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10;
}
.photo_wrp {
    background-color: #FAFAFA;
    height: auto;
    margin: 100px auto 0;
    overflow: hidden;
    padding: 15px;
    text-align: center;
    vertical-align: middle;
    width: 1000px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.close {
    cursor: pointer;
    float: right;
}
.pleft {
    float: left;
    overflow: hidden;
    position: relative;
    width: 600px;
}
.pright {
    float: right;
    position: relative;
    width: 360px;
}
.preview_prev, .preview_next {
    cursor: pointer;
    margin-top: -64px;
    opacity: 0.5;
    position: absolute;
    top: 50%;
    -moz-transition: opacity 0.2s ease 0s;
    -ms-transition: opacity 0.2s ease 0s;
    -o-transition: opacity 0.2s ease 0s;
    -webkit-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
}
.preview_prev:hover, .preview_next:hover {
    opacity: 1;
}
.preview_prev {
    left: 20px;
}
.preview_next {
    right: 40px;
}
/* comments styles */
#comments form {
    margin: 10px 0;
    text-align: left;
}
#comments table td.label {
    color: #000;
    font-size: 13px;
    padding-right: 3px;
    text-align: right;
    width: 105px;
}
#comments table label {
    color: #000;
    font-size: 16px;
    font-weight: normal;
    vertical-align: middle;
}
#comments table td.field input, #comments table td.field textarea {
    border: 1px solid #96A6C5;
    font-family: Verdana,Arial,sans-serif;
    font-size: 16px;
    margin-top: 2px;
    padding: 6px;
    width: 250px;
}
#comments_list {
    margin: 10px 0;
    text-align: left;
}
#comments_list .comment {
    border-top: 1px solid #000;
    padding: 10px 0;
}
#comments_list .comment:first-child {
    border-top-width:0px;
}
#comments_list .comment span {
    font-size: 11px;
}

Live Demo

Conclusion

And again, we have just prepared our next practically useful tutorial. Sure that this material will useful for your own projects. Good luck in your work!

SIMILAR ARTICLES

Understanding Closures

0 8350

113 COMMENTS

    • Hi batrisya, this is very easy, check classes/CMySQL.php file
      $this->sDbName = ‘YOUR_DB_NAME’;
      $this->sDbUser = ‘DB_USER_NAME’;
      $this->sDbPass = ‘DB_USER_PASS’;
      You should apply your own database params

  1. Hi

    Great script, but….

    Facebook have a page counter telling witch number of photo you are watching. Like: Photo 23 of 34. How to add?

    This gallery seems to only work in a single album. On Facebook you can click on a photo on the wall, and see the photo. And EVEN browse all photos in the same album.

    How to add this to this script??

    • Hi Kenny,
      You should work in photos_ajx.php if you like to modify ajaxy output.
      Search for
      ‘data1’ => ‘<img class="fileUnitSpacer"
      and replace it to next code:
      ‘data1’ => ‘<div>Photo ‘.$iPid.’ of ‘.count($aItems).'</div><img class="fileUnitSpacer"
      that is all, and we will have similar counter as you asked me.

      And, you can use this gallery everywhere. You always can implement albums system in your project. And, depends on current album – display necessary images.

  2. Hi- this could be an answer to a prayer. I’ve been searching for a tool that would allow me to have photos with comments (Facebook-like, just as you said) for almost two years. My question for you is this: how could this be used as a plugin module for Moodle LMS (see http://www.moodle.org)? My goal is to be able to have students upload their own photos to the gallery, then have other students comment on each others’ photos. If you could create this to work in Moodle, you’d have a LOT of happy people (millions use Moodle, and it’s an open-source platform). Is it possible? Thanks again for this gallery!

    • Hello Tim,
      I think that you should have a good experience and as php developer, but also you should know this CMS (Moddle) too.
      I haven’t got any experience with this CMS, and it can take a pretty long time to investigate the sources of this script only to make it as a stand alone module.
      I think that it can be done as a custom work

  3. Hello sir,

    The source that I’ve downloaded is malfunctioning because when i open the index there is no photos inside or not displaying in the index.

    • Hello john,
      It works well, please don’t forget that you should run it at the localhost and you should set your own DB params for this script.

  4. Hi,

    First of all this is a great little script. I have customized the look of it even more so that it looks just like Facebook :)

    However, I just can not seem to get jQuery working INSIDE the ‘pop up gallery’. Do you know why this is?

    Many thanks,

    Matt

    • Hello Matt,
      Hmm, even don’t know, does jquery work well outside of popup? .. I suppose that it should work well inside popup too.
      or maybe, try to link jquery to popup output

  5. do we have to write in database tables all the time we add images? isn’t there any automatic technique to load image name in table

    • Hi swapnil,
      Yes, of course, all because we can have multiple albums at a final website, so we should be ready to it (and keep all photo infos in database). If you’ve got a static website, you can change our codes to work with static files only.
      Otherwise, you should add a record to your database in case of every upload.

  6. Hello! thanxs for share this amazing script!
    Sorry for the stupid question but I need your help. Everything works well but I’m not able to show more than 10 pics in my gallery.
    Could you help me please?

    • Hello Viola,
      In our demo – there are only 10 images, do you use exactly same demo at your side? Maybe you forgot to update all elements (images) in your database?

  7. Hello!
    how can I show all the comments posted beside the pics? at the moment I can see only the first comment posted!

    please give me a hand, thanks

    Eva

    • Hello Eva,
      Pay attention to our CMyComments.php, line 13:
      SELECT * FROM `s281_items_cmts` WHERE `c_item_id` = ‘{$i}’ ORDER BY `c_when` DESC LIMIT 10
      it means that we load 10 last elements from database, not one.

  8. Hello,

    Everything work and look great, but I can’t figure out how to automatically add rows to the gallery when I upload a new photo via ftp. Does it have to be done manually ? also is there a way to automatically generate the thumbs ?… The ideal would be to be able to just upload new photos to the folder, and have it all automatically ready and up in the gallery.
    Also how do you remove the 10mins per comment restriction ?

    Thanks for your help !

    • Yes, of course – I haven’t included upload functionality to this script, this is Display-only gallery. You should take upload on your own.
      Regarding comments restriction, please search for 600 in CMyComments.php file. 600 means 600 seconds (or, 10 minutes)

  9. hi,
    can you plz re-arranged this code in codeigniter . i am not very good in core so this is request to you.

  10. Hello Admin

    I Have one douth in this Script.After I have modified my DB i can able to get my image in index.php.
    But By clicking that image it show me some flower image..
    Please guide me where to change the code in photos_ajx.php

    • Hello Sarvnasubramanian,
      This script (photos_ajx.php) takes all the records from your database (from table s281_photos) and print them back to the page (as ajax response)

    • Hi hantam,
      If you need to restrict very big images, you can provide middle sized images, or, you can restrict your images with CSS as well.

    • Hello Ari,
      Yes, of course, everything is possible, try to check our related tutorials, I’ve already wrote similar articles (about adding captchas)

  11. Hi Andrew,

    First of all thank you for this website , and especially for this tutorial. I was looking everywhere for something like this for my website, but I would have one question. Is there any way to moderate the comments by the gallery owner. Or have the users of the website comment only. not anonymous users.

    • Hello Chris, thank for your comment, sorry for our late respond (we have to moderate a lot of different comments).
      You have to remember only one truth – that everything is possible! Nothing is impossible. If you’ve seen something – it already means that this is possible to repeat.
      If you need to add a moderation system – just do it. You always can enhance our version and add here something new like member registration, different levels for profiles (where you can define admins, moderators, ordinary users), you can develop own admin panel to moderate these photos and so on.

  12. Hello admin, thanks for the input.
    But I have a problem to recover the images.
    I recover without problems the attributes of database, but I can not view the images. Instead I get a small icon of a page with the corner folded.
    Can you help me please?
    Thank you very much.

    • Hello Angel,
      Please pay attention that all your images should be in ‘images’ folder. Both: and thumbs and images. In the same way as in our demo.

  13. Hello great job
    By nyat against it not a problem with the comments?
    If you put a comment on the first picture with no problem against the following does not add why?

    Thank you for your help

    • Thank you Steve for your notification, yes, this is my fault, I made one minor mistake.
      Correction, CMyComments.php, line 14, change it to
      foreach ($aComments as $x => $aCmtsInfo)

  14. Hi,
    I have two system… on 1 sytem ur code perfectly work… on another system it does not display any photo… I update my firefox as another system but still it is not showing.
    I have update db_name,password and all…
    is thr need for any extra plugin?

  15. Hello admin.

    So I’ve modified it a bit and got the gallery itself to post pictures on my portfolio page.
    Having one noobish problem once I click on the picture I just can’t get it to pop-up any ideas?
    http://www.rc-designs.nl is my website if you want to check it out.

    Greetings mastino

    • Hi Mastino,
      I think that you should fix your website, there are too many issues, like double body tag, double closed li-ul, also – html code after closed body tag. And, as for gallery, script.js file is not visible on this page – recheck your code

  16. I have problem with comments storing at back end.when i enter comments first time it works fine bt later its storing c_item_id as 0 in table when i add comments.. please help.

  17. Hi, thanks for the nice scripts. I’m converting the codes to Asp.Net. I’m totally new to php though. The only part I need help is the JSON part.
    Can you tell me what is the sample data from photos_ajx.php?
    This is what I have right now and it should be close

    {[
    {“data1″: ”

    “,
    “data2”: “”}]}

  18. I cant type the sample JSON output in this comment. Can you give us an example?
    My generated data contains div tag, onclick event etc. But when I click on the photo, it didn’t pop up. I think something wrong with my output.

    I’m planning to add fancybox or lightbox for the effects. Have you try for that?

    • Hi SH,
      json interaction consists of 2 parts:
      1. PHP. In this side you can send the JSON response using json_encode function. It accepts any PHP arrays.
      2. JS. In this side you can receive your server response. It can be one of jQuery functions: post or ajax. In the result of selected function, you can use JS-based array as you need.

  19. Hi Admin,

    I downloaded the package, extracted and put the files on my c:/inetpub/wwwroot/photogallery & created the database, executed the sql script against my photogallery database, change cMySQL.php for the db user & pwd, run the index.php but i did not see any images, nor blank image placeholder.

    What could be the problem why i’m not seeing anything?

    • Hello Jolo,
      Make sure that you open your project on localhost (http://localhost/photogallery/) and not by absolute path (c:/inetpub/wwwroot/photogallery).
      Also make sure that there are different photos in your c:/inetpub/wwwroot/photogallery/images folder

  20. Hi, great work. I have an issue:

    When i placed my connection strings’ data in cmysql.php i have the following error:
    Database query error

    i run it from localhost

  21. Ok, i found the problem in the file cmysql.php at line 19 it should be:
    $this->vLink = mysql_connect($this->sDbUser, $this->sDbName, $this->sDbPass);

    • Hello SK,
      The first param of mysql_connect is a host param (according to http://php.net/manual/en/function.mysql-connect.php). After – username and password. But, maybe it can be vary depending on your PHP version.

  22. i downloaded the source code and run it.when it run i can only put one comment for each picture.when i put two comments data goes to the database but display only one comment.how can i solve it.
    and one thing i want to put comment without waiting 10 mints.how can i do it.when put comments it appears “You can’t post more than one comment per 10 minutes” plz reply me soon as possible

    • Hi suzan,
      It should display 10 last comments (not one).
      As for time restriction, you can open classes\CMyComments.php file, and search for ‘600’.
      This is amount of seconds between comments. If you need – just change this param, to 5 (5 seconds) as example.

  23. Hi Suzan,
    if your question hasn’t answered yet…
    as for your question:
    1. (only one post/comment is visible in every picture).
    Sir admin had already addressed this issue you can scroll up as you have the same question as Steve.
    resolution: open class CMyComments.php, go to line 14, change it to
    foreach ($aComments as $x => $aCmtsInfo)
    2.) (You can’t post more than one comment per 10 minutes) –> Please follow the admin’s instruction as that is the best answer for your query.

  24. Hi i know only xhtml and little bit php can u give me step by step procedure to put this in my website. i loved this website

  25. Hello, Its me again! :) thanks for the source, is there a way for my users to upload and display the picture in the gallery? and another question which is really silly, can i use my users names instead of manually typing the name to comment?

    • Hello Hasancan, it is always up to you how to organize the system of members and albums structure. It was not the main idea of this tutorial. You always can enhance this script as you need.

  26. Hi, i have my own photos gallery upload by users?How can I insert comment function to those pictures?Help me please

    • Hello Amy, In this case you have to add a comment system. I think, that you have to read and understand our tutorial completely to understand how it works. Basically, you have to create a new DB table for comments, and link it with your images

Leave a Reply