Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1] 2   Go Down

Author Topic: Image description popups and Firefox...  (Read 30828 times)

0 Members and 1 Guest are viewing this topic.

ZPrime

  • Coppermine newbie
  • Offline Offline
  • Posts: 2
Image description popups and Firefox...
« on: June 08, 2005, 07:34:01 am »

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.
« Last Edit: July 29, 2005, 08:42:55 am by GauGau »
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: Image description popups and Firefox...
« Reply #1 on: June 08, 2005, 07:50:24 am »

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.
Logged

ZPrime

  • Coppermine newbie
  • Offline Offline
  • Posts: 2
Re: Image description popups and Firefox...
« Reply #2 on: June 08, 2005, 08:32:46 am »

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...
Logged

Tranz

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Gender: Female
  • Posts: 6149
Re: Image description popups and Firefox...
« Reply #3 on: June 08, 2005, 08:47:01 am »

...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. :D
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: Image description popups and Firefox...
« Reply #4 on: June 08, 2005, 09:55:46 am »

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

RatKing

  • Contributor
  • Coppermine regular visitor
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 85
    • Personal website
Re: Image description popups and Firefox...
« Reply #5 on: July 28, 2005, 11:02:10 am »

 ;D

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]
<script type="text/javascript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>And the body of that same template file:
Code: [Select]
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
The in functions.inc.php look fot the follwoing code:
Code: [Select]
                        $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]
                        $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
Logged

NevilleX

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 34
    • SeGoodies
Re: Image description popups and Firefox...
« Reply #6 on: July 31, 2005, 10:17:01 pm »

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]
                        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

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 346
  • Tournicoti, Tournicota
    • http://www.sortons.net
Re: Image description popups and Firefox...
« Reply #7 on: August 01, 2005, 05:48:33 am »

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

  • Contributor
  • Coppermine regular visitor
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 85
    • Personal website
Re: Image description popups and Firefox...
« Reply #8 on: August 01, 2005, 10:15:20 am »

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....  :-\\
Logged

RatKing

  • Contributor
  • Coppermine regular visitor
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 85
    • Personal website
Re: Image description popups and Firefox...
« Reply #9 on: August 01, 2005, 10:17:26 am »

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)
Logged

RatKing

  • Contributor
  • Coppermine regular visitor
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 85
    • Personal website
Re: Image description popups and Firefox...
« Reply #10 on: August 01, 2005, 11:31:16 am »

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]
                        $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]
                        $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.
Logged

RatKing

  • Contributor
  • Coppermine regular visitor
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 85
    • Personal website
Re: Image description popups and Firefox...
« Reply #11 on: August 01, 2005, 12:27:04 pm »

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]
$lang_display_thumbnails = array(
  'filename'   => 'Filename : ',
  'filesize'   => 'Filesize : ',
  'dimensions' => 'Dimensions : ',
  'date_added' => 'Date added : ', //cpg1.3.0
);
Change to:
Code: [Select]
$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]
// 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]
                        $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]
                        $pic_title = get_pic_popup($row);

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

Look for:
Code: [Select]
        if ($limit2 == 1) {
            $select_columns = '*';
        } else {
            $select_columns = 'pid, filepath, filename, url_prefix, filesize, pwidth, pheight, ctime, aid, title';
        }

And replace with:
Code: [Select]
        $select_columns = '*';

Then you will have it all working.  :)
Logged

RatKing

  • Contributor
  • Coppermine regular visitor
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 85
    • Personal website
Re: Image description popups and Firefox...
« Reply #12 on: August 01, 2005, 12:36:02 pm »

One last thing in the new function change the following:
Code: [Select]
    $pic_rating = $lang_display_thumbnails['pic_rating'].$pic_row['pic_rating']."<br />";

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

Or the vores will look well stragne......  ::)
Logged

NevilleX

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 34
    • SeGoodies
Re: Image description popups and Firefox...
« Reply #13 on: August 01, 2005, 08:44:43 pm »

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

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 346
  • Tournicoti, Tournicota
    • http://www.sortons.net
Re: Image description popups and Firefox...
« Reply #14 on: August 02, 2005, 12:21:28 am »

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

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: Image description popups and Firefox...
« Reply #15 on: August 02, 2005, 09:34:25 am »

OMG, please don't post another DHTML rant ;)
Logged

RatKing

  • Contributor
  • Coppermine regular visitor
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 85
    • Personal website
Re: Image description popups and Firefox...
« Reply #16 on: August 02, 2005, 11:10:09 am »

NevilleX - You are right :o  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]
        if ($limit2 == 1) {
            $select_columns = '*';
        } else {
            $select_columns = 'pid, filepath, filename, url_prefix, filesize, pwidth, pheight, ctime, aid, title';
        }

And replace with:
Code: [Select]
        $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]
        $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.  :-\\
Logged

NevilleX

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 34
    • SeGoodies
Re: Image description popups and Firefox...
« Reply #17 on: August 02, 2005, 01:01:22 pm »

Thank you RatKing!  :D :D :D
This is working great!

Rodinou

  • Contributor
  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 346
  • Tournicoti, Tournicota
    • http://www.sortons.net
Re: Image description popups and Firefox...
« Reply #18 on: August 03, 2005, 12:17:22 pm »

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

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: Image description popups and Firefox...
« Reply #19 on: August 04, 2005, 09:51:07 pm »

the js get's cached of course  ::)
Logged
Pages: [1] 2   Go Up
 

Page created in 0.033 seconds with 20 queries.