Flikr style image annotations

[Αndré]

I can't seem to drag the square all the way to the right side, or the lower side of the image (it stops about 20px or so from the right or the bottom sides)

In lib/photonotes.js, find

Code:

                this.maxRight = currentNote.container.element.offsetWidth - 30;
                this.maxBottom = currentNote.container.element.offsetHeight - 19;

and replace with

Code:

                this.maxRight = currentNote.container.element.offsetWidth - 2;
                this.maxBottom = currentNote.container.element.offsetHeight - 2;

[bitcloud]

cheers for the help,

unfortunately, that value doesn't seem to affect the outcome (even if I set it outrageously high, or as a positive integer, i have the same result...)
is there somewhere else i could be looking?

is there some CSS perhaps?

[Αndré]

The change does exactly what you asked for. Maybe you have to clean your browser cache.

[asas]

In lib/photonotes.js, delete

Code:

editArea.appendChild(editAreaText);

In codebase.php, find

Code:

$sql = "SELECT * FROM {$CONFIG['TABLE_PREFIX']}notes WHERE pid = {$CURRENT_PIC_DATA['pid']}";

and replace with

Code:

$sql = "SELECT *, u.user_name AS note FROM {$CONFIG['TABLE_PREFIX']}notes n INNER JOIN {$CONFIG['TABLE_USERS']} u ON n.user_id = u.user_id WHERE n.pid = {$CURRENT_PIC_DATA['pid']}";

In codebase.php, find

Code:

$html = '<div class="Photo fn-container" id="PhotoContainer">' . $html . '</div>';

and replace with

Code:

       $html = '<div class="Photo fn-container" id="PhotoContainer">' . $html . '</div>';

        $sql = "SELECT u.user_name, u.user_id FROM {$CONFIG['TABLE_PREFIX']}notes n INNER JOIN {$CONFIG['TABLE_USERS']} u ON n.user_id = u.user_id WHERE n.pid = {$CURRENT_PIC_DATA['pid']}  ORDER BY posx, posy";
        $result = cpg_db_query($sql);
        $profile_links = "";
        while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
            $profile_links .= "<a href=\"profile.php?uid={$row['user_id']}\">{$row['user_name']}</a> ";
        }
        if ($profile_links != "") {
     $html .= "
         <div style=\"clear: both; padding-top: 10px;\">
                    $profile_links
         </div>
            ";
        }

Just curious what this is supposed to do? I applied it and nothing happens. Is it supposed to link the person being tagged to their profile? and as a note, my gallery is bridged to SMF.

Thanks a lot

[Αndré]

Just curious what this is supposed to do? I applied it and nothing happens. Is it supposed to link the person being tagged to their profile? and as a note, my gallery is bridged to SMF.

That are the code changes for this request.

I haven't tested it in a bridged gallery. I think it doesn't work for you because of this query:

SELECT *, u.user_name AS note FROM {$CONFIG['TABLE_PREFIX']}notes n INNER JOIN {$CONFIG['TABLE_USERS']} u ON n.user_id = u.user_id WHERE n.pid = {$CURRENT_PIC_DATA['pid']}

[asas]

That are the code changes for this request.

I haven't tested it in a bridged gallery. I think it doesn't work for you because of this query:

Perfect, thanks a lot.

So I replace the bolded parts with the right table names and prefixes (SMF bridge), do you think it will work? or is there more to it? I know you haven't tested it, but I just want to see what you think.

Thanks a lot,

[Αndré]

So I replace the bolded parts with the right table names and prefixes (SMF bridge)

Make sure the plugin works without my modifications. If it does, you just have to change the mentioned SQL query.

[sjthespian]

Make sure the plugin works without my modifications. If it does, you just have to change the mentioned SQL query.

I was able to get it working with Joomla with the following changes:
Change the first select statement to read:

Code:

                $sql = "SELECT *, u.name AS note FROM {$CONFIG['TABLE_PREFIX']}notes n INNER JOIN jos_users u ON n.user_id = u.id WHERE n.pid = {$CURRENT_PIC_DATA['pid']}";

And I also had to add "$row['params'] = ''; before the line $notes[] = $row, as I had some newline separated data in the annoations that was causing errors in the javascript.

The second SELECT statment should then read:

Code:

                $sql = "SELECT u.name AS user_name, u.id AS user_id FROM {$CONFIG['TABLE_PREFIX']}notes n INNER JOIN jos_users u ON n.user_id = u.id WHERE n.pid = {$CURRENT_PIC_DATA['pid']}  ORDER BY posx, posy";

The above will tag the image with the user's real name, use "u.username" in both SELECT statements if you prefer having the username.

The next thing I want to do if I can figure out a decent way to do it is to provide a list of users instead of a free-form text box, so people aren't restricted to just tagging themselves in pictures.

[bitcloud]

Cheers eenemeenemuu... still getting that problem though.

 I'll put it online in the next few days and give you a look...

[heartsy]

Is there a way to make the yellow box (the area you selected for mouseover) to not show up? I want it there when you edit or add your annotations, so you can see to drag it to appropiate size, but after that I would like it to disappear. Like photo tags on myspace or facebook, when you mouseover the area selected, just the little info note pops up, without the yellow frame around your selected area.

[Αndré]

Like photo tags on myspace or facebook, when you mouseover the area selected, just the little info note pops up, without the yellow frame around your selected area.

Please attach a screenshot, as I don't know how it looks in myspace/facebook.

[heartsy]

Sure... on the attached photo you can see my mouse is on the image.. and you see the little note with the person's name on it.. but you don't see the selected area's frame.

[heartsy]

actually I guess you can't see my mouse..or cursor rather.. but it was on there, not sure why it didn't show up in the printscreen.

[Αndré]

It's not as trivial as I thought. When I disable the box you cannot add new notes. You have to try some changes in photonotes.js. Have a look at the functions hide(all)note(texts), show(all)note(texts), createelements.

[heartsy]

ok I'll try that.. cuz yeah when I made that first .fn-area transparent... the resize square disappeared to. Apparently it was still there kind of, I had the cursor show the things to resize, but no actual corners or squares so you could see where to drag and resize. Kept the edit box no problem, I mean you could still add your tag, and that was visible, just made it almost impossible to select the area you wanted.

[heartsy]

I found it... in the photonotes.js file just as you said... there's a part that says...

Code:

PhotoNote.prototype.ShowNoteText = function()
{
    if(!this.container.editing)
    {
        this.container.HideAllNoteTexts();
        this.container.DisableAllNotes();
        this.EnableNote();

        this.gui.ElementRect.style.border='0px solid #D4D82D'; // <---this line originally had 1px for border.
        this.gui.ElementRect.style.margin='0';
        this.gui.ElementNote.style.display='block';

that change removed the yellow box all together.. and you still have the lil square corners to drag and move as you wish to select your area, just no line connecting them. If that makes any sense.

Just figured I'd post my findings in case someone else wanted to remove the selection border.

[Edit GauGau] Added bbcode tag "code" to the posting to make it better readable and easier for others to copy and paste. Please use bbcode where applicable [/Edit]