Vorstellung eines eigenen DHTML Tooltip Mod

[rrwwxx]

Hallo,

da die Admins (und die meisten fleissigeren Leute hier im Forum) sowieso Deutschsprachig sind und ich mit diesem Thread erst den Mod vorstellen und auf Anregungen von anderen eingehen möchte, schreibe ich halt erstmal in diesem Bereich des Forums in meiner Muttersprache, weil das auch für mich am flüssigsten geht.

Wenn der Mod dann irgendwann mal reif zum Präsentieren (und von der Community 'abgesegnet') ist, publiziere ich die dazugehörigen Instruktionen gern auch in Englisch. Aber zur Fertigstellung des Mods brauche ich wohl noch etwas Hilfe, auch wenn ich mich bei einem Großteil der Aufgabe schon allein durchkämpfen konnte.

Vorstellung der Idee

Nun, es gab schon vor 2 Jahren ein ähnliches Thema hier: Image description popups and Firefox... , das ich fand, als ich nach einem Mod bezüglich Tooltips suchte. Damals wurde overLib eingesetzt. Ich habe auf mehreren anderen Seiten aber schon diese geniale andere Javascript-Bibliothek von Walter Zorn verwendet.

Cross-Browser JavaScript für Tooltips (Informations-Boxen am Mauszeiger) über HTML-Elementen. Sehr einfache Verwendung, keine Programmierkenntnisse erforderlich. Die Gestaltung der Tooltips (Farbe, Schrift, Rand, Schatten usw.) kann an eigene Wünsche angepasst werden. Einfacher Text ist als Inhalt ebenso möglich wie HTML einschließlich Bildern etc.

Und diesen DHTML Trick wollte ich nun gern auch in meine bestehende und zukünftige Coppermine Gallerien einbauen. Dabei natürlich auch Gutes für mein Karma tun und den Mod hier vorstellen.

Wie das ganze aussehen wird, wenn man die unten stehenden Schritte korrekt nachvollzieht, kann man sich in dieser Gallerie (<- click) anschauen.

(Fortsetzung im nächsten Beitrag)

[rrwwxx]

Das Prinzip dieses Scripts ist sehr simpel:

1. Durch eine einfache Verwendung der folgenden Zeile im Haupt-Template wäre die Bibliothek ähnlich wie bei overLib auf allen Seiten eingebunden:

Code Select Expand

<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>
Das Potential dieser kleinen Funktionssammlung (32 kB) ist - wieder ähnlich wie bei overLib - unglaublich. Mehr darüber kann man auf der Autoren-Seite nachlesen.

2. Durch Hinzufügen einer kurzen Code-Sequenz bei allen Thumbnail-Links kann der Onmouseover-Tooltip-Effekt wirksam werden. Beispielcode:

Vorher:

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>

Nachher:

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>

Das ist alles!

Ein kurzes

onMouseOver="Tip('<div align=\'center\'><img src=\'albums/Fotos1/thumb_g3.JPG\'> </div>')"

genügt also, um die vergrößerte Thumbnail-Ansicht auf der Indexseite bei Mouseover zu sehen. Selbstverständlich kann man auch einfach einen Text im gewünschten Stil zur Anzeige bringen, Beispiel:

onMouseOver="Tip('zurück zur Startseite')".

(Fortsetzung im nächsten Beitrag)

[rrwwxx]

Für die Thumbnails-Seite kann man entweder - wie auf dieser Seite von mir gezeigt - sogleich die komplette große Grafik am Mauszeiger anzeigen, oder alternativ nur die Bild-Details und z.B. die Bewertung als Text anzeigen - wie es auch schon im Thema Image description popups and Firefox... vor 2 Jahren mit der overLib-Bibliothek gemacht wurde. Ein Beispiel dafür gibt es immer noch in Ratking's Galerie hier zu sehen.

Ich selbst würde bevorzugen, den Mod so zu gestalten, dass erst auf der displayimage.php-Seite diese Bilddetails am Mauszeiger eingeblendet werden. Siehe das Beispiel aus meiner eigenen Galerie hier. Hier liegt auch noch eines meiner beiden Optimierungsprobleme - ich hätte gern weitere Informationen am Mauszeiger eingeblendet. Doch dazu am Ende mehr.

Safety First!

Bevor man anfängt, dies in seiner eigenen Galerie zu verwenden, sollte man ein Backup der Dateien machen. Ich veränderte für diesen Mod aber bisher nur diese Dateien:

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

Die wz_tooltip.js muß ich ins Root meiner Gallery kopieren. Alles zu dieser Javascript-Bibliothek erfährt man hier. Ich hänge aber meine Version, die in den Konfigurationseinstellungen mit den Farben etc. angepasst ist, in den Anhang dieses Beitrags. Im Zip finden sich auch die unten gezeigten Code-Auszüge als Textdateien.

(Fortsetzung im nächsten Beitrag)

[rrwwxx]

Änderungen an template.html

Der einfachste Part war sicher das schon oben erwähnte Einbauen der Bibliothek in das themes/your template/template.html am Ende vor </body>:

Code Select Expand

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

Änderungen an functions.inc.php

Verstanden habe ich inzwischen auch, dass ich keine Änderungen an include/themes.inc.php machen soll, sondern mir die entsprechende Funktion aus dieser Datei rauskopieren kann, um sie in themes/your template/themes.php zu modifizieren. Das glaube ich zumindest, doch Änderungen an include/functions.inc.php und index.php waren für mich jedoch bisher unvermeidbar. Vielleicht weiß jemand eine Möglichkeit des Ausgliederns dieser nötigen Modifikationen.

Zunächst muß man - ähnlich wie es Ratking vor 2 Jahren beschrieben hat, die folgenden Modifikationen an function display_thumbnails in functions.inc.php look (bei ungefähr Zeile 1696) vornehmen:

Suche:

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


und Ersetzen mit:

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;


(Fortsetzung im nächsten Beitrag)

[rrwwxx]

Somit habe ich die zusätzlichen onMouse-Anweisungen an dieser Stelle schonmal mit ins Array geschrieben.
Mit dieser Änderung allein passiert noch nicht viel, aber sie enthält eine zentrale Stelle zur optionalen Anpassung, was man am Mauszeiger sehen möchte, wenn man auf der thumbnails.php - Seite ist. Die obige Einstellung führt zu einer Ansicht der großen Anzeige des Bildes am Mauszeiger, auf dessen Thumb man gerade zeigt. Möchte man hier auch lieber nur die Detail-Eigenschaften als Text nachlesen, muss man in der letzten Zeile statt
$thumb_list[$i]['onmouse3'] = $onmouse2;
dies hinsetzen:
$thumb_list[$i]['onmouse3'] = $onmousetxt;.
 
Jetzt muß das erweiterte Array nur noch in den template_eval()-Funktionen des Strings mit ersetzt werden, wo es zur Anzeige kommt.
Bevor wir das tun, wollen wir aber noch die anderen Stellen in dieser Datei abändern, deren Funktionen für die onmouseover-Anzeige der Thumbnails genutzt werden. Und da wäre nur noch die function display_film_strip.

Suche:

Code Select Expand

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

Setze zwei Zeilen darüber (vor der geschweiften Klammer):

Code Select Expand

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

Änderungen an themes.php

Nun aber zur eigentlichen Auswertung und Anzeige dieser neuen Felder. Dies geschieht alles in der eigenen themes.php.
Ich kopierte somit zunächst die Deklarationen der betreffenden Strings aus include/themes.inc.php nach themes/your template/themes.php. Als erstes $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;

Hier muß eigentlich nur die Zeile mit dem <a href - Link durch ein neues Keyword (ON_MOUSE) erweitert werden:

Suche also nach

Code Select Expand

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

und setze es so ein, dass hinterher dieses dort steht:

Code Select Expand

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

Der nächste String, der aus include/themes.inc.php nach themes/your template/themes.php kopiert werden muß, lautet $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;

Hier habe ich im obigen Code schon gleich die entsprechende Stelle mit eingesetzt, die geändert werden muß: onMouseOver="{ON_MOUSE}"

Als drittes gibt es nach demselben Verfahren $template_film_strip, auch hier im Folgenden ist onMouseOver="{ON_MOUSE}" schon eingearbeitet:

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;
 

(Fortsetzung im nächsten Beitrag)

[rrwwxx]

Als nächstes kopierte ich mir die Funktion theme_display_thumbnails aus /include/themes.inc.php heraus, ich beließ die Originalfunktion drin und nur dieser Codeblock wurde in meine angepaßte themes/your template/themes.php übernommen, um danach angepaßt zu werden:

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 diesem Code habe ich nur den vorletzten Abschnitt geändert:

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

(Fortsetzung im nächsten Beitrag)

[rrwwxx]

Die nächsten Funktionen, die aus /include/themes.inc.php kopiert und in themes/your template/themes.php angepasst werden müssen, lauten
function theme_display_film_strip,
theme_display_album_list und
theme_html_picture.
Im folgenden Code sind die Anpassungen schon drin.         

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);
}


Die hier zuletzt aufgeführte Funktion theme_html_picture im code bezieht sich auf die Änderungen für die Ansicht des Textinhalts am Mauszeiger auf der displayimage.php-Seite. Beachten sollte man bei manueller Änderung des Codes durch Vergleich der Unterschiede, dass bei der Variablen-Definition am Anfang von function theme_html_picture die Deklaration von $lang_display_thumbnails nicht vergessen wird.

Die meisten Änderungen im Originalcode der Funktionen sind leicht wiederzuerkennen, weil sie mit den Behandlung rings um onmouse zu tun haben.

(Fortsetzung im nächsten Beitrag)

[rrwwxx]

Änderungen an index.php

Die letzte Modifikation muss man an index.php vornehmen:
Suche in der Funktion list_albums die Zeile:

Code Select Expand

        // Inserts a thumbnail if the album contains 1 or more images       

und ersetze diese Zeile sowie den Rest bis zum Ende der Funktion mit diesem Code:               

Code Select Expand

          // Inserts a thumbnail if the album contains 1 or more images
        $visibility = $alb_thumb['visibility'];
        $onmouse="";
                if (!in_array($aid,$FORBIDDEN_SET_DATA) || $CONFIG['allow_private_albums'] == 0) {
            if ($count > 0) {
                if ($alb_thumb['filename']) {
                    $picture = &$alb_thumb;
                } else {
                    $sql = "SELECT filepath, filename, url_prefix, pwidth, pheight " . "FROM {$CONFIG['TABLE_PICTURES']} " . "WHERE pid='{$alb_stat['last_pid']}'";
                    $result = cpg_db_query($sql);
                    $picture = mysql_fetch_array($result);
                    mysql_free_result($result);
                }
                $pic_url = get_pic_url($picture, 'thumb');
                if (!is_image($picture['filename'])) {
                    $image_info = getimagesize(urldecode($pic_url));
                    $picture['pwidth'] = $image_info[0];
                    $picture['pheight'] = $image_info[1];
                }
               
        $new_size = 120;
        $srcWidth= $picture['pwidth'];
        $srcHeight=$picture['pheight'];
        $ratio = max($srcWidth, $srcHeight) / $new_size;
        $ratio = max($ratio, 1.0);
        $destWidth = (int)($srcWidth / $ratio);
        $destHeight = (int)($srcHeight / $ratio);
               
                $onmouse = "Tip('<div align=\\'center\\'><img src=\\'".$pic_url."\\' height=\\'".$destHeight."\\' width=\\'".$destWidth."\\'> </div>')";
                $image_size = compute_img_size($picture['pwidth'], $picture['pheight'], $CONFIG['alb_list_thumb_size']);
                $alb_list[$alb_idx]['thumb_pic'] = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$picture['filename']}\" />";
            } else { // Inserts an empty thumbnail if the album contains 0 images
                // $image_size = compute_img_size(100, 75, $CONFIG['alb_list_thumb_size']);
                $cpg_nopic_data = cpg_get_system_thumb('nopic.jpg', $alb_thumb['category']);
                $alb_list[$alb_idx]['thumb_pic'] = '<img src="' . $cpg_nopic_data['thumb'] . '" ' . $cpg_nopic_data['whole'] . ' class="image" border="0" alt="" />';
            }
        } elseif ($CONFIG['show_private']) {
            // $image_size = compute_img_size(100, 75, $CONFIG['alb_list_thumb_size']);
            $cpg_privatepic_data = cpg_get_system_thumb('private.jpg', $alb_thumb['category']);
            $alb_list[$alb_idx]['thumb_pic'] = '<img src="' . $cpg_privatepic_data['thumb'] . '" ' . $cpg_privatepic_data['whole'] . ' class="image" border="0" alt="" />';
        }
        // Prepare everything
        if (!in_array($aid,$FORBIDDEN_SET_DATA) || $CONFIG['allow_private_albums'] == 0) {
            $last_upload_date = $count ? localised_date($alb_stat['last_upload'], $lastup_date_fmt) : '';
            $link_pic_count = !empty($alb_stat['link_pic_count']) ? $alb_stat['link_pic_count'] : 0;
            $alb_list[$alb_idx]['aid'] = $alb_thumb['aid'];
            $alb_list[$alb_idx]['album_title'] = $alb_thumb['title'];
            $alb_list[$alb_idx]['album_desc'] = bb_decode($alb_thumb['description']);
            $alb_list[$alb_idx]['pic_count'] = $count;
            $alb_list[$alb_idx]['last_upl'] = $last_upload_date;
            $alb_list[$alb_idx]['link_pic_count'] = $link_pic_count;
            $alb_list[$alb_idx]['onmouse'] = $onmouse;
            $alb_list[$alb_idx]['album_info'] = sprintf($lang_list_albums['n_pictures'], $count) . ($count ? sprintf($lang_list_albums['last_added'], $last_upload_date) : "") . (($CONFIG['link_pic_count'] && $link_pic_count > 0 ) ? sprintf(", {$lang_list_albums['n_link_pictures']},  {$lang_list_albums['total_pictures']}", $link_pic_count, $count + $link_pic_count) : "");
            $alb_list[$alb_idx]['album_adm_menu'] = (GALLERY_ADMIN_MODE || (USER_ADMIN_MODE && $cat == USER_ID + FIRST_USER_CAT)) ? html_albummenu($alb_thumb['aid']) : ' ';
        } elseif ($CONFIG['show_private']) { // uncomment this else block to show private album description
            $last_upload_date = $count ? localised_date($alb_stat['last_upload'], $lastup_date_fmt) : '';
            $link_pic_count = !empty($alb_stat['link_pic_count']) ? $alb_stat['link_pic_count'] : 0;
            $alb_list[$alb_idx]['aid'] = $alb_thumb['aid'];
            $alb_list[$alb_idx]['album_title'] = $alb_thumb['title'];
            $alb_list[$alb_idx]['album_desc'] = bb_decode($alb_thumb['description']);
            $alb_list[$alb_idx]['pic_count'] = $count;
            $alb_list[$alb_idx]['last_upl'] = $last_upload_date;
            $alb_list[$alb_idx]['link_pic_count'] = $link_pic_count;
            $alb_list[$alb_idx]['onmouse'] = $onmouse;
            $alb_list[$alb_idx]['album_info'] = sprintf($lang_list_albums['n_pictures'], $count) . ($count ? sprintf($lang_list_albums['last_added'], $last_upload_date) : "") . (($CONFIG['link_pic_count'] && $link_pic_count > 0 ) ? sprintf(", {$lang_list_albums['n_link_pictures']},   {$lang_list_albums['total_pictures']}", $link_pic_count, $count + $link_pic_count) : "");
            $alb_list[$alb_idx]['album_adm_menu'] = (GALLERY_ADMIN_MODE || (USER_ADMIN_MODE && $cat == USER_ID + FIRST_USER_CAT)) ? html_albummenu($alb_thumb['aid']) : ' ';
        }
    }

    theme_display_album_list($alb_list, $nbAlb, $cat, $PAGE, $totalPages);
}

Anmerkung zur Konfiguration: Die Thumbnails werden auf der Startseite am Mauszeiger mit einer Größe von max. 120 Pixeln (Breite oder Höhe) angezeigt. Der Wert dafür wird in der Zeile
$new_size = 120;
festgelegt.

Hey das wars, zwar nicht wenig aber jetzt nun auch nicht soviel an Arbeit, um diesen schönen Mod (ich weiß Geschmacksfrage) in die eigene Gallerie mit einzubauen. Zumal ich Euch die ganze Testerei damit schon abgenommen habe .
         
Was brauche ich noch?

Zunächst mal Euer Feedback. Ich bin mir fast sicher, ich habe noch nicht an alle Konstellationen gedacht, auch läßt sich die Funktion theme_slideshow() sicher noch anpassen, damit auch die Diashows einen Mouseover-Effekt bekommen. Der fehlt nämlich noch. Anregungen hierzu sind willkommen, bevor ich mich selbst weiter damit abmühe.

Außerdem, wie ich schon eingangs erwähnte, hätte ich gern die zusätzlichen Informationen auf der displayimage.php - Seite mit eingebaut, als da wären

• Name des Albums: (Albumname)
• Hinzugefügt am: (Datum des Bildes)
• Angezeigt: (x) mal

und wenn sie bewertet ist:

• derzeitige Bewertung : x/y mit z Stimme(n)

Im Code realisiert ist bisher:

• Dateiname: (Dateiname)
• Dateigröße: x kB
• Abmessungen: X x Y Pixel

Bisher habe ich noch nicht allzuviel Zeit investiert, um die Codestellen herauszufinden, die man in theme_html_picture mit einbauen müsste, damit auch die anderen Infos dazukommen. Die entsprechende Zeile im Code ist oben auskommentiert:
   //     .$lang_display_thumbnails['date_added'].localised_date($CURRENT_PIC_DATA['ctime'], $album_date_fmt);

In der Zeile davor gehört selbstverständlich das Semikolon entfernt, wenn man die Variable mit dem Bilddatum ermittelt hat.

Aber was red ich noch viel? Schaut es euch an, gebt Euren Senf dazu, und sagt mir, ob es so auch anwendbar in vielen anderen Gallerie-Umgebungen und -Konfigurationen ist. Verbessert meine Fehler, wenn denn noch welche da sind und gebt mir ein 'Go for an English translation', wenn's paßt.

Im Anhang dieses Beitrags wie gesagt findet man die Javascript Bibliothek sowie alle nötigen Programmcode-Funktionen die hier behandelt wurden.
cu,
rrwwxx
°¿°

[Joachim Müller]

Was brauche ich noch?
Zunächst mal Euer Feedback.

Keine schlechte Idee, und auch keine schlechte Wahl der Bibliothek: wz:tooltip kommt mit der LGPL daher und könnte daher sogar mit Coppermine in zukünftigen Versionen gebündelt werden.
Was dann noch fehlen würde wäre eine Kapselung der Aufrufe in Funktionen, um portableren Code zu erzeugen und weniger Anpassungsarbeit zu leisten.

Im Endeffekt gibt es zwei mögliche Arten von Tooltips:

• "Reinen" Text nach dem Schema
  <a href="ein/link.htm" onmouseover="Tip('Hier der Text zum Link als Tool-Tipp');"
• "Aufgebrezelten" Text mit Formatierung / Zeilenumbrüchen und/oder allen denkbaren HTML-Elementen (wie Bilder):
  <a href="ein/aufgebrezelter/link.htm" onmouseover="Tip('<b>Hier der Text zum Link als Tool-Tipp</b><br />Der Tipp ersteckt sich über mehrere Zeilen');"

Ich bastel mal was zusammen und poste später darüber...



Aber aufgepasst: die Namen der Funktionen und Variablen, die das Skript verwendet sind zum Teil sehr allgemein gehalten (vor allem config lässt böses ahnen - es ist daher zu befürchten, dass sich das wz_tooltip mit anderen JavaScript-Funktionen "beissen" wird. Dem könnte man natürlich durch entsprechende Umbenennung zu Leibe rücken.
Ebenfalls müssten (in einer idealen Welt) die Formatierungs-Optionen raus aus der JavaScript-Datei und rein in die CSS-Datei. Das ist alles zu packen mit garnicht so grossem Aufwand.
Um das Skript in eine Version zu giessen, die tauglich für den Core ist müsste man das ganze natürlich noch abschaltbar machen (Admin-Option), da nicht jeder einen Tooltip möchte.

Anregungen hierzu sind willkommen

Die Anwendung ist nahezu unbegrenzt: überall, wo im ursprünglichen Code das title-Attribut vorkommt könnte man den Tooltip verwenden, z.B. bei der Image-Navigation, dem Benutzer-Menü etc.

da die Admins (und die meisten fleissigeren Leute hier im Forum) sowieso Deutschsprachig sind

Naja, rein zahlenmäßig kann ich das nicht so stehen lassen. Von den Coppermine-Entwicklern sprechen zwei Personen Deutsch (Stramm und ich). Dazu kommen die Moderatoren des Deutschen Board. Demgegenüber stehen elf Entwickler, die nicht des Deutschen mächtig sind und zahlreiche sehr aktive Supporter (wie z.B. Hein) im internationalen Board. Details zur Herkunft der Entwickler: http://coppermine-gallery.net/team/#active

und ich mit diesem Thread erst den Mod vorstellen und auf Anregungen von anderen eingehen möchte, schreibe ich halt erstmal in diesem Bereich des Forums in meiner Muttersprache, weil das auch für mich am flüssigsten geht.

Das ist natürlich vollkommen OK und legitim.

auch wenn ich mich bei einem Großteil der Aufgabe schon allein durchkämpfen konnte

Ja, sieht schon sehr gut aus. Man sieht, dass da einiges an Arbeit drinsteckt.

An potentielle Tester des Mods: besonders interessant wäre meiner Meinung nach die Interaktion mit anderen DHTML-Mods und Plugins, wie z.B. dem Highslide-Plugin von Sami.

Joachim

[rrwwxx]

Das wäre natürlich ideal, wenn es in einer zukünftigen cpg Version mit gebundelt wird und über die Administrationsoptionen ein- und ausgeschaltet werden kann! Berücksichtigen sollte man dabei vielleicht auch die Konfiguration der js-Bibliothek, steuerbar über Kontrollfelder im Admin-Menü.

Wichtig konfigurierbar sein sollte insbesondere, dass man ja entweder einen Infotext zum Bild oder die Thumbs- bzw. Großbildansicht des Dias als Vorschau bekommt. Ich habe das oben im (Teil5) erwähnt gehabt. Nicht testen konnte ich alles, was mit privaten Alben zu tun hat, und sowieso ist das Potential und die vielfältigen Optionen und Darstellungsmöglichkeiten in meinen paar Zeilen des Mods bisher noch lang nicht ausgekostet.
Ich wunderte mich nur, dass es bei Euch damals mit dem overLib - Thread nicht weiterging...?

Ich selbst mag den Effekt so sehr, dass ich über die Integration dieser Bibliothek dann erstmal begann, den Kern der cpg - Routinen zu studieren, um das wenigstens in meine(n) Gallerie(n) sehen zu können. Und da man besser jeden Schritt mit protokolliert, kann man auch gleich eine Publikation draus machen - zumal es ja auch wirklich gut für's Karma ist, lol.

Es hat enorm Spaß gemacht, denn wie immer man lernt ja auch etwas dazu! Wichtig war mir aber vor der Publikation hier in Englisch, dass es den "Segen" derjenigen bekommt, die wirklich an der Fortentwicklung von cpg arbeiten. Ich freue mich jetzt schon auf deine weiteren Ansagen dazu, Joachim.

cu,
Roli
°¿°

[rrwwxx]

An potentielle Tester des Mods: besonders interessant wäre meiner Meinung nach die Interaktion mit anderen DHTML-Mods und Plugins, wie z.B. dem Highslide-Plugin von Sami.

Hab das Highslide Plugin jetzt zum ersten Mal in Aktion gesehen: Respekt, wow! Aber dieser Mod macht schon auch irgendwie eine Gallery komplett, so wie es ist - da braucht man kein Mouseover mehr. Ist halt irgendwie Geschmackssache, je nach Galerie-Struktur würd ich sagen.

Von den Coppermine-Entwicklern sprechen zwei Personen Deutsch (Stramm und ich). Dazu kommen die Moderatoren des Deutschen Board. Demgegenüber stehen elf Entwickler, die nicht des Deutschen mächtig sind und zahlreiche sehr aktive Supporter (wie z.B. Hein) im internationalen Board. Details zur Herkunft der Entwickler: http://coppermine-gallery.net/team/#active

Ah, da habe ich mich wohl in der Einschätzung der Devs geirrt. Kannste mal sehen, wie viel ich mich bisher umgeschaut habe im Forum. Bin eigentlich immer noch ein Newbie hier und hab noch längst keinen Überblick, in wieviele Bereiche sich das alles zergliedert und welche Schwerpunkte hier liegen.

Wenn du meinst, eine englische Fassung von all dem da oben sollte so schon okay gehen und könnte offene Fragen schneller beantworten, dann tu ich das.
cu,
Roli
°¿°

[rrwwxx]

Nach etwas Grübeln, Basteln und Probieren habe ich den Mod jetzt um meine gewünschten Zusatzinformationen zur Anzeige der erweiterten Eigenschaften am Bild auf der displayimage.php-Seite erweitern können. 

Nötig ist bei meiner Lösung nun aber auch eine Änderung am Code von displayimage.php selbst. In der Funktion html_picinfo muß folgendes am Anfang zusätzlich deklariert werden:

Code Select Expand

    global $mypicinfo;

Und so sollten die letzten Zeilen dieser Funktion html_picinfo aussehen:

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

In theme.php muß nämlich die schon oben erwähnte Funktion theme_html_picture() ergänzt werden.
Zunächst in der Deklaration am Anfang die zusätzliche 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;

Dann suche etwas weiter unten

Code Select Expand

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

Ersetze danach die erste Deklaration durch folgenden 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']);
            }

Danach geht es weiter mit

Code Select Expand

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

Dieser String wird dann in das Onmouseover eingebaut. Beispiel:
Tip('Name des Albums : Cine&nbsp;Star&nbsp;27.06-30.06.2007<br />Dateiname : c30.JPG<br />Dateigröße : 41 kB<br />Abmessungen : 615x410 Pixel<br />Hinzugefügt am : 10.Juli 2007<br />Angezeigt : 7 mal<br />Bewertung (1 Stimmen) : *****')

Funktioniert, wie man hier zum Beispiel sehen kann.

cu,
Roli
°¿°

[rrwwxx]

Ups, ich vergaß noch eine letzte wichtige Änderung an displayimage.php. Diese Zeilen müssen in der Reihenfolge ausgetauscht werden:
Vorher:

Code Select Expand

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

Nachher:

Code Select Expand

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

cu,
Roli
°¿°

[Joachim Müller]

Es hat enorm Spaß gemacht, denn wie immer man lernt ja auch etwas dazu! Wichtig war mir aber vor der Publikation hier in Englisch, dass es den "Segen" derjenigen bekommt, die wirklich an der Fortentwicklung von cpg arbeiten. Ich freue mich jetzt schon auf deine weiteren Ansagen dazu, Joachim.

Naja, eine richtige "Ansage" gebe ich da nicht - Du kannst jederzeit einen englischen Beitrag verfassen - das ist Dir freigestellt. Solange Du aber noch am Basteln bist ist es aber wahrscheinlich einfacher, nur mal diesen deutschen Thread zu pflegen. Mit anderen Worten: starte Deinen Englischen Thread wann immer Du magst

Joachim

[rrwwxx]

Joa, alles klar. Hab jetzt den Code rausgefunden, damit ich auch den Album-Namen mit in die Info-Anzeige bekommen. Musste nur ein bisschen nach anderen Funktionen suchen, und fand dann diese geniale str_replace Funktion, die ich genau andersrum brauchte und oben einbaute.

Code Select Expand

  $mypicinfo['album']=  str_replace( array('&', '"', '<', '>', ' ', "'"),array('&amp;', '&quot;', '&lt;', '&gt;', '&nbsp;', '&#39;'), $CURRENT_ALBUM_DATA['title']);

Hab also meinen vorvorletzten Beitrag schon korrigiert. Und jetzt wollte ich nur nochmal schauen, ob ich das Menu obendrüber mit onmouse-Effekten ausstatten kann, denn das jetzt vorhandene 'title'-tag kann ja eigentlich easy umgebogen werden. Nur erstmal den Code finden, der z.B. dieses dann erzeugt:

Code Select Expand

<a href="thumbnails.php?album=lastup&amp;cat=0" title="Zeige neueste Uploads an">Neueste Uploads</a> <img src="themes/hairfactory10/images/line.gif" width="9" height="11" border="0" alt="" />

Wenn ich das hab, kann ich's ja mal auf Englisch vorstellen...

Edit: Habs schon gefunden!
In themes.inc.php findet man dieses:

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;


Und das kopiert man sich am besten in der umgebogenen Form in die themes.php dazu:

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;

Genial und einfach. Einfach genial.
cu,
Roli
°¿°

[nika2000]

Hi Roli!

Super Idee das Mod! Habe es eben installiert und es funktioniert soweit auch schon ganz gut!
Aber ich hätte noch ne Frage:
Ist es möglich, die Größe des MouseOver-Bildes irgendwie zu verringern? Meine Detail-Bilder sind recht groß und als MouseOver-Vorschau würde mir die halbe Größe locker genügen!
Das sollte doch irgendwie möglich sein, oder?

LG
Nika

[rrwwxx]

Freut mich, dass es Dir so gut gefällt wie mir . Und auch andere sind begeistert von der Gallerie, ich bekam schon viel positives Feedback für das Mod.
Obwohl die Umsetzung für mich nun schon einige Monate her ist und ich nicht mehr alles so genau erinnere, glaube ich, ist es nicht so einfach, die Mouseover-Bildgröße zu verändern, weil hierzu die generierte Bildgröße verwendet wird, die dann auch beim Klick aufs Bild in der nächsten Ansicht angezeigt wird. Kann mich aber täuschen...
Zunächst einmal müsstest Du mir sagen, welche Mouseover-Bilder Du meinst, die auf index.php oder auf thumbnails.php?
Oder bei beiden? Schau mal, ob Dir diese Gallerie gefällt. Ich glaube ich hab da solange rumexperimentiert, bis sie alle Features als Mods so drin hatte, wie ich sie haben wollte.
cu,
Roli
°¿°

[nika2000]

Hallo Rolli!

Danke für Deine Antwort! Der Link funktioniert glaube ich nicht, da ist nur die Startseite von nem Apache-Server.
Ich hab's inzwischen selbst hin bekommen. Ändern wollte ich die Popups in den Galerien drin.
Ich hab dazu in der functions.inc.php folgenden Eintrag geändert:

von:

Code Select Expand


$onmouse2="Tip('<div align=\\'center\\'><img src=\\'".str_replace("thumb_","",$pic_url)."\\' height=\\'".$row['pheight']."\\' width=\\'".$row['pwidth']."\\'> </div>')";                     


in:

Code Select Expand


if ($row['pheight'] > $row['pwidth'])
   {$onmouse2="Tip('<div align=\\'center\\'><img src=\\'".str_replace("thumb_","",$pic_url)."\\' height=\\'450 \\' width=\\'300 \\'> </div>')";
   }
else
   {
   $onmouse2="Tip('<div align=\\'center\\'><img src=\\'".str_replace("thumb_","",$pic_url)."\\' height=\\'300 \\' width=\\'450 \\'> </div>')";
   }


Allerdings musste ich feste px-Werte angeben damit es sauber funktioniert. Bei meiner Galerie ist das aber kein Problem weil eh alle Fotos das selbe Format haben.
Mit % - Angaben gings zwar prinzipiell auch, allerdings war dann rechts und links vom Bild der Rahmen (bzw. Hintergrund) noch in Originalgröße, also zu groß - keine Ahung warum.
Jedenfalls tut's so und ich bin zufrieden ;-)

LG Nika

[rrwwxx]

Hey super, dass Du es rausgefunden hast!
Klasse und danke, vielleicht brauche ich das selbst nochmal.
Sorry für den falschen Link, es war schon SEHR spät nachts, als ich Dir antwortete. Hier ist der richtige.
Können wir deine auch mal sehen? Wenn Du's nicht öffentlich machen willst, dann vielleicht als Email hier übers Forum?
cu,
Roli
°¿°

[nika2000]

Hi!

Ich hal leider ein *klitzekleines* Problem mit der Erweiterung, vielleicht weiss ja jemand Rat.
Zusätzlich zu dieser Erweiterung habe ich die Bridge zu joomla installiert.

Leider läuft beides nicht zusammen - zumindest nicht im IE, Firefox zeigt die Seiten problemlos an.

Der IS scheint sich an dem Eintrag <script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script>  im template.html zu verschucken und bringt nur ne Fehlermeldung ("Seite kann nicht angezeigt werden").

Gibt's ne andere Möglichkeit diesen Eintrag einzubinden? Oder wenn nicht, kann ich die Funktion evtl. nur für den Firefox aktivieren? Wenn ja, wie hejt das?

LG
Nika