Image description popups and Firefox...

[ZPrime]

When you hover over a thumbnail, you get a popup showing size, date uploaded, etc.  (I'm guessing this is coming from an ALT tag or something similar, but I didn't actually look at the source).

In IE, these items are on multiple lines in the popup.

In Firefox, all of the items appear on one line with some extended ASCII character between them (instead of a proper cr/lf).  This is incredibly minor as far as bugs go, but it looks pretty silly and is fairly annoying too.

[Joachim Müller]

you're right, but I have no idea how to accomplish the line breaks in tool tips for Firefox. In case someone knows, I'll gladly add it to the code.

[ZPrime]

I found a bit more info here, although the site is out of date.  Apparently you can do some javascript or CSS mojo to make it work...

It looks like line breaks may not actually be part of the W3C standard for "TITLE" tags, which is what you must be using with cumine for Firefox to natively support it.  (IE will tooltip the ALT tag as well but Firefox doesn't do this without an extension IIRC.)

This guy came up with a wordpress "addon" that gives fancy CSS/JS type tooltips - they're really nifty, but you'd have to go through his code to figure out how to impliment it with cumine, since his stuff is wordpress-specific I think.

It looks like this is considered a Mozilla bug as well, no idea when they're going to fix it.  I'm going to give the Popup ALT Attributes plugin a try to see if this "fixes" it for me...

[Tranz]

...what you must be using with cumine

I was like, what is cumine? My first thought was that it had something to do with porn... Then I realized... Cu = Copper. Very clever, ZPrime. Probably confusing to those who haven't studied chemistry recently or ever, but still clever.

[Joachim Müller]

Recommended library for JavaScript tool-tips: overLib. Never checked if it actually works with Coppermine though.

[RatKing]

 

Well overlib does work with coppermine.... I have it working now for my tumbnails views and it took no time at all to implement (most time was spend trying to find the right part of the code to make the change to 

So how does it work?

Well put the overlib.js script in you coppermine root.

Modify your template file to include the following line in the head element:

Code Select Expand

<script type="text/javascript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
And the body of that same template file:

Code Select Expand

<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>

The in functions.inc.php look fot the follwoing code:

Code Select Expand

                        $pic_title =$lang_display_thumbnails['filename'].$row['filename']."\n".
                                $lang_display_thumbnails['filesize'].($row['filesize'] >> 10).$lang_byte_units[1]."\n".
                                $lang_display_thumbnails['dimensions'].$row['pwidth']."x".$row['pheight']."\n".
                                $lang_display_thumbnails['date_added'].localised_date($row['ctime'], $album_date_fmt);

                        $pic_url =  get_pic_url($row, 'thumb');
                        if (!is_image($row['filename'])) {
                                $image_info = getimagesize($pic_url);
                                $row['pwidth'] = $image_info[0];
                                $row['pheight'] = $image_info[1];
                        }

                        $image_size = compute_img_size($row['pwidth'], $row['pheight'], $CONFIG['thumb_width']);

                        $thumb_list[$i]['pos'] = $key < 0 ? $key : $i - 1 + $lower_limit;
                        $thumb_list[$i]['image'] = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\">";
                        $thumb_list[$i]['caption'] = $row['caption_text'];
                        $thumb_list[$i]['admin_menu'] = '';
                        $thumb_list[$i]['aid'] = $row['aid'];


and replace with:

Code Select Expand

                        $pic_title =$lang_display_thumbnails['filename'].$row['filename']."<br />".
                                $lang_display_thumbnails['filesize'].($row['filesize'] >> 10).$lang_byte_units[1]."<br />".
                                $lang_display_thumbnails['dimensions'].$row['pwidth']."x".$row['pheight']."<br />".
                                $lang_display_thumbnails['date_added'].localised_date($row['ctime'], $album_date_fmt);

                        $pic_url =  get_pic_url($row, 'thumb');
                        if (!is_image($row['filename'])) {
                                $image_info = getimagesize($pic_url);
                                $row['pwidth'] = $image_info[0];
                                $row['pheight'] = $image_info[1];
                        }

                        $image_size = compute_img_size($row['pwidth'], $row['pheight'], $CONFIG['thumb_width']);

                        $thumb_list[$i]['pos'] = $key < 0 ? $key : $i - 1 + $lower_limit;
                        $thumb_list[$i]['image'] = "<img ".'onmouseover="return overlib(\''.$pic_title.'\');" onmouseout="return nd();"'." src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"\" title=\"\"/>";
                        $thumb_list[$i]['caption'] = $row['caption_text'];
                        $thumb_list[$i]['admin_menu'] = '';
                        $thumb_list[$i]['aid'] = $row['aid'];


For an example look at: http://www.ratking.net

[NevilleX]

Hi! I have installed this mod and it's working great, however I would like to change tooltips to show this:

- Title (instead of filename, if the title isn't set then show "untitled")
- Views
- Rating
- Number of votes
- Date added

I would also like this to show this in all other screens (Last uploads, Last comments, Most viewed, Top Rated, My Favorites)

I have tried to do this myself, I've changed part of display_thumbnails function to this:

Code Select Expand


                        if( $row['title'] != "") {
                            $pic_title ="<b>".$row['title']."</b><br />".
                            $lang_display_thumbnails['date_added'].localised_date($row['ctime'], $album_date_fmt);
                          } else {
                            $pic_title =$lang_display_thumbnails['date_added'].localised_date($row['ctime'], $album_date_fmt);
                          }


If...else is there because Title doesn't show in other screns, only in album view, so in other screen it will show only date. I have absolutely no idea how to add views and rating.

If anybody know how to accomplish to get tooltip like this in all screens, please help!

[Rodinou]

Overlib is so powerful you can load INTERMEDIATE pics on the fly ... and so more .... but in my memories, it's a quite heavy script (about 30 ko ?)

[RatKing]

The script is quite big but when you put it as an include on the top of your theme like I did the script will only be donwloaded once and after that be greped from local cache.

If you still feel the need to you could of course have a look at the script it self and modify it a little. I.o.w. cut out the bits that are not used, this should reduce the size dramaticly. Not sure though how the creator of the OverLib script would feel about that....  :-\\

[RatKing]

The other changes added are not to hard I didn't put them in because of lazyness. I'll post them later today or tomorrow.

The extra fields to display well I'll see about including that code, should not be so difficult (I think)

[RatKing]

Ok, for the missing overlib bit (this will as far as I can tell make all tumbnails shown anywhere have the overlib image description).

Open <CPG_ROOT>/include/functions.inc.php

And look for the following text:

Code Select Expand


                        $pic_title =$lang_display_thumbnails['filename'].$row['filename']."<br />".
                                $lang_display_thumbnails['filesize'].($row['filesize'] >> 10).$lang_byte_units[1]."<br />".
                                $lang_display_thumbnails['dimensions'].$row['pwidth']."x".$row['pheight']."<br />".
                                $lang_display_thumbnails['date_added'].localised_date($row['ctime'], $album_date_fmt);

                        $pic_url =  get_pic_url($row, 'thumb');
                        if (!is_image($row['filename'])) {
                                $image_info = getimagesize($pic_url);
                                $row['pwidth'] = $image_info[0];
                                $row['pheight'] = $image_info[1];
                        }

                        $image_size = compute_img_size($row['pwidth'], $row['pheight'], $CONFIG['thumb_width']);

                        $p=$i - 1;
                        $p=($p < 0 ? 0 : $p);
                        $thumb_list[$i]['pos'] = $key < 0 ? $key : $p;
                        $thumb_list[$i]['image'] = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\">";
                        $thumb_list[$i]['caption'] = $row['caption_text'];
                        $thumb_list[$i]['admin_menu'] = '';



Replace this with:

Code Select Expand


                        $pic_title =$lang_display_thumbnails['filename'].$row['filename']."<br />".
                                $lang_display_thumbnails['filesize'].($row['filesize'] >> 10).$lang_byte_units[1]."<br />".
                                $lang_display_thumbnails['dimensions'].$row['pwidth']."x".$row['pheight']."<br />".
                                $lang_display_thumbnails['date_added'].localised_date($row['ctime'], $album_date_fmt);

                        $pic_url =  get_pic_url($row, 'thumb');
                        if (!is_image($row['filename'])) {
                                $image_info = getimagesize($pic_url);
                                $row['pwidth'] = $image_info[0];
                                $row['pheight'] = $image_info[1];
                        }

                        $image_size = compute_img_size($row['pwidth'], $row['pheight'], $CONFIG['thumb_width']);

                        $p=$i - 1 + $lower_limit;
                        $p=($p < 0 ? 0 : $p);
                        $thumb_list[$i]['pos'] = $key < 0 ? $key : $p;
                        $thumb_list[$i]['image'] = "<img ".'onmouseover="return overlib(\''.$pic_title.'\');" onmouseout="return nd();"'." src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"\" title=\"\"/>";
                        $thumb_list[$i]['caption'] = $row['caption_text'];
                        $thumb_list[$i]['admin_menu'] = '';


Combined with the first part all thumbnails shown should now have the overlib popup description.... Should you find a part where the tumbnails don't have the overlib popup but just the plain old version let me know how you ended up on that page and I will make a change for that as well.

[RatKing]

Ok, and now for the adding of the extra fields....

First of all we need to modify all language files that are used on your site in this example I'll change the english:

Look for in lang/<your language>.php:

Code Select Expand


$lang_display_thumbnails = array(
  'filename'   => 'Filename : ',
  'filesize'   => 'Filesize : ',
  'dimensions' => 'Dimensions : ',
  'date_added' => 'Date added : ', //cpg1.3.0
);

Change to:

Code Select Expand


$lang_display_thumbnails = array(
  'filename'   => 'Filename : ',
  'title'      => 'Title : ',
  'filesize'   => 'Filesize : ',
  'hits'       => 'Views : ',
  'pic_rating' => 'Current rating : ',
  'votes'      => 'Number of votes : ',
  'dimensions' => 'Dimensions : ',
  'date_added' => 'Date added : ', //cpg1.3.0
);


Done that? Great no harm done no one will see anything happening just jet on your site.

Now we are going to add an extra function to functions.inc.php just to make it simpler for us to maintain should we want to make changes in the future:

So lets open CPG_ROOT/include/functions.inc.php and add the fllowing function:

Code Select Expand


// Return the popup info for a picture
function get_pic_popup(&$pic_row)
{
  global $album_date_fmt, $lang_display_thumbnails, $lang_byte_units;

  if ( $pic_row['title'] == '' ) {
    $title = $lang_display_thumbnails['filename'].$pic_row['filename']."<br />";
  } else {
    $title = $lang_display_thumbnails['title'].$pic_row['title']."<br />";
  }
  if ( $pic_row['hits'] ) {
    $hits = $lang_display_thumbnails['hits'].$pic_row['hits']."<br />";
  }
  if ( $pic_row['pic_rating'] ) {
    $pic_rating = $lang_display_thumbnails['pic_rating'].$pic_row['pic_rating']."<br />";
  }
  if ( $pic_row['votes'] ) {
    $votes = $lang_display_thumbnails['votes'].$pic_row['votes']."<br />";
  }
  $popup_text=$title.$hits.$pic_rating.$votes.
              $lang_display_thumbnails['filesize'].($pic_row['filesize'] >> 10).$lang_byte_units[1]."<br />".
              $lang_display_thumbnails['dimensions'].$pic_row['pwidth']."x".$pic_row['pheight']."<br />".
              $lang_display_thumbnails['date_added'].localised_date($pic_row['ctime'], $album_date_fmt);

  return $popup_text;
}


Now lets look for the two parts we changed before also in functions.inc.php:

Code Select Expand


                        $pic_title=$lang_display_thumbnails['filename'].$row['filename']."<br />".
                                $lang_display_thumbnails['filesize'].($row['filesize'] >> 10).$lang_byte_units[1]."<br />".
                                $lang_display_thumbnails['dimensions'].$row['pwidth']."x".$row['pheight']."<br />".
                                $lang_display_thumbnails['date_added'].localised_date($row['ctime'], $album_date_fmt);


And replace that with:

Code Select Expand


                        $pic_title = get_pic_popup($row);


Now we need to make one small change again in functions.inc.php:

Look for:

Code Select Expand


        if ($limit2 == 1) {
            $select_columns = '*';
        } else {
            $select_columns = 'pid, filepath, filename, url_prefix, filesize, pwidth, pheight, ctime, aid, title';
        }


And replace with:

Code Select Expand


        $select_columns = '*';


Then you will have it all working. 

[RatKing]

One last thing in the new function change the following:

Code Select Expand


    $pic_rating = $lang_display_thumbnails['pic_rating'].$pic_row['pic_rating']."<br />";


to:

Code Select Expand


    $pic_rating = $lang_display_thumbnails['pic_rating'].round($pic_row['pic_rating']/2000)."<br />";


Or the vores will look well stragne...... 

[NevilleX]

Thank you! It was much harder then I thougth. I couldn't do it myself. 
I got one problem now. In the Last comments section caption doesn't show comment, instead it shows this text - 01/01/70 at 00:00.
Take a look, please: http://neville.x05host.com

[Rodinou]

I use another script for popup infos ... about 5ko ...

http://www.sortons.net/test-nucleus.html : see Last Articles, and mouse over the links ... more graphics than Overlib, and very quick to install. However Overlib was for me for years THE reference. But with time ... dhtml has progressed

[Joachim Müller]

OMG, please don't post another DHTML rant

[RatKing]

NevilleX - You are right   I see that same problem and I have a solution for it as well.

Remember where we did this:

Now we need to make one small change again in functions.inc.php:

Look for:

Code Select Expand


        if ($limit2 == 1) {
            $select_columns = '*';
        } else {
            $select_columns = 'pid, filepath, filename, url_prefix, filesize, pwidth, pheight, ctime, aid, title';
        }


And replace with:

Code Select Expand


        $select_columns = '*';


Then you will have it all working. 

Well that is where we went wrong move that $select_columns = '*'; a little lower and the issue is solved. See below for an example of how this should look.

Code Select Expand


        $limit = ($limit1 != -1) ? ' LIMIT '. $limit1 : '';
        $limit .= ($limit2 != -1) ? ' ,'. $limit2 : '';

        if ($limit2 == 1) {
            $select_columns = '*';
        } else {
            $select_columns = 'pid, filepath, filename, url_prefix, filesize, pwidth, pheight, ctime, aid, title';
        }
        // Keyword
        if (!empty($CURRENT_ALBUM_KEYWORD)){
                $keyword = "OR keywords like '%$CURRENT_ALBUM_KEYWORD%'";
        } else $keyword = '';

        // Regular albums
        if ((is_numeric($album))) {
                $select_columns = '*';
                $album_name_keyword = get_album_name($album);
                $album_name = $album_name_keyword['title'];
                $album_keyword = $album_name_keyword['keyword'];


Sorry for that one it seems I missed that in testing it.  :-\\

[NevilleX]

Thank you RatKing! 
This is working great!

[Rodinou]

Hummmm ... I'll test your php code on my script ... why ? I have downloaded the recent version of overlib and ... the script is 50 KO !!!! Imagine a "simple popup info" = 50 ko ?!

[Joachim Müller]

the js get's cached of course