Javascript-Lightbox

Subspekt · 05 Oktober 2006, 17:36:18

Hallo!
Ich habe im Coppermine-Forum einen Beitrag gefunden, den ich gerne umsetzen möchte. Es handelt sich um eine besondere Anzeige des Fullsizes-Bildes.
hier das Beispiel -> http://www.bullseyephotos.com/test/displayimage.php?album=1&pos=6
(Bild anklicken..)

Hier ist die Beschreibung -> http://coppermine-gallery.net/forum/index.php?topic=35539.0
Ist ja eigentlich nix wildes... die Javascript-Dateien einbinden, die css-Datei einbinden und den Templatecode ins Theme eintragen. Funktioniert aber auf jeden Fall nicht bei mir.... Das Bild wird "ganz alleine" im Browser angezeigt - ohne Effekt etc... Ich weiß nicht wo der Fehler liegen soll...hängts vielleicht an der "Styleportierung" in der Mx-Bridge?

Für einen Tip wär ich dankbar!
Danke und Gruß Thorsten

jubilee · 05 Oktober 2006, 19:54:42

ZitatFunktioniert aber auf jeden Fall nicht bei mir.... Das Bild wird "ganz alleine" im Browser angezeigt - ohne Effekt etc... Ich weiß nicht wo der Fehler liegen soll

Einen Link zu der Seite wo Du es eingebaut hast wäre hilfreich, um überhaupt etwas sagen zu können.

MfG

Conquesta · 05 Oktober 2006, 22:41:24

Hallo Subspekt !

Also wenn Du es hin bekommen solltest wäre ich über eine kleine Hilfe dankbar :-)

LG Mike

Subspekt · 11 Oktober 2006, 14:10:30

Oh, es hat geklappt...

Ich habe die css-klassen einfach in die standard-css-Datei eingetragen.

Hier zu sehen:
http://subspekt.net/freiraum2/modules.php?name=coppermine&act=displayimage&album=12&pos=0
(meine Bastelseite....)

Ich schreib nachher noch ne kleine Anleitung!
Danke und Gruß
Thorsten

Andi · 11 Oktober 2006, 15:43:34

geil geworden

ZitatIch schreib nachher noch ne kleine Anleitung!

Oh, ja, bitte!!!

Conquesta · 11 Oktober 2006, 20:34:59

Na da warte ich auch mal ... aber nicht so lange warten lassen sonst bekomme ich eine feuchte hose ... ach ne das heißt ja pippi in den augen ;-)

Lg Mike

Subspekt · 14 Oktober 2006, 23:32:08

Hier eine kleine Anleitung, es sind in Bezug zur Original-Anleitung (http://coppermine-gallery.net/forum/index.php?topic=35539.0) nur ein paar kleine Änderungen nötig..

Schritt 1:
LightBox JS v2.02 script runterladen http://www.huddletogether.com/projects/lightbox2/

Schritt 2:
Die Ordner "js" und "images" ins Themeverzeichnis der Cpg hochladen, "prev.gif" und "next.gif" nicht überschreiben.

Schritt 3:
Den Inhalt der Datei css/lightbox.css kopieren und am Ende der style.css (Themeverzeichnis Coppermine) einfügen.

Schritt 4:
Die Datei Lightbox.js öffnen und den Pfad der Bilder von images/bild.gif ändern in modules/name_deiner_galerie/themes/dein_theme_ordner/images/bild.gif ändern.

Schritt 5:
in der theme.php die function theme_html_picture() einfügen (kann ganz ans Ende vor das "?>" gesetzt werden:

Code Auswählen

// Displays a picture
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;

    $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') {
        if (isset($image_size['reduced'])) {
	        $picfull_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
	        $pic_title = $CURRENT_PIC_DATA['title'];
            $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 href=\"$picfull_url\" rel=\"lightbox\" title=\"$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 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:6BF52A52-394A-11D3-B153-00C04F79FAA6" ',
                                'codebase' => 'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" ',
                                '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['classid'].$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);
}

falls schon eine eigene theme_html_picture() verwendet wird, ist hier der relevante Code, der ausgetauscht werden muss:
Original-Code:

Code Auswählen

if ($mime_content['content']=='image') {
        if (isset($image_size['reduced'])) {
            $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 href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&amp;fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=yes,status=yes,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 src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><br />\n";
        }

Ersetzen mit:

Code Auswählen

if ($mime_content['content']=='image') {
        if (isset($image_size['reduced'])) {
	    $picfull_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
	    $pic_title = $CURRENT_PIC_DATA['title'];
            $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 href=\"$picfull_url\" rel=\"lightbox\" title=\"$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 src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><br />\n";
        }

Schritt 6
die Theme.html des Coppermine-Themes öffnen und zwischen <head> und </head> folgende Einträge machen:

Code Auswählen


<script type="text/javascript" src="themes/[i]your_theme_folder[/i]/js/prototype.js"></script>
<script type="text/javascript" src="themes/[i]your_theme_folder[/i]/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="themes/[i]your_theme_folder[/i]/js/lightbox.js"></script>

your_theme_folder natürlich gegen den Namen Deines Coppermine-Themes austauschen.
(Anmerkung: Ich mußte die Pfade bei mir absolut setzen, er hat nicht alle dateien gefunden, keine Ahnung warum..)

Ich glaube das war alles...

Conquesta · 15 Oktober 2006, 00:08:39

Hmmm irgendwie finde ich nicht die theme.html !

Wo soll die den stehen

$:-\$

LG Mike

P.s. oder meinst Du die index.html ?=?

Sitki · 15 Oktober 2006, 00:35:52

Hi

,
Schritt 1: Klar, Ok.

Schritt 2:

ZitatDie Ordner "js" und "images" ins Themeverzeichnis der Cpg hochladen

Also hier reinkopieren, oder wie? /modules/Gallery/themes/

Schritt 3:

Zitatam Ende der style.css (Themeverzeichnis Coppermine) einfügen

In die style.css des gerade verwendeten Themes?

Schritt 4: fileLoadingImage = "images/loading.gif"; fileBottomNavCloseImage = "images/closelabel.gif";
in modules/Gallery/themes/dein_theme_ordner/images/loading.gif und
modules/Gallery/themes/dein_theme_ordner/images/closelabel.gif ?

Schritt 5: Den Code // Displays a picture ... in dem gerade verwendeten theme.php einfügen?

Schritt 6:

Zitatdie Theme.html des Coppermine-Themes öffnen

Damit ist die aktuell verwendete template.html gemeint?

Zitatyour_theme_folder natürlich gegen den Namen Deines Coppermine-Themes austauschen

?

Bitte daran denken, dass die Ordnerstruktur der MX-Coppermine mit der Original Coppermine Version nicht übereinstimmt.

Gruß

Conquesta · 15 Oktober 2006, 00:50:33

Also habe eben mal alles nach anleitung gemacht , aber geht nicht !!!
naja finde keine themes.html habe darum mal die anders so verändert ...
aber nix... wo liegt der fehler

LG Mike

Subspekt · 15 Oktober 2006, 02:23:11

sorry, mein fehler! es ist natürlich die template.html

Da hab ich wohl ne schlechte anleitung geschrieben

ZitatSchritt 2:
Zitat
Die Ordner "js" und "images" ins Themeverzeichnis der Cpg hochladen
Also hier reinkopieren, oder wie? /modules/Gallery/themes/

Nein, in das aktuelle cpg-Theme.

ZitatSchritt 3:
Zitat
am Ende der style.css (Themeverzeichnis Coppermine) einfügen
In die style.css des gerade verwendeten Themes?

genau.

ZitatSchritt 4: fileLoadingImage = "images/loading.gif"; fileBottomNavCloseImage = "images/closelabel.gif";
in modules/Gallery/themes/dein_theme_ordner/images/loading.gif und
modules/Gallery/themes/dein_theme_ordner/images/closelabel.gif ?

sollte so passen...

ZitatSchritt 5: Den Code // Displays a picture ... in dem gerade verwendeten theme.php einfügen?

genau.

ZitatSchritt 6:
Zitat
die Theme.html des Coppermine-Themes öffnen
Damit ist die aktuell verwendete template.html gemeint?

ja, die meinte ich...

ZitatZitat
your_theme_folder natürlich gegen den Namen Deines Coppermine-Themes austauschen

?

der pfad zu den scripten muss natürlich zum ordner des aktuellen Themes führen, in das ja auch die Dateien kopiert wurden. (und natürlich ohne die [ i ] [ / i ] - war mein Fehler beim Erstellen des Beitrags...)

cihan · 15 Oktober 2006, 03:50:14

vielen dank, subspekt

funktioniert alles bestens

Conquesta · 15 Oktober 2006, 09:40:13

So habe es auch hinbekommen !!!
Habe meinen fehler gefunden. lag daran das ich nicht eines der Standart themes benutzt habe.

Aber jetzt geht alles !!! und einen besten dank an Subspekt der diese Anleitung gemacht hat !

LG Mike

So nochmal alles getestet und es gibt doch 2 probleme bei mir

1. er wendet es nicht auf alle Bilder an.

2. was eigendlich mich am meisten stört. meine Filme in der Gallery werden nicht mehr wieder gegeben , das fenster bleibt weiß

Hat jemand noch diese Probleme

Ich vermute mal es liegt an der hier :

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).'"';
}

die geändert wurde in der theme.php

Sitki · 16 Oktober 2006, 21:29:57

Hi

,
die index.html Datei muss mit in das Themenverzeichnis kopiert werden (hatte ich übersehen). Jetzt funktioniert die Funktion soweit, jedoch nicht bei allen Bildern (Format, Größe?), wie Conquesta es schon angesprochen hat. Mit den Filmen habe ich allerdings kein Problem. Besten Dank an Subspekt für die Bereitstellung der Installationsanleitung.

gruß

spike · 17 Oktober 2006, 11:26:20

ich hab mich auch dran versucht, allerdings öffnet er mir die bilder in einem neuen fenster.. hat da jemand ne idee ?

Conquesta · 17 Oktober 2006, 17:03:19

in einem weißen fenster

hast du in der template.html den realen pfad angegeben

LG Mike

spike · 17 Oktober 2006, 17:08:24

das ist die template.html

<html dir="{LANG_DIR}">
<head>
<script type="text/javascript" src="themes/mx-port-black/js/prototype.js"></script>
<script type="text/javascript" src="themes/mx-port-black/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="themes/mx-port-black/js/lightbox.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
<title>{TITLE}</title>
{META}
<link href="themes/mx-port-black/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts.js"></script>

</head>
<body>
{CUSTOM_HEADER}
<div align="center" class="content">
<div class="title"><b>{GAL_NAME}</b></div>
<p>{GAL_DESCRIPTION}</p>
<br />
{SYS_MENU} <br /> {SUB_MENU}<br /><br />
{ADMIN_MENU}
{GALLERY}
<br />
{THEME_SELECT_LIST}
</div>
{CUSTOM_FOOTER}{VANITY}
</body>
</html>

Conquesta · 17 Oktober 2006, 18:51:43

Hallo Spike !!!

probiere mal den direkten pfad zum Theme zb.

<script type="text/javascript" src="http://www.deine-domain.de/themes/mx-port-black/js/prototype.js"></script>
<script type="text/javascript" src="http://www.deine-domain.de/themes/mx-port-black/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://www.deine-domain.de/themes/mx-port-black/js/lightbox.js"></script>

spike · 17 Oktober 2006, 18:55:48

leider auch kein ergebniss

Conquesta · 17 Oktober 2006, 19:18:32

hmmm hast du auch alles nach anleitung gemacht und die änderungen gemacht ?

Javascript-Lightbox

jubilee