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 Select Expand

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

Code Select Expand

                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 Select Expand

editArea.appendChild(editAreaText);


In codebase.php, find

Code Select Expand

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

Code Select Expand

$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 Select Expand

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

Code Select Expand

       $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 Select Expand


                $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 Select Expand


                $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 Select Expand

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]

[Djtale]

Hello.

instead of writing a note, is it possible to show a dropdown list (for example, a list of members) and select what we want as a note in this list ?

Thank you.

[Αndré]

That's of course possible and will be in the cpg1.5.x version of this plugin. But it's easy to code this yourself. Just display a select instead of the button.

[Djtale]

That's of course possible and will be in the cpg1.5.x version of this plugin. But it's easy to code this yourself. Just display a select instead of the button.

Hi andré.
I see that you've already doen a similar modification. Do I have to edit the css or the php file to replace the rectangle in which i write the note by a select box ?

[Αndré]

My modification creates a select box that passes the selected value to the edit box. If you want to have that select box next to the note, you have to edit the photonotes.js file.