DHTML tooltip mod (display enlarged images as tooltip)

[rrwwxx]

Hi together,

This is my own DHTML mod for cpg 1.4 that I have recently developed. I want to explain here the steps necessary to use it for yourself. The following few posts are an English translation of the posts I did in the German part of this forum.

The Idea

Well, there was another topic about Image description popups and Firefox... (<- here) that i found when I was looking for a mod concerning Tooltips. That mod used a library named overLib.

But I had used this other brilliant Javascript library from Walter Zorn (<- click).

A cross-browser JavaScript to create tooltips (popup information boxes over HTML elements). The appearance and behaviour of these tooltips can be customized in multiple ways (color, border, shadow, balloon style, fadein/out etc.). The tooltips may contain plain text as well as HTML, for instance images etc.

And I wanted to include this DHTML Trick in my own and future Coppermine Galleries. You can watch the result on this site.

The basic principle of this script is quite simple:

1. By using this line in the main template the library can be included similar to overLib on all pages:

Code Select Expand

<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>

The potential of this little function collection (32 kB) is - similar to overlib - amazing.

2. By adding a short code sequence to all thumbnail links the onmouseover tooltip effect can become active. See this example code:

Before:

Code Select Expand

<a href="thumbnails.php?album=2" class="albums"><img src="albums/Fotos1/thumb_g3.JPG" class="image" width="50" height="34" border="0" alt="g3.JPG" /><br /></a>

After:

Code Select Expand

<a onMouseOver="Tip('<div align=\'center\'><img src=\'albums/Fotos1/thumb_g3.JPG\'> </div>')" href="thumbnails.php?album=2" class="albums">
<img src="albums/Fotos1/thumb_g3.JPG" class="image" width="50" height="34" border="0" alt="g3.JPG" /><br /></a>

That's all! A short onMouseOver="Tip('<div align=\'center\'><img src=\'albums/Fotos1/thumb_g3.JPG\'> </div>')" is enough to include an enlarged view on the thumbnails on the Index page when the mouse hovers over the pics.

For the thumbnails page your tooltip can either display the enlarged image again - like shown in this example - or alternatively just show a text box with the image details - like it was done in this topic Image description popups and Firefox... 2 years ago with the overlib library. There is still an example you can watch in Ratking's Gallerie here.

I had in favor to create the last displayimage page in a way to have these details shown at the mousepointer. See my own implementation here.

(Continued)

[rrwwxx]

Safety First!

You should backup your own files before you start to implement this in your own gallery. These are the files which will be changed:

• index.php
• displayimage.php
• include/functions.inc.php
• themes/your template/template.html
• themes/your template/theme.php

You have to copy wz_tooltip.js into the root of the gallery. Everything about this javascript library can be retrieved here. One of your admins here, Gau Gau, already said in reply to my earlier German topic that this library comes along with the LGPL (GNU Lesser General Public License) and could possibly be included in a future version of cpg, when the devs might add it as an option to choose in the admin settings.
You can download the library on the named site but I will also add the version I use in the zip file added to the code shown below in the last post of my tutorial here. The zip file also includes all these code fragments.


What you need to do

I did understand meanwhile not to make any changes to include/themes.inc.php, but instead copy the apropriate function out of this file to modify only themes/your template/themes.php. That's what I believe at least but it was inevitable to me to include some changes to include/functions.inc.php, index.php and displayimage.php as well as themes/your template/template.html.

Changes to template.html

The simpliest part surely is the inclusion of the library in themes/your template/template.html favourably at the end before </body>:

Code Select Expand

<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>

Changes to functions.inc.php

Like Ratking described it two years ago you need to modify the following parts in function display_thumbnails of functions.inc.php look (at around line 1696):

Search:

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


replace with:

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_title2=str_replace("\n","<br />",$pic_title);
                        $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];
                        }
                       
                        $onmouse="Tip('<div align=\\'center\\'><img src=\\'".$pic_url."\\' height=\\'".$row['pheight']."\\' width=\\'".$row['width']."\\'> </div>')";
                        $onmousetxt="Tip('$pic_title2')"; // sp„ter mehr Infos, z.B. Bewertungen')
                       
                        $image_size = compute_img_size($row['pwidth'], $row['pheight'], $CONFIG['thumb_width']);
                        $onmouse2="Tip('<div align=\\'center\\'><img src=\\'".str_replace("thumb_","",$pic_url)."\\' height=\\'".$row['pheight']."\\' width=\\'".$row['pwidth']."\\'> </div>')";
                     
                        $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'];
                        $thumb_list[$i]['onmouse1'] = $onmouse;
                        $thumb_list[$i]['onmouse2'] = $onmousetxt;
                        $thumb_list[$i]['onmouse3'] = $onmouse2;


(Continued)

[rrwwxx]

By now we have the additional onmouse instructions in an array at the relevant code locations.
Not much will happen through these changes alone, but it contains a central part for an optional adaption what you want to see when showing the thumbnails page. The settings listed above lead to a big display of the picture on the mouse pointer as a tooltip when watching the thumb of an image on this page. If you rather want to have details as a text box as a tooltip, you need the change the following code in the last line:
Instead using
$thumb_list[$i]['onmouse3'] = $onmouse2;
you have to put this:
$thumb_list[$i]['onmouse3'] = $onmousetxt;.
 

There is one more function to change in this functions.inc.php, look for function display_film_strip:
Search:

Code Select Expand

          return theme_display_film_strip($thumb_list, $thumb_count, $album_name, $album, $cat, $pos, is_numeric($album));

Put this two lines above just before the brace:

Code Select Expand

          $thumb_list[$i]['pic_url'] = $pic_url;

Changes to themes.php

Now we come to the mere processing and display of these new fields. This can all be done in your own themes.php.
I first copied the declarations of the related html sections from include/themes.inc.php to themes/your template/themes.php. At first copy $template_thumbnail_view:

Code Select Expand

$template_thumbnail_view = <<<EOT

<!-- BEGIN header -->
        <tr>
<!-- END header -->
<!-- BEGIN thumb_cell -->
        <td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">
                <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                                <td align="center">
                                        <a href="{LINK_TGT}">{THUMB}<br /></a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>
                        </tr>
                </table>
        </td>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="top" class="thumbnails" align="center">&nbsp;</td>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
        </tr>
        <tr>
<!-- END row_separator -->
<!-- BEGIN footer -->
        </tr>
<!-- END footer -->
<!-- BEGIN tabs -->
        <tr>
                <td colspan="{THUMB_COLS}" style="padding: 0px;">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                       {TABS}
                                </tr>
                        </table>
                </td>
        </tr>
<!-- END tabs -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;

Just insert the code above at the end of your themes/your template/themes.php
In this code section you only need to extend the line containing the <a href - link with a new keyword (ON_MOUSE):

Search for

Code Select Expand

  <a href="<a {LINK_TGT}">{THUMB}<br /></a>

and replace it in a way that in the end you get this:

Code Select Expand

  <a onMouseOver="{ON_MOUSE}" href="{LINK_TGT}">{THUMB}<br /></a>

The next section you need to copy from include/themes.inc.php into  themes/your template/themes.php is named $template_album_list:

Code Select Expand

$template_album_list = <<<EOT

<!-- BEGIN stat_row -->
        <tr>
                <td colspan="{COLUMNS}" class="tableh1" align="center"><span class="statlink">{STATISTICS}</span></td>
        </tr>
<!-- END stat_row -->
<!-- BEGIN header -->
        <tr class="tableb_compact">
<!-- END header -->
<!-- BEGIN album_cell -->
        <td width="{COL_WIDTH}%" valign="top">
        <table width="100%" cellspacing="0" cellpadding="0">
        <tr>
                <td colspan="3" height="1" align="left" valign="top" class="tableh2">
                        <span class="alblink"><a href="{ALB_LINK_TGT}"><b>{ALBUM_TITLE}</b></a></span>
                </td>
        </tr>
        <tr>
                <td colspan="3">
                        <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
                </td>
        </tr>
        <tr>
                <td align="center" valign="middle" class="thumbnails">
                        <img src="images/spacer.gif" width="{THUMB_CELL_WIDTH}" height="1" class="image" style="margin-top: 0px; margin-bottom: 0px; border: none;" alt="" /><br />
                        <a onMouseOver="{ON_MOUSE}" href="{ALB_LINK_TGT}" class="albums">{ALB_LINK_PIC}<br /></a>
                </td>
                <td>
                        <img src="images/spacer.gif" width="1" height="1" border="0" alt="" />
                </td>
                <td width="100%" valign="top" align="left" class="tableb_compact">
                        {ADMIN_MENU}
                        <p>{ALB_DESC}</p>
                        <p class="album_stat">{ALB_INFOS}</p>
                </td>
        </tr>
        </table>
        </td>
<!-- END album_cell -->
<!-- BEGIN empty_cell -->
        <td width="{COL_WIDTH}%" valign="top">
        <table width="100%" cellspacing="0" cellpadding="0">
        <tr>
                <td height="1" valign="top" class="tableh2">
                        <b>&nbsp;</b>
                </td>
        </tr>
        <tr>
                <td>
                        <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
                </td>
        </tr>
        <tr>
                <td width="100%" valign="top" class="tableb_compact">
                    <div class="thumbnails" style="background-color:transparent"><img src="images/spacer.gif" width="1" height="{SPACER}" border="0" class="image" style="border:0;margin-top:1px;margin-bottom:0" alt="" /></div>
                </td>
        </tr>
        </table>
        </td>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
        </tr>
        <tr class="tableb_compact">
<!-- END row_separator -->
<!-- BEGIN footer -->
        </tr>
<!-- END footer -->
<!-- BEGIN tabs -->
        <tr>
                <td colspan="{COLUMNS}" style="padding: 0px;">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                       {TABS}
                                </tr>
                        </table>
                </td>
        </tr>
<!-- END tabs -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;

In the code shown above I have included the new code into the relevant lines. You can easily spot the changed code because it contains onMouseOver="{ON_MOUSE}"

The third measure with the same procedure is $template_film_strip, and in the code below the part containing onMouseOver="{ON_MOUSE}" is already included:

Code Select Expand

$template_film_strip = <<<EOT

        <tr>
         <td valign="top" style="background-image: url({TILE1});"><img src="{TILE1}" alt="" border="0" /></td>
        </tr>
        <tr>
        <td valign="bottom" class="thumbnails" align="center">
          <table width="100%" cellspacing="0" cellpadding="3" border="0">
              <tr>
                 <td width="50%"></td>
                 {THUMB_STRIP}
                 <td width="50%"></td>
              </tr>
          </table>
        </td>
        </tr>
        <tr>
         <td valign="top" style="background-image: url({TILE2});"><img src="{TILE2}" alt="" border="0" /></td>
        </tr>
<!-- BEGIN thumb_cell -->
                <td valign="top" align="center">
                                        <a onMouseOver="{ON_MOUSE}" href="{LINK_TGT}">{THUMB}</a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                </td>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="top" align="center" >&nbsp;</td>
<!-- END empty_cell -->

EOT;
 

(Continued)

[rrwwxx]

Next I copied the function theme_display_thumbnails from/include/themes.inc.php and I stayed with the original code but only changed some parts of it on the end:

Code Select Expand

function theme_display_thumbnails(&$thumb_list, $nbThumb, $album_name, $aid, $cat, $page, $total_pages, $sort_options, $display_tabs, $mode = 'thumb')
{
    global $CONFIG;
    global $template_thumb_view_title_row,$template_fav_thumb_view_title_row, $lang_thumb_view, $template_tab_display, $template_thumbnail_view, $lang_album_list;

    static $header = '';
    static $thumb_cell = '';
    static $empty_cell = '';
    static $row_separator = '';
    static $footer = '';
    static $tabs = '';
    static $spacer = '';

    if ($header == '') {
        $thumb_cell = template_extract_block($template_thumbnail_view, 'thumb_cell');
        $tabs = template_extract_block($template_thumbnail_view, 'tabs');
        $header = template_extract_block($template_thumbnail_view, 'header');
        $empty_cell = template_extract_block($template_thumbnail_view, 'empty_cell');
        $row_separator = template_extract_block($template_thumbnail_view, 'row_separator');
        $footer = template_extract_block($template_thumbnail_view, 'footer');
        $spacer = template_extract_block($template_thumbnail_view, 'spacer');
    }

    $cat_link = is_numeric($aid) ? '' : '&cat=' . $cat;
    $uid_link = (isset($_GET['uid']) && is_numeric($_GET['uid'])) ? '&uid=' . $_GET['uid'] : '';

    $theme_thumb_tab_tmpl = $template_tab_display;

    if ($mode == 'thumb') {
        $theme_thumb_tab_tmpl['left_text'] = strtr($theme_thumb_tab_tmpl['left_text'], array('{LEFT_TEXT}' => $aid == 'lastalb' ? $lang_album_list['album_on_page'] : $lang_thumb_view['pic_on_page']));
        $theme_thumb_tab_tmpl['inactive_tab'] = strtr($theme_thumb_tab_tmpl['inactive_tab'], array('{LINK}' => 'thumbnails.php?album=' . $aid . $cat_link . $uid_link . '&page=%d'));
        $theme_thumb_tab_tmpl['inactive_next_tab'] = strtr($theme_thumb_tab_tmpl['inactive_next_tab'], array('{LINK}' => 'thumbnails.php?album=' . $aid . $cat_link . $uid_link . '&page=%d'));
        $theme_thumb_tab_tmpl['inactive_prev_tab'] = strtr($theme_thumb_tab_tmpl['inactive_prev_tab'], array('{LINK}' => 'thumbnails.php?album=' . $aid . $cat_link . $uid_link . '&page=%d'));
    } else {
        $theme_thumb_tab_tmpl['left_text'] = strtr($theme_thumb_tab_tmpl['left_text'], array('{LEFT_TEXT}' => $lang_thumb_view['user_on_page']));
        $theme_thumb_tab_tmpl['inactive_tab'] = strtr($theme_thumb_tab_tmpl['inactive_tab'], array('{LINK}' => 'index.php?cat=' . $cat . '&page=%d'));
        $theme_thumb_tab_tmpl['inactive_next_tab'] = strtr($theme_thumb_tab_tmpl['inactive_next_tab'], array('{LINK}' => 'index.php?cat=' . $cat . '&page=%d'));
        $theme_thumb_tab_tmpl['inactive_prev_tab'] = strtr($theme_thumb_tab_tmpl['inactive_prev_tab'], array('{LINK}' => 'index.php?cat=' . $cat . '&page=%d'));
    }

    $thumbcols = $CONFIG['thumbcols'];
    $cell_width = ceil(100 / $CONFIG['thumbcols']) . '%';

    $tabs_html = $display_tabs ? create_tabs($nbThumb, $page, $total_pages, $theme_thumb_tab_tmpl) : '';
    // The sort order options are not available for meta albums
    if ($sort_options) {
        $param = array('{ALBUM_NAME}' => $album_name,
            '{AID}' => $aid,
            '{PAGE}' => $page,
            '{NAME}' => $lang_thumb_view['name'],
            '{TITLE}' => $lang_thumb_view['title'],
            '{DATE}' => $lang_thumb_view['date'],
            '{SORT_TA}' => $lang_thumb_view['sort_ta'],
            '{SORT_TD}' => $lang_thumb_view['sort_td'],
            '{SORT_NA}' => $lang_thumb_view['sort_na'],
            '{SORT_ND}' => $lang_thumb_view['sort_nd'],
            '{SORT_DA}' => $lang_thumb_view['sort_da'],
            '{SORT_DD}' => $lang_thumb_view['sort_dd'],
            '{POSITION}' => $lang_thumb_view['position'],
            '{SORT_PA}' => $lang_thumb_view['sort_pa'],
            '{SORT_PD}' => $lang_thumb_view['sort_pd'],
            );
        $title = template_eval($template_thumb_view_title_row, $param);
    } else if ($aid == 'favpics' && $CONFIG['enable_zipdownload'] == 1) { //Lots of stuff can be added here later
       $param = array('{ALBUM_NAME}' => $album_name,
                             '{DOWNLOAD_ZIP}'=>$lang_thumb_view['download_zip']
                               );
       $title = template_eval($template_fav_thumb_view_title_row, $param);
    }else{
        $title = $album_name;
    }


    if ($mode == 'thumb') {
        starttable('100%', $title, $thumbcols);
    } else {
        starttable('100%');
    }

    echo $header;

    $i = 0;
    foreach($thumb_list as $thumb) {
        $i++;
        if ($mode == 'thumb') {
            if ($aid == 'lastalb') {
                $params = array('{CELL_WIDTH}' => $cell_width,
                    '{LINK_TGT}' => "thumbnails.php?album={$thumb['aid']}",
                    '{THUMB}' => $thumb['image'],
                    '{CAPTION}' => $thumb['caption'],
                    '{ADMIN_MENU}' => $thumb['admin_menu']
                    );
            } else {
                $params = array('{CELL_WIDTH}' => $cell_width,
                    '{LINK_TGT}' => "displayimage.php?album=$aid$cat_link&pos={$thumb['pos']}$uid_link",
                    '{THUMB}' => $thumb['image'],
                    '{CAPTION}' => $thumb['caption'],
                    '{ADMIN_MENU}' => $thumb['admin_menu']
                    );
            }
        } else {
            $params = array('{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}' => "index.php?cat={$thumb['cat']}",
                '{THUMB}' => $thumb['image'],
                '{CAPTION}' => $thumb['caption'],
                '{ADMIN_MENU}' => ''
                );
        }
        echo template_eval($thumb_cell, $params);

        if ((($i % $thumbcols) == 0) && ($i < count($thumb_list))) {
            echo $row_separator;
        }
    }
    for (;($i % $thumbcols); $i++) {
        echo $empty_cell;
    }
    echo $footer;

    if ($display_tabs) {
        $params = array('{THUMB_COLS}' => $thumbcols,
            '{TABS}' => $tabs_html
            );
        echo template_eval($tabs, $params);
    }

    endtable();
    echo $spacer;
}

In the code above I only changed the last but one section:

Code Select Expand

  if ($mode == 'thumb') {
            if ($aid == 'lastalb') {
                $params = array('{CELL_WIDTH}' => $cell_width,
                    '{LINK_TGT}' => "thumbnails.php?album={$thumb['aid']}",
                    '{THUMB}' => $thumb['image'],
                    '{CAPTION}' => $thumb['caption'],
                    '{ADMIN_MENU}' => $thumb['admin_menu'],
                    '{ON_MOUSE}' => $thumb['onmouse1']
                    );
            } else {
                $params = array('{CELL_WIDTH}' => $cell_width,
                    '{LINK_TGT}' => "displayimage.php?album=$aid$cat_link&pos={$thumb['pos']}$uid_link",
                    '{THUMB}' => $thumb['image'],
                    '{CAPTION}' => $thumb['caption'],
                    '{ADMIN_MENU}' => $thumb['admin_menu'],
                    '{ON_MOUSE}' => $thumb['onmouse3']
                    );
            }
        } else {
            $params = array('{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}' => "index.php?cat={$thumb['cat']}",
                '{THUMB}' => $thumb['image'],
                '{CAPTION}' => $thumb['caption'],
                '{ADMIN_MENU}' => '',
                '{ON_MOUSE}' => $thumb['onmouse1']
                );
        }
        echo template_eval($thumb_cell, $params);
       

(Continued)

[rrwwxx]

The other functions needed to be copied from /include/themes.inc.php into themes/your template/themes.php are
function theme_display_film_strip,
theme_display_album_list and
theme_html_picture.
In the code below the necessary changes are already included.         

Code Select Expand

function theme_display_film_strip(&$thumb_list, $nbThumb, $album_name, $aid, $cat, $pos, $sort_options, $mode = 'thumb')
{
    global $CONFIG, $THEME_DIR;
    global $template_film_strip, $lang_film_strip;

    static $template = '';
    static $thumb_cell = '';
    static $empty_cell = '';
    static $spacer = '';

    if ((!$template)) {
        $template = $template_film_strip;
        $thumb_cell = template_extract_block($template, 'thumb_cell');
        $empty_cell = template_extract_block($template, 'empty_cell');
    }

    $cat_link = is_numeric($aid) ? '' : '&cat=' . $cat;

    $thumbcols = $CONFIG['thumbcols'];
    $cell_width = ceil(100 / $CONFIG['max_film_strip_items']) . '%';

    $i = 0;
    $thumb_strip = '';
    foreach($thumb_list as $thumb) {

        $new_size = 65;
        preg_match('/(?<=width=")[0-9]*/',$thumb['image'],$matches,PREG_OFFSET_CAPTURE);
        $srcWidth=$matches[0][0];
        preg_match('/(?<=height=")[0-9]*/',$thumb['image'],$matches,PREG_OFFSET_CAPTURE);
        $srcHeight=$matches[0][0];
        $ratio = max($srcWidth, $srcHeight) / $new_size;
        $ratio = max($ratio, 1.0);
        $destWidth = (int)($srcWidth / $ratio);
        $destHeight = (int)($srcHeight / $ratio);
        $thumb['image']=preg_replace('/width="[^"]*"/','width="'.$destWidth.'"',$thumb['image']);
        $thumb['image']=preg_replace('/height="[^"]*"/','height="'.$destHeight.'"',$thumb['image']);
        $thumb['onmouse1']="Tip('<div align=\\'center\\'><img src=\\'".$thumb['pic_url']."\\' height=\\'".$srcHeight."\\' width=\\'".$srcWidth."\\'> </div>')";
        $i++;
        if ($mode == 'thumb') {
            $params = array('{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}' => "displayimage.php?album=$aid$cat_link&amp;pos={$thumb['pos']}",
                '{THUMB}' => $thumb['image'],
                '{CAPTION}' => $thumb['caption'],
                '{ADMIN_MENU}' => '',
                '{ON_MOUSE}' => $thumb['onmouse1']
                );
        } else {
            $params = array('{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}' => "index.php?cat={$thumb['cat']}",
                '{THUMB}' => $thumb['image'],
                '{CAPTION}' => '',
                '{ADMIN_MENU}' => '',
                '{ON_MOUSE}' => $thumb['onmouse1']
                );
        }
        $thumb_strip .= template_eval($thumb_cell, $params);
    }

    if (defined('THEME_HAS_FILM_STRIP_GRAPHICS')) {
        $tile1 = $THEME_DIR . 'images/tile1.gif';
        $tile2 = $THEME_DIR . 'images/tile2.gif';
    } elseif (defined('THEME_HAS_FILM_STRIP_GRAPHIC')) {
        $tile1=$tile2=$THEME_DIR . 'images/tile.gif';
    } else {
        $tile1=$tile2= 'images/tile.gif';
    }

    $params = array('{THUMB_STRIP}' => $thumb_strip,
        '{COLS}' => $i,
        '{TILE1}' => $tile1,
        '{TILE2}' => $tile2,
        );

    ob_start();
    starttable($CONFIG['picture_table_width']);
    echo template_eval($template, $params);
    endtable();
    $film_strip = ob_get_contents();
    ob_end_clean();

    return $film_strip;
}

function theme_display_album_list(&$alb_list, $nbAlb, $cat, $page, $total_pages)
{

    global $CONFIG, $STATS_IN_ALB_LIST, $statistics, $template_tab_display, $template_album_list, $lang_album_list;

    $theme_alb_list_tab_tmpl = $template_tab_display;

    $theme_alb_list_tab_tmpl['left_text'] = strtr($theme_alb_list_tab_tmpl['left_text'], array('{LEFT_TEXT}' => $lang_album_list['album_on_page']));
    $theme_alb_list_tab_tmpl['inactive_tab'] = strtr($theme_alb_list_tab_tmpl['inactive_tab'], array('{LINK}' => 'index.php?cat=' . $cat . '&amp;page=%d'));
    $theme_alb_list_tab_tmpl['inactive_next_tab'] = strtr($theme_alb_list_tab_tmpl['inactive_next_tab'], array('{LINK}' => 'index.php?cat=' . $cat . '&amp;page=%d'));
    $theme_alb_list_tab_tmpl['inactive_prev_tab'] = strtr($theme_alb_list_tab_tmpl['inactive_prev_tab'], array('{LINK}' => 'index.php?cat=' . $cat . '&amp;page=%d'));

    $tabs = create_tabs($nbAlb, $page, $total_pages, $theme_alb_list_tab_tmpl);

    $album_cell = template_extract_block($template_album_list, 'album_cell');
    $empty_cell = template_extract_block($template_album_list, 'empty_cell');
    $tabs_row = template_extract_block($template_album_list, 'tabs');
    $stat_row = template_extract_block($template_album_list, 'stat_row');
    $spacer = template_extract_block($template_album_list, 'spacer');
    $header = template_extract_block($template_album_list, 'header');
    $footer = template_extract_block($template_album_list, 'footer');
    $rows_separator = template_extract_block($template_album_list, 'row_separator');

    $count = 0;

    $columns = $CONFIG['album_list_cols'];
    $column_width = ceil(100 / $columns);
    $thumb_cell_width = $CONFIG['alb_list_thumb_size'] + 2;

    starttable('100%');

    if ($STATS_IN_ALB_LIST) {
        $params = array('{STATISTICS}' => $statistics,
            '{COLUMNS}' => $columns,
            );
        echo template_eval($stat_row, $params);
    }

    echo $header;

    if (is_array($alb_list)) {
        foreach($alb_list as $album) {
            $count ++;

            $params = array('{COL_WIDTH}' => $column_width,
                '{ALBUM_TITLE}' => $album['album_title'],
                '{THUMB_CELL_WIDTH}' => $thumb_cell_width,
                '{ALB_LINK_TGT}' => "thumbnails.php?album={$album['aid']}",
                '{ALB_LINK_PIC}' => $album['thumb_pic'],
                '{ADMIN_MENU}' => $album['album_adm_menu'],
                '{ALB_DESC}' => $album['album_desc'],
                '{ALB_INFOS}' => $album['album_info'],
                '{ON_MOUSE}' => $album['onmouse'],
                );

            echo template_eval($album_cell, $params);

            if ($count % $columns == 0 && $count < count($alb_list)) {
                echo $rows_separator;
            }
        }
    }

    $params = array('{COL_WIDTH}' => $column_width,
          '{SPACER}' => $thumb_cell_width
          );
    $empty_cell = template_eval($empty_cell, $params);

    while ($count++ % $columns != 0) {
        echo $empty_cell;
    }

    echo $footer;
    // Tab display
    $params = array('{COLUMNS}' => $columns,
        '{TABS}' => $tabs,
        );
    echo template_eval($tabs_row, $params);

    endtable();

    echo $spacer;
}
function theme_html_picture()
{
    global $CONFIG, $CURRENT_PIC_DATA, $CURRENT_ALBUM_DATA, $USER;
    global $album, $comment_date_fmt, $template_display_media;
    global $lang_display_image_php, $lang_picinfo, $lang_display_thumbnails;

    $pid = $CURRENT_PIC_DATA['pid'];
    $pic_title = '';

    if (!isset($USER['liv']) || !is_array($USER['liv'])) {
        $USER['liv'] = array();
    }
    // Add 1 to hit counter
    if (!USER_IS_ADMIN && !in_array($pid, $USER['liv']) && isset($_COOKIE[$CONFIG['cookie_name'] . '_data'])) {
        add_hit($pid);
        if (count($USER['liv']) > 4) array_shift($USER['liv']);
        array_push($USER['liv'], $pid);
    }

    if($CONFIG['thumb_use']=='ht' && $CURRENT_PIC_DATA['pheight'] > $CONFIG['picture_width'] ){ // The wierd comparision is because only picture_width is stored
      $condition = true;
    }elseif($CONFIG['thumb_use']=='wd' && $CURRENT_PIC_DATA['pwidth'] > $CONFIG['picture_width']){
      $condition = true;
    }elseif($CONFIG['thumb_use']=='any' && max($CURRENT_PIC_DATA['pwidth'], $CURRENT_PIC_DATA['pheight']) > $CONFIG['picture_width']){
      $condition = true;
    }else{
     $condition = false;
    }

    if ($CURRENT_PIC_DATA['title'] != '') {
        $pic_title .= $CURRENT_PIC_DATA['title'] . "\n";
    }
    if ($CURRENT_PIC_DATA['caption'] != '') {
        $pic_title .= $CURRENT_PIC_DATA['caption'] . "\n";
    }
    if ($CURRENT_PIC_DATA['keywords'] != '') {
        $pic_title .= $lang_picinfo['Keywords'] . ": " . $CURRENT_PIC_DATA['keywords'];
    }

    if (!$CURRENT_PIC_DATA['title'] && !$CURRENT_PIC_DATA['caption']) {
        template_extract_block($template_display_media, 'img_desc');
    } else {
        if (!$CURRENT_PIC_DATA['title']) {
            template_extract_block($template_display_media, 'title');
        }
        if (!$CURRENT_PIC_DATA['caption']) {
            template_extract_block($template_display_media, 'caption');
        }
    }

    $CURRENT_PIC_DATA['menu'] = html_picture_menu(); //((USER_ADMIN_MODE && $CURRENT_ALBUM_DATA['category'] == FIRST_USER_CAT + USER_ID) || ($CONFIG['users_can_edit_pics'] && $CURRENT_PIC_DATA['owner_id'] == USER_ID && USER_ID != 0) || GALLERY_ADMIN_MODE) ? html_picture_menu($pid) : '';

    if ($CONFIG['make_intermediate'] && $condition ) {
        $picture_url = get_pic_url($CURRENT_PIC_DATA, 'normal');
    } else {
        $picture_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
    }

    $image_size = compute_img_size($CURRENT_PIC_DATA['pwidth'], $CURRENT_PIC_DATA['pheight'], $CONFIG['picture_width']);

    $pic_title = '';
    $mime_content = cpg_get_type($CURRENT_PIC_DATA['filename']);


    if ($mime_content['content']=='movie' || $mime_content['content']=='audio') {

        if ($CURRENT_PIC_DATA['pwidth']==0 || $CURRENT_PIC_DATA['pheight']==0) {
            $CURRENT_PIC_DATA['pwidth']  = 320; // Default width

            // Set default height; if file is a movie
            if ($mime_content['content']=='movie') {
                $CURRENT_PIC_DATA['pheight'] = 240; // Default height
            }
        }

        $ctrl_offset['mov']=15;
        $ctrl_offset['wmv']=45;
        $ctrl_offset['swf']=0;
        $ctrl_offset['rm']=0;
        $ctrl_offset_default=45;
        $ctrl_height = (isset($ctrl_offset[$mime_content['extension']]))?($ctrl_offset[$mime_content['extension']]):$ctrl_offset_default;
        $image_size['whole']='width="'.$CURRENT_PIC_DATA['pwidth'].'" height="'.($CURRENT_PIC_DATA['pheight']+$ctrl_height).'"';
    }

    if ($mime_content['content']=='image') {
   
        $pic_title3 =$lang_display_thumbnails['filename'].$CURRENT_PIC_DATA['filename']."\n".
        $lang_display_thumbnails['filesize'].($CURRENT_PIC_DATA['filesize'] >> 10).$lang_byte_units[1]." kB\n".
        $lang_display_thumbnails['dimensions'].$CURRENT_PIC_DATA['pwidth']."x".$CURRENT_PIC_DATA['pheight']." Pixel";
   //     .$lang_display_thumbnails['date_added'].localised_date($CURRENT_PIC_DATA['ctime'], $album_date_fmt);
  $pic_title2=str_replace("\n","<br />",$pic_title3);

        $onmousetxt="Tip('$pic_title2')";  // später mehr Infos, z.B. Bewertungen
   
        if (isset($image_size['reduced'])) {
        $onmousetxt="Tip('$pic_title2"."<br /><br />".$lang_display_image_php['view_fs']."')";
            $winsizeX = $CURRENT_PIC_DATA['pwidth']+5;  //the +'s are the mysterious FF and IE paddings
            $winsizeY = $CURRENT_PIC_DATA['pheight']+3; //the +'s are the mysterious FF and IE paddings
            $pic_html = "<a onmouseover=\"" . $onmousetxt . "\" href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&amp;fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=no,status=no,resizable=yes,width=$winsizeX,height=$winsizeY')\">";
            $pic_title = $lang_display_image_php['view_fs'] . "\n==============\n" . $pic_title;
            $pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
            $pic_html .= "</a>\n";
        } else {
            $pic_html = "<img onmouseover=\"" . $onmousetxt . "\" src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><br />\n";
        }
    } elseif ($mime_content['content']=='document') {
        $pic_thumb_url = get_pic_url($CURRENT_PIC_DATA,'thumb');
        $pic_html = "<a href=\"{$picture_url}\" target=\"_blank\" class=\"document_link\"><img src=\"".$pic_thumb_url."\" border=\"0\" class=\"image\" /></a>\n<br />";
    } else {
        $autostart = ($CONFIG['media_autostart']) ? ('true'):('false');

        $players['WMP'] = array('id' => 'MediaPlayer',
                                'clsid' => 'classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" ',
                                'codebase' => 'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" ',
                                'mime' => 'type="application/x-mplayer2" ',
                               );
        $players['RMP'] = array('id' => 'RealPlayer',
                                'clsid' => 'classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" ',
                                'codebase' => '',
                                'mime' => 'type="audio/x-pn-realaudio-plugin" '
                               );
        $players['QT']  = array('id' => 'QuickTime',
                                'clsid' => 'classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" ',
                                'codebase' => 'codebase="http://www.apple.com/qtactivex/qtplugin.cab" ',
                                'mime' => 'type="video/x-quicktime" '
                               );
        $players['SWF'] = array('id' => 'SWFlash',
                                'clsid' => ' classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ',
                                'codebase' => 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" ',
                                'mime' => 'type="application/x-shockwave-flash" '
                               );
        $players['UNK'] = array('id' => 'DefaultPlayer',
                                'clsid' => '',
                                'codebase' => '',
                                'mime' => ''
                               );

        if (isset($_COOKIE[$CONFIG['cookie_name'].'_'.$mime_content['extension'].'player'])) {
            $user_player = $_COOKIE[$CONFIG['cookie_name'].'_'.$mime_content['extension'].'player'];
        } else {
            $user_player = $mime_content['player'];
        }

                // There isn't a player selected or user wants client-side control
        if (!$user_player) {
            $user_player = 'UNK';
        }

        $player = $players[$user_player];

        $pic_html  = '<object id="'.$player['id'].'" '.$player['clsid'].$player['codebase'].$player['mime'].$image_size['whole'].'>';
        $pic_html .= "<param name=\"autostart\" value=\"$autostart\" /><param name=\"src\" value=\"". $picture_url . "\" />";
        $pic_html .= '<embed '.$image_size['whole'].' src="'. $picture_url . '" autostart="'.$autostart.'" '.$player['mime'].'></embed>';
        $pic_html .= "</object><br />\n";
    }

    $CURRENT_PIC_DATA['html'] = $pic_html;
    $CURRENT_PIC_DATA['header'] = '';
    $CURRENT_PIC_DATA['footer'] = '';

    $CURRENT_PIC_DATA = CPGPluginAPI::filter('file_data',$CURRENT_PIC_DATA);

    $params = array('{CELL_HEIGHT}' => '100',
        '{IMAGE}' => $CURRENT_PIC_DATA['header'].$CURRENT_PIC_DATA['html'].$CURRENT_PIC_DATA['footer'],
        '{ADMIN_MENU}' => $CURRENT_PIC_DATA['menu'],
        '{TITLE}' => bb_decode($CURRENT_PIC_DATA['title']),
        '{CAPTION}' => bb_decode($CURRENT_PIC_DATA['caption']),
        );

    return template_eval($template_display_media, $params);
}


The last function mentioned in the code above named theme_html_picture is only referring to changes necessary for displaying a text block as a tooltip on the displayimage.php page. If you manually change the code by comparing the differences you have to take care not to forget the declaration of variables at the beginning of function theme_html_picture - the variable $lang_display_thumbnails should also be declared.

Most changes at the original code are easy to recognise because they only deal with everything around the command containing onmouse.

(Continued)

[rrwwxx]

Changes to displayimage.php
After a little thinking, modelling and messing around with the code I also found out how to include the desired additional information to display the extended properties of an image in the tooltip on the displayimage.php page. 

Add the following line at the beginning of html_picinfo :

Code Select Expand

    global $mypicinfo;

And this is how the last lines of the function html_picinfo should look like:

Code Select Expand

  if ($CURRENT_PIC_DATA['votes'] > 0) {
      $mypicinfo['votes']=$CURRENT_PIC_DATA['votes'];
      $mypicinfo['rating']=(string)round($CURRENT_PIC_DATA['pic_rating'] / 2000);
     }
  $mypicinfo['disp']=$info[$lang_picinfo['Displayed']];
  $mypicinfo['date']=$info[$lang_picinfo['Date Added']];
  $mypicinfo['album']=  str_replace( array('&', '"', '<', '>', ' ', "'"),array('&amp;', '&quot;', '&lt;', '&gt;', '&nbsp;', '&#39;'), $CURRENT_ALBUM_DATA['title']);
 
    /**
     * Filter file information
     */
    $info = CPGPluginAPI::filter('file_info',$info);

    return theme_html_picinfo($info);


Final changes to theme.php

In your theme.php you have to add some things to the earlier mentioned function theme_html_picture().
At first declare the addional variable $mypicinfo:

Code Select Expand

function theme_html_picture()
{
    global $CONFIG, $CURRENT_PIC_DATA, $CURRENT_ALBUM_DATA, $USER;
    global $album, $comment_date_fmt, $template_display_media;
    global $lang_display_image_php, $lang_picinfo, $lang_display_thumbnails;
    global $mypicinfo;

Then look a little more down for 

Code Select Expand

if ($mime_content['content']=='image') {

And change the first declaration with the following code:

Code Select Expand

    if ($mime_content['content']=='image') {

        $pic_title3 = $lang_picinfo['Album name']." : ". $mypicinfo['album']."\n".
         $lang_display_thumbnails['filename'].$CURRENT_PIC_DATA['filename']."\n".
        $lang_display_thumbnails['filesize'].($CURRENT_PIC_DATA['filesize'] >> 10).$lang_byte_units[1]." kB\n".
        $lang_display_thumbnails['dimensions'].$CURRENT_PIC_DATA['pwidth']."x".$CURRENT_PIC_DATA['pheight']." Pixel\n".
        $lang_picinfo['Date Added']." : ".  $mypicinfo['date']."\n".
        $lang_picinfo['Displayed']." : ". $mypicinfo['disp']."\n";
        if ($mypicinfo['votes'] != "") {
              $pic_title3.=  sprintf($lang_picinfo['Rating'], $mypicinfo['votes'])." : ".
               str_repeat("*",(int)$mypicinfo['rating']);
            }

Then continue with 

Code Select Expand

$pic_title2=str_replace("\n","<br />",$pic_title3);

This string will be included into the onmouseover event. Example:
Tip('Name of Album : Cine&nbsp;Star&nbsp;27.06-30.06.2007<br />Filename : c30.JPG<br />Filesize : 41 kB<br />Dimensions : 615x410 Pixels<br />Added on  : July 10, 2007<br />Viewed 7 times<br />Review (1 vote) : *****')

You need to put this final change on displayimage.php too.
These lines need to be swapped in order:
Before:

Code Select Expand

    $picture = theme_html_picture();
    $votes = theme_html_rating_box();
    $pic_info = html_picinfo();

After:

Code Select Expand

    $pic_info = html_picinfo();
    $picture = theme_html_picture();
    $votes = theme_html_rating_box();


It works - like you can see -> here <- as an example.

cu,
Roli
°¿°

[rrwwxx]

Optional changes to menu tooltips

If you optionally want to replace the ordinary existing mousepointer tooltips on your menu items in order to get the same style & effect as with the DHTML tooltips applied through the modifications above you need to look in themes.inc.php for this section:

Code Select Expand


  // HTML template for template sys_menu buttons
  if (!isset($template_sys_menu_button))  //{THEMES}
  $template_sys_menu_button = <<<EOT
  <!-- BEGIN {BLOCK_ID} -->
        <a href="{HREF_TGT}" title="{HREF_TITLE}">{HREF_LNK}</a> {SPACER}
  <!-- END {BLOCK_ID} -->
EOT;


Copy it in the following way into themes.php on the end:

Code Select Expand

  // HTML template for template sys_menu buttons

  $template_sys_menu_button = <<<EOT
  <!-- BEGIN {BLOCK_ID} -->
        <a href="{HREF_TGT}" onmouseover="Tip('{HREF_TITLE}')">{HREF_LNK}</a> {SPACER}
  <!-- END {BLOCK_ID} -->
EOT;

Ingenious and simple. Simply ingenious

This modification is also included in my zip file attached in the post above.

By the way, in this gallery of my friends which I used as an example above I also included graphic images to replace the text menu style in order to have the same design as the rest of the site navigation buttons. It wasn't that difficult to replace them as images, (just have a closer look into your lang/yourlanguage.php definitons to get that going), but it was harder to get that rollover effect in the menu buttons to work in a perfect way like I wanted it (eg the appropriate button indicating the section is being displayed in a different style). But that is a completely different issue and doesn't really belong into this thread. If you really want to know more about it I may describe that method in a different topic.

I also modified that gallery with the Flash mod Image Scroller - based on iTunes that is being described here.

I haven't tried this DHTML tooltip mod with an English language settings yet, but I believe there isn't something that harms this issue - it should work in any language.

Good luck and have fun and success when trying it on your own gallery!
cu,
Roli
°¿°

[Gephri]

This sounds very tempting - but the link to (or) the demo site is not working (http://www.hair-factory10.de/xg/thumbnails.php?album=7).
Can you point us to a working example...?

[rrwwxx]

It surely does work. Perhaps the site was just temporarily unavailable? The host seems to have some problems sometimes, not very reliable really (but cheap!).
cu,
Roli
°¿°

[Gephri]

still cant get demo site to open - anyone else using this that can show its coolest features?

[rrwwxx]

It should work on this url as I told you via pm too. There are pure html version files of this mod here, here and here but these act as demo files only and are not showing the final implementation.

The LightBox JS for Fullsize Popup Image mod  from here is a really awesome script and pretty easy to integrate once you find the right version to add in all of those posts of that thread. I was a little confused at first and needed to check a while until I got the things working as expected.

I am using two other visual effects on my gallery, the wonderful Image Scroller - based on iTunes just for a random list of pictures and my own development DHTML tooltip mod   from this thread, to display enlarged images as tooltips at the mouse pointer. Besides I also did another modification with the text style menu links into image buttons showing an rollover-effect.

There was no problem integrating it with the solution described in reply#73 on page 4 of this thread. So I uploaded that scripts subfolder in the root of my gallery as attached to this post leading to /scripts/slideshow (it already contains the modified js/lightbox.js).

Additionally I added these three lines to the head section of my template.html in the subdirectory /themes/yourownthemes/ .

Code Select Expand


<script type="text/javascript" src="scripts/slideshow/js/prototype.js"></script>
<script type="text/javascript" src="scripts/slideshow/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="scripts/slideshow/js/lightbox_s.js"></script>

In the original thread I was also advised to search in include/functions.inc.php for

Code Select Expand

$query = "SELECT $select_columns FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' $META_ALBUM_SET ORDER BY RAND() LIMIT $limit2";

and change it to

Code Select Expand

$query = "SELECT $select_columns FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' $META_ALBUM_SET ORDER BY RAND() $limit";

Finally I had to modify theme.php in the same subfolder. But there is a minor change to the implementation described in the Lightbox thread because I wanted to keep the onmouseover-Text as before if a click on the image would result in the bigger display showing that Lightbox effect.

The modified function theme_html_picture would finally look like this:

Code Select Expand


function theme_html_picture()
{
    global $CONFIG, $CURRENT_PIC_DATA, $CURRENT_ALBUM_DATA, $USER;
    global $album, $comment_date_fmt, $template_display_media;
    global $lang_display_image_php, $lang_picinfo, $lang_display_thumbnails;
    global $mypicinfo;
    $pid = $CURRENT_PIC_DATA['pid'];
    $pic_title = '';
    if (!isset($USER['liv']) || !is_array($USER['liv'])) {
        $USER['liv'] = array();
    }
    // Add 1 to hit counter
    if (!USER_IS_ADMIN && !in_array($pid, $USER['liv']) && isset($_COOKIE[$CONFIG['cookie_name'] . '_data'])) {
        add_hit($pid);
        if (count($USER['liv']) > 4) array_shift($USER['liv']);
        array_push($USER['liv'], $pid);
    }

    if($CONFIG['thumb_use']=='ht' && $CURRENT_PIC_DATA['pheight'] > $CONFIG['picture_width'] ){ // The wierd comparision is because only picture_width is stored
      $condition = true;
    }elseif($CONFIG['thumb_use']=='wd' && $CURRENT_PIC_DATA['pwidth'] > $CONFIG['picture_width']){
      $condition = true;
    }elseif($CONFIG['thumb_use']=='any' && max($CURRENT_PIC_DATA['pwidth'], $CURRENT_PIC_DATA['pheight']) > $CONFIG['picture_width']){
      $condition = true;
    }else{
     $condition = false;
    }

    if ($CURRENT_PIC_DATA['title'] != '') {
        $pic_title .= $CURRENT_PIC_DATA['title'] . "\n";
    }
    if ($CURRENT_PIC_DATA['caption'] != '') {
        $pic_title .= $CURRENT_PIC_DATA['caption'] . "\n";
    }
    if ($CURRENT_PIC_DATA['keywords'] != '') {
        $pic_title .= $lang_picinfo['Keywords'] . ": " . $CURRENT_PIC_DATA['keywords'];
    }

    if (!$CURRENT_PIC_DATA['title'] && !$CURRENT_PIC_DATA['caption']) {
        template_extract_block($template_display_media, 'img_desc');
    } else {
        if (!$CURRENT_PIC_DATA['title']) {
            template_extract_block($template_display_media, 'title');
        }
        if (!$CURRENT_PIC_DATA['caption']) {
            template_extract_block($template_display_media, 'caption');
        }
    }

    $CURRENT_PIC_DATA['menu'] = html_picture_menu(); //((USER_ADMIN_MODE && $CURRENT_ALBUM_DATA['category'] == FIRST_USER_CAT + USER_ID) || ($CONFIG['users_can_edit_pics'] && $CURRENT_PIC_DATA['owner_id'] == USER_ID && USER_ID != 0) || GALLERY_ADMIN_MODE) ? html_picture_menu($pid) : '';

    if ($CONFIG['make_intermediate'] && $condition ) {
        $picture_url = get_pic_url($CURRENT_PIC_DATA, 'normal');
    } else {
        $picture_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
    }

    $image_size = compute_img_size($CURRENT_PIC_DATA['pwidth'], $CURRENT_PIC_DATA['pheight'], $CONFIG['picture_width']);

    $pic_title = '';
    $mime_content = cpg_get_type($CURRENT_PIC_DATA['filename']);


    if ($mime_content['content']=='movie' || $mime_content['content']=='audio') {

        if ($CURRENT_PIC_DATA['pwidth']==0 || $CURRENT_PIC_DATA['pheight']==0) {
            $CURRENT_PIC_DATA['pwidth']  = 320; // Default width

            // Set default height; if file is a movie
            if ($mime_content['content']=='movie') {
                $CURRENT_PIC_DATA['pheight'] = 240; // Default height
            }
        }

        $ctrl_offset['mov']=15;
        $ctrl_offset['wmv']=45;
        $ctrl_offset['swf']=0;
        $ctrl_offset['rm']=0;
        $ctrl_offset_default=45;
        $ctrl_height = (isset($ctrl_offset[$mime_content['extension']]))?($ctrl_offset[$mime_content['extension']]):$ctrl_offset_default;
        $image_size['whole']='width="'.$CURRENT_PIC_DATA['pwidth'].'" height="'.($CURRENT_PIC_DATA['pheight']+$ctrl_height).'"';
    }

    if ($mime_content['content']=='image') {
       $pic_title3 = $lang_picinfo['Album name']." : ". $mypicinfo['album']."\n".
        $lang_display_thumbnails['filename'].$CURRENT_PIC_DATA['filename']."\n".
        $lang_display_thumbnails['filesize'].($CURRENT_PIC_DATA['filesize'] >> 10).$lang_byte_units[1]." kB\n".
        $lang_display_thumbnails['dimensions'].$CURRENT_PIC_DATA['pwidth']."x".$CURRENT_PIC_DATA['pheight']." Pixel\n".
        $lang_picinfo['Date Added']." : ".  $mypicinfo['date']."\n".
        $lang_picinfo['Displayed']." : ". $mypicinfo['disp']."\n";
        if ($mypicinfo['votes'] != "") {
              $pic_title3.=  sprintf($lang_picinfo['Rating'], $mypicinfo['votes'])." : ". //.$mypicinfo['rating']."/5";
               str_repeat("*",(int)$mypicinfo['rating']);
               $pic_title3=str_replace("(1 Stimmen","(1 Stimme",$pic_title3);
               $pic_title3=str_replace("(1 Votes","(1 Vote",$pic_title3);
               
            }
$pic_title2=str_replace("\n","<br />",$pic_title3);

        $onmousetxt="Tip('$pic_title2')";  // sp,,ter mehr Infos, z.B. Bewertungen
   
        if (isset($image_size['reduced'])) {
        $onmousetxt="Tip('$pic_title2"."<br /><br />".$lang_display_image_php['view_fs']."')";
// First part of lightbox update
//            $winsizeX = $CURRENT_PIC_DATA['pwidth']+5;  //the +'s are the mysterious FF and IE paddings
//            $winsizeY = $CURRENT_PIC_DATA['pheight']+3; //the +'s are the mysterious FF and IE paddings
//            $pic_html = "<a onmouseover=\"" . $onmousetxt . "\" href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&amp;fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=no,status=no,resizable=yes,width=$winsizeX,height=$winsizeY')\">";
            $pic1_html = "onmouseover=\"" . $onmousetxt . "\" ";
            $pic_html = lightbox_list($CURRENT_PIC_DATA['pid'],$pic1_html);
            $pic_title = $lang_display_image_php['view_fs'] . "\n==============\n" . $pic_title;
//            $pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
//            $pic_html .= "</a>\n";
// End of first part of lightbox update

        } else {
            $pic_html = "<img onmouseover=\"" . $onmousetxt . "\" src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><br />\n";
        }
    } elseif ($mime_content['content']=='document') {
        $pic_thumb_url = get_pic_url($CURRENT_PIC_DATA,'thumb');
        $pic_html = "<a href=\"{$picture_url}\" target=\"_blank\" class=\"document_link\"><img src=\"".$pic_thumb_url."\" border=\"0\" class=\"image\" /></a>\n<br />";
    } else {
        $autostart = ($CONFIG['media_autostart']) ? ('true'):('false');

        $players['WMP'] = array('id' => 'MediaPlayer',
                                'clsid' => 'classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" ',
                                'codebase' => 'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" ',
                                'mime' => 'type="application/x-mplayer2" ',
                               );
        $players['RMP'] = array('id' => 'RealPlayer',
                                'clsid' => 'classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" ',
                                'codebase' => '',
                                'mime' => 'type="audio/x-pn-realaudio-plugin" '
                               );
        $players['QT']  = array('id' => 'QuickTime',
                                'clsid' => 'classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" ',
                                'codebase' => 'codebase="http://www.apple.com/qtactivex/qtplugin.cab" ',
                                'mime' => 'type="video/x-quicktime" '
                               );
        $players['SWF'] = array('id' => 'SWFlash',
                                'clsid' => ' classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ',
                                'codebase' => 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" ',
                                'mime' => 'type="application/x-shockwave-flash" '
                               );
        $players['UNK'] = array('id' => 'DefaultPlayer',
                                'clsid' => '',
                                'codebase' => '',
                                'mime' => ''
                               );

        if (isset($_COOKIE[$CONFIG['cookie_name'].'_'.$mime_content['extension'].'player'])) {
            $user_player = $_COOKIE[$CONFIG['cookie_name'].'_'.$mime_content['extension'].'player'];
        } else {
            $user_player = $mime_content['player'];
        }

                // There isn't a player selected or user wants client-side control
        if (!$user_player) {
            $user_player = 'UNK';
        }

        $player = $players[$user_player];

        $pic_html  = '<object id="'.$player['id'].'" '.$player['clsid'].$player['codebase'].$player['mime'].$image_size['whole'].'>';
        $pic_html .= "<param name=\"autostart\" value=\"$autostart\" /><param name=\"src\" value=\"". $picture_url . "\" />";
        $pic_html .= '<embed '.$image_size['whole'].' src="'. $picture_url . '" autostart="'.$autostart.'" '.$player['mime'].'></embed>';
        $pic_html .= "</object><br />\n";
    }

    $CURRENT_PIC_DATA['html'] = $pic_html;
    $CURRENT_PIC_DATA['header'] = '';
    $CURRENT_PIC_DATA['footer'] = '';

    $CURRENT_PIC_DATA = CPGPluginAPI::filter('file_data',$CURRENT_PIC_DATA);

    $params = array('{CELL_HEIGHT}' => '100',
        '{IMAGE}' => $CURRENT_PIC_DATA['header'].$CURRENT_PIC_DATA['html'].$CURRENT_PIC_DATA['footer'],
        '{ADMIN_MENU}' => $CURRENT_PIC_DATA['menu'],
        '{TITLE}' => bb_decode($CURRENT_PIC_DATA['title']),
        '{CAPTION}' => bb_decode($CURRENT_PIC_DATA['caption']),
        );

    return template_eval($template_display_media, $params);
}

Note that in the referring section there are now quite a few lines commented out, spot the part starting with // First part of lightbox update

And in the end you will addionally need the below function named lightbox_list in the same file themes.php too. It is slightly adapted for this mod from here.

Code Select Expand

//Second part of lightbox update

function lightbox_list($picId,$pic1_html) {
    global $lang_display_image_php, $CONFIG;

$i = 0;
$pid = $picId;
$pic_data = get_pic_data($_GET['album'], $pic_count, $album_name, -1, -1, false);
foreach ($pic_data as $picture) {
if($CONFIG['thumb_use']=='ht' && $picture['pheight'] > $CONFIG['picture_width'] ){
  $condition = true;
}elseif($CONFIG['thumb_use']=='wd' && $picture['pwidth'] > $CONFIG['picture_width']){
  $condition = true;
}elseif($CONFIG['thumb_use']=='any' && max($picture['pwidth'], $picture['pheight']) > $CONFIG['picture_width']){
  $condition = true;
}else{
$condition = false;
}
if (is_image($picture['filename'])) {
if ($CONFIG['make_intermediate'] && $condition ) {
$picture_url = get_pic_url($picture, 'normal');
} else {
$picture_url = get_pic_url($picture, 'normal');
}
$picture_url_fullsize = get_pic_url($picture, 'fullsize');
$pic_title = ($picture['title'] ? $picture['title'] : strtr(preg_replace("/(.+)\..*?\Z/", "\\1", htmlspecialchars($picture['filename'])), "_", " "));
if ($picture['pid'] == $pid) {
$picList .= "<a ".$pic1_html."href=\"$picture_url_fullsize\" rel=\"lightbox[list]\" title=\"$pic_title\">";
            $picList .= "<img src=\"$picture_url\" class=\"image\" border=\"0\" alt=\"$lang_display_image_php[view_fs]\" /><br />";
            $picList .= "</a>\n";
}else{
$picList .= "<a href=\"$picture_url_fullsize\" rel=\"lightbox[list]\" title=\"$pic_title\"></a>\n";
}
$i++;
}
}
return $picList;
}//End of second part


This will add the onmouseover functionality showing details about the image together with a seperated line 'click to enlarge'.
A working example can be seen here.
cu,
Roli
°¿°

[rrwwxx]

It didn't accept the attachment in my last post, so here it is now. It's a zip file below 500 kB and not containing the song.mp3 which isn't used (yet?) anyway.
cu,
Roli
°¿°