[Erledigt] Lightbox-Effekt auf alle Bilder verwenden??

Begonnen von goodssale, 20 August 2008, 12:15:55

⏪ vorheriges - nächstes ⏩

0 Mitglieder und 1 Gast betrachten dieses Thema.

Drucken
Nach unten Seiten1
Benutzer-Aktionen

goodssale

20 August 2008, 12:15:55 Letzte Bearbeitung: 23 August 2008, 15:46:45 von JoergK
moin zusammen,

ich habe da ein problem.

ich möchte den Lightbox-Effekt auch auf normale bilder anwenden in artikeln und so.

habe da eine seite gefunden mit einer anleitung komme aber nicht weiter.

welche html seite meint den der in der html vom rainbow theme habe ich es versucht geht aber nicht.
ich habe auch den ordner litebox-1.0 auf den webspace geladen.

hier mal der text von der internetseite:

ZitatWas ist ein Lightbox-Effekt?
Durch einen Klick auf ein "thumbnail" (kleines Vorschaubild) wird die Website abgedunkelt, und die Großansicht des Bildes überlagert sie.

Diese populäre Funktionalität kann man z.B. mit dem Javascript-Paket Litebox 1.0 recht schnell und unkompliziert in die eigenen Webseiten einbauen.


Das fertige Javascript-Paket Litebox 1.0 gibt es hier:
http://www.doknowevil.net/litebox/download/litebox-1.0.zip


Nach dem Downloaden und Entpacken des Pakets fügt man folgende Code-Zeilen in den head-Bereich seiner Seite ein:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript scr="js/prototype.lite.js"></script>
<script type="text/javascript scr="js/moo.fx.js"></script>
<script type="text/javascript scr="js/litebox-1.0.js"></script>

Dadurch stellt man die Verbindung zum CSS und den Javascriptdateien her.


Dann passt man das "Image-Tag" seines Bildes in der Webseite z.B. wie folgt an:

<a href="images/image-1.jpg" rel="lightbox[example]" title="Horses">
<img src="images/thumb-1.jpg" width="100" height="40" alt="Beautiful Horses" />
</a>

Und schon ist der Lightbox-Effekt integriert.

wenn ich auf das bild bei mir klicke geht es in einem neuen fenster auf :gruebel:
hier mal der link zu meiner test seite.
http://testnuke.te.funpic.de/index.php das bild mit dem pferd ist es.

hoffentlich seit ihr nicht alle im urlaub.
Grüße Heinz

JoergK

#1
20 August 2008, 12:39:38
Hoi ;)

In pragmaMx gehören diese Zeilen
Zitat<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript scr="js/prototype.lite.js"></script>
<script type="text/javascript scr="js/moo.fx.js"></script>
<script type="text/javascript scr="js/litebox-1.0.js"></script>

z.B. in die /includes/my_header.php und nicht in den <head>-Bereich in der theme.html.

Desweiteren sind natürlich die Pfade zu den Dateien entsprechend der eigenen Struktur anzupassen.
Gruß,
Jörg

Nobody is perfect ... so don't call me Nobody

goodssale

#2
20 August 2008, 16:43:05
danke jörg für deine hilfe,
ich habe das script in die /includes/my_header.php

aber jetzt bekomme ich folgenden fehler:
ZitatParse error: syntax error, unexpected '<' in /usr/export/www/vhosts/funnetwork/hosting/testnuke/includes/my_header.php on line 16

könntest du mir sagen wo ich das hinmachen muss :please:
habe es in zeile 16-20 gemacht und die pfade geändert:
Zitat<?php
/**
* This file is part of
* pragmaMx - Web Content Management System.
* Copyright by pragmaMx Developer Team - http://www.pragmamx.org
*
* pragmaMx is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* $Revision: 1.9.2.4 $
* $Author: tora60 $
* $Date: 2007/12/22 14:11:51 $
*/
<link rel="stylesheet" href="/litebox-1.0/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript scr="/litebox-1.0/js/prototype.lite.js"></script>
<script type="text/javascript scr="/litebox-1.0/js/moo.fx.js"></script>
<script type="text/javascript scr="/litebox-1.0/js/litebox-1.0.js"></script>
if (!defined("mxMainFileLoaded")) die ("You can't access this file directly...");

if (eregi("Netscape", MX_USER_AGENT)) {

    ?>
<script language="JavaScript" type="text/JavaScript">
<!--
function VKP_reloadPage(init) {  //reloads the window if Nav4 resized
   if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {document.VKP_pgW=innerWidth; document.VKP_pgH=innerHeight; onresize=VKP_reloadPage; }}
   else if (innerWidth!=document.VKP_pgW || innerHeight!=document.VKP_pgH) location.reload();
}
VKP_reloadPage(true);
//-->
</script>

<?php
}

if (!empty($GLOBALS['backend_active'])) {
    echo '
<!-- START rss_feeds -->
<link rel="alternate" type="application/rss+xml" title="' . htmlspecialchars($GLOBALS['sitename']) . ' - ' . _NEWSARTICLES . '" href="backend.php?op=story">
<link rel="alternate" type="application/rss+xml" title="' . htmlspecialchars($GLOBALS['sitename']) . ' - ' . _DOWNLOADS . '" href="backend.php?op=downs">
<link rel="alternate" type="application/rss+xml" title="' . htmlspecialchars($GLOBALS['sitename']) . ' - ' . _WEBLINKS . '" href="backend.php?op=link">
<link rel="alternate" type="application/rss+xml" title="' . htmlspecialchars($GLOBALS['sitename']) . ' - ' . _ALL . '" href="backend.php?op=all">
<!-- END rss_feeds -->
';
    // echo ' <link rel="alternate" type="application/rss+xml" title="'.htmlspecialchars($GLOBALS['sitename']).' - '._SELECTPART.'" href="backend.php?op=auswahl&amp;feed1=XXX[&amp;feed2=XXX&amp;feed3=XXX]">';
}

// /// diese Zeilen einkommentieren, wenn Seitenuebergangseffekte gewuenscht sind
// /// Link dazu: http://selfhtml.teamone.de/dhtml/modelle/dynamische_filter.htm#reveal_trans
// echo '<meta http-equiv="Page-Enter" content="RevealTrans(Duration=1,Transition=23)">'."\n";
// echo '<meta http-equiv="Page-Exit" content="RevealTrans(Duration=1,Transition=23)">'."\n";
Grüße Heinz

siggi

#3
20 August 2008, 17:16:07
Zitat
...
*/
?>
<link rel="stylesheet" href="/litebox-1.0/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript scr="/litebox-1.0/js/prototype.lite.js"></script>
<script type="text/javascript scr="/litebox-1.0/js/moo.fx.js"></script>
<script type="text/javascript scr="/litebox-1.0/js/litebox-1.0.js"></script>
<?php
if (!defined("mxMainFileLoaded")) die ("You can't access this file directly...");
...

man sollte schon beim direkten Einfügen von HTML in eine PHP-Datei darauf achten, dass man den PHP-Parser an bzw. ausschaltet.

Übrigens: Wie ich gesehen habe, hast du dir ein Acccount auf unserer Seite eingerichtet. Da solltest du gesehen haben, dass bei unseren Themes die auf jQuery basierende Facebox schon integriert ist. Einschalten, und funktioniert. Aber warum einfach, wenn's auch umständlich geht ...  :BD:
Wenn man an Gras zieht wächst es auch nicht schneller.

goodssale

#4
21 August 2008, 07:09:29
hallo siggi,
habe die klammern gemacht geht aber trotzdem nicht. :cry

zwar ist die fehler meldung weg aber der effekt geht nicht.
das bild geht in einem neuen fenster auf.  :red:

da habe ich irgendwo noch einen fehler drin weiß aber nicht wo.

ZitatÜbrigens: Wie ich gesehen habe, hast du dir ein Acccount auf unserer Seite eingerichtet.
ja habe ich die themes schauen gut aus wollte mal eines hochladen habe aber auch hier
keinen erfolg!!

habe das theme pmz-PinkFlower hochgeschoben und in den html optionen
Validierung der Seite (DOCTYPE - Einstellung):   XHTML 1.0 Transitional, Almost Standart Mode
eingestellt aber da kommt kein theme. habe alle einstellungen versucht nix drin
habe nur oben die fehlermeldung:
PMZ TEMPLATESYSTEM IS MISSING ! GET IT HERE

bin ich blöd oder was, ich bekomme ja gar nichts mehr auf die reihe.

Grüße Heinz

siggi

#5
21 August 2008, 14:07:09
Zitatbin ich blöd oder was

Da sage ich nichts zu :BD:

Nur folgendes :

"Wer lesen und schreiben kann, ist eindeutig im Vorteil"  :thumbup:

Zitat von: goodsalehabe nur oben die fehlermeldung:
PMZ TEMPLATESYSTEM IS MISSING ! GET IT HERE

...will sagen : Das PMZ TEMPLATESYSTEM FEHLT ! HOL' ES DIR HIER


Zitat von: http://www.pragmatized.com/?name=Downloads
Templatesystem mit zusätzlichen Features
Das pmz-Templatesystem ist ein Addon für pragmaMx und wird von allen pragmatized Themes benötigt. Weitere Infos in den FAQ's

Zu deinem Problem mit dem Einbinden, Jörg hat es doch schon geschrieben :
Zitat von: JoergK...Desweiteren sind natürlich die Pfade zu den Dateien entsprechend der eigenen Struktur anzupassen.
Wenn man an Gras zieht wächst es auch nicht schneller.

goodssale

#6
21 August 2008, 15:13:53
ok, das mit dem PMZ TEMPLATESYSTEM habe ich überlesen :red:
habe es installiert und jetzt geht es, echt coole themes vielen dank.

aber das mit dem pfaden weiß ich nicht, habe es versucht kommt aber nix.
so habe ich mal den pfad angegeben:

Zitat<link rel="stylesheet" href="http://testnuke.te.funpic.de//litebox-1.0/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript scr="http://testnuke.te.funpic.de//litebox-1.0/js/prototype.lite.js"></script>
<script type="text/javascript scr="http://testnuke.te.funpic.de//litebox-1.0/js/moo.fx.js"></script>
<script type="text/javascript scr="http://testnuke.te.funpic.de//litebox-1.0/js/litebox-1.0.js"></script>


Grüße Heinz

siggi

#7
21 August 2008, 17:48:55
Zitathabe es installiert und jetzt geht es, echt coole themes vielen dank.

Bitte. Weiterer Support dazu im pragmatized-Forum   :JC_highfive:


Zitataber das mit dem pfaden weiß ich nicht, habe es versucht kommt aber nix.

Sicherlich müssen in den jeweiligen Javascript-Dateien ebenfalls die Pfade angepasst werden.

Wenn man an Gras zieht wächst es auch nicht schneller.

siggi

#8
21 August 2008, 23:07:23
Übrigens: Nur ein Rechtsklick und Quelltext anschauen hat auf deiner Testseite folgendes ans Tageslicht gebracht :
(Wie auch hier in deinem Quelltext-Beispiel)
Zitat
<script type="text/javascript" scr="http://testnuke.te.funpic.de//litebox-1.0/js/prototype.lite.js"></script>
<script type="text/javascript" scr="http://testnuke.te.funpic.de//litebox-1.0/js/moo.fx.js"></script>
<script type="text/javascript" scr="http://testnuke.te.funpic.de//litebox-1.0/js/litebox-1.0.js"></script>

Zitat von: goodsale
...aber das mit dem pfaden weiß ich nicht, habe es versucht kommt aber nix.

Tipp : Auf die richtige Syntax zu achten ist der erste Schritt in Richtung erfolgreicher Fehlereleminierung   :BD:   
Wenn man an Gras zieht wächst es auch nicht schneller.

JoergK

#9
22 August 2008, 02:25:15
Hoi  ;)

Statt
Zitat
<link rel="stylesheet" href="http://testnuke.te.funpic.de//litebox-1.0/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" scr="http://testnuke.te.funpic.de//litebox-1.0/js/prototype.lite.js"></script>
<script type="text/javascript" scr="http://testnuke.te.funpic.de//litebox-1.0/js/moo.fx.js"></script>
<script type="text/javascript" scr="http://testnuke.te.funpic.de//litebox-1.0/js/litebox-1.0.js"></script>

einfach mal mit
Zitat
<link rel="stylesheet" href="litebox-1.0/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" scr="litebox-1.0/js/prototype.lite.js"></script>
<script type="text/javascript" scr="litebox-1.0/js/moo.fx.js"></script>
<script type="text/javascript" scr="litebox-1.0/js/litebox-1.0.js"></script>
versuchen, wie bereits in meinem Beitrag geschrieben, wenn auch dort andere Pfade standen. Zum einen muß die komplette URL nur dann angegeben werden, wenn die zu ladenden Dateien auf einer anderen URL sind und zum anderen sind zwei aufeinander folgende "//" einer zuviel. ;)
Gruß,
Jörg

Nobody is perfect ... so don't call me Nobody

goodssale

#10
22 August 2008, 07:25:13
danke für die hilfe.

ich habe es geändert und es geht trotzdem nix.

so sieht das script jetzt aus:
Zitat?>
<link rel="stylesheet" href="litebox-1.0/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" scr="litebox-1.0/js/prototype.lite.js"></script>
<script type="text/javascript" scr="litebox-1.0/js/moo.fx.js"></script>
<script type="text/javascript" scr="litebox-1.0/js/litebox-1.0.js"></script>
<?php
und so das bilderscript:
Zitat<a title="Leuchtturm" rel="lightbox[example]" href="/litebox-1.0/images/163c.jpg"> <img src="/litebox-1.0/images/163b.jpg" /></a>
ist die my_header.php die richtige datei,
oder muss es noch wo anders rein??
Grüße Heinz

Banjo

#11
22 August 2008, 17:19:55 Letzte Bearbeitung: 22 August 2008, 17:39:53 von Banjo
<script type="text/javascript" scr="litebox-1.0/js/prototype.lite.js"></script>
<script type="text/javascript" scr="litebox-1.0/js/moo.fx.js"></script>
<script type="text/javascript" scr="litebox-1.0/js/litebox-1.0.js"></script>


das aus Deinem Quellcode...


für mich fehlt ein Slash...  so:

<script type="text/javascript" scr="/litebox-1.0/js/prototype.lite.js"></script>
<script type="text/javascript" scr="/litebox-1.0/js/moo.fx.js"></script>
<script type="text/javascript" scr="/litebox-1.0/js/litebox-1.0.js"></script>

und 100% sicher ??? das der Ordner litebox-1.0 im Root-Verzeichniss deines Webspaces liegt... ???

JoergK

#12
23 August 2008, 02:49:00
Hoi ;)

Oh man, das hab selbst ich nicht gesehen :red:
... aber Dank Tidy dann ...

Falsch
Zitat<script type="text/javascript" scr="litebox-1.0/js/prototype.lite.js"></script>
<script type="text/javascript" scr="litebox-1.0/js/moo.fx.js"></script>
<script type="text/javascript" scr="litebox-1.0/js/litebox-1.0.js"></script>

Richtig
Zitat<script type="text/javascript" src="litebox-1.0/js/prototype.lite.js"></script>
<script type="text/javascript" src="litebox-1.0/js/moo.fx.js"></script>
<script type="text/javascript" src="litebox-1.0/js/litebox-1.0.js"></script>
Gruß,
Jörg

Nobody is perfect ... so don't call me Nobody

goodssale

#13
23 August 2008, 07:13:36 Letzte Bearbeitung: 23 August 2008, 07:19:32 von goodssale
oh mann.......
ist das peinlich, :shame: ich habe schon 1000te von bildern
verlinkt mir ist es auch nicht aufgefallen.

auch nach der änderung von scr auf src geht es immer noch nicht.

habe es mit / und ohne / versucht auch hier ohne erfolg.

Zitatund 100% sicher Huh das der Ordner litebox-1.0 im Root-Verzeichniss deines Webspaces liegt.

ja bin ich, habe noch mal einen screenshot in den anhang.
auch die my_header.php habe ich mal dazu.
Grüße Heinz

Banjo

#14
23 August 2008, 09:45:59
 :gruebel:  :gruebel:  :gruebel:

gibt es ein Body-Tag wie dieses ???


onload="initLightbox()"



schaue mal in der Litebox Doku...


goodssale

#15
23 August 2008, 10:30:41 Letzte Bearbeitung: 23 August 2008, 10:49:01 von goodssale
hallo banjo,

das steht in der doku.....:

Litebox is reverse compatible, you can drop the javascript files into your js folder without issues, WITH ONE EXCEPTION, you must add onload="initLightbox()" into your body tag. But anyway, here's a quick tutorial for those unfamilar.

kannst du mir sagen wo das hin muss.
Grüße Heinz

JoergK

#16
23 August 2008, 12:50:12
Hoi ;)

Der Aufruf muß, wie es in der Anleitung steht, in den <body>-Tag. Also z.B. beim mx-default ist das in der theme.html:

Aus
Code Auswählen
<body class="bodymain">

machst Du
Code Auswählen
<body class="bodymain" onload="initLightbox()">

Gruß,
Jörg

Nobody is perfect ... so don't call me Nobody

goodssale

#17
23 August 2008, 15:27:56
hallo jörg und banjo,
ein DICKES DANKESCHÖN an euch beiden :gott: jetzt geht es.

ich wünsche euch noch ein schönes wochenende, oder was noch übrig ist davon.


Grüße Heinz
Drucken
Nach oben Seiten1
Benutzer-Aktionen