. .
pragmaMx Support Forum 05 Dezember 2008, 12:38:45 *
Willkommen Gast. Bitte einloggen oder registrieren.


Einloggen mit Benutzername und Passwort
News:
Brauchen Sie Hilfe? Bitte nutzen Sie unsere Suchfunktion bevor Sie Beiträge oder Fragen ins Board schreiben! Viele Fragen wurden bereits gestellt und beantwortet. Danke!
 
Übersicht Hilfe Forenregeln / Boardrules
 
Suche
Seiten: [1]   Nach unten
Drucken
Autor Thema: [Erledigt] Lightbox-Effekt auf alle Bilder verwenden??  (Gelesen 1780 mal)
0 Mitglieder und 2 Gäste betrachten dieses Thema.
goodssale
weiss mehr
****
Offline Offline

Geschlecht: Männlich
Beiträge: 264



WWW
« am: 20 August 2008, 12:15:55 »

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:

Zitat
Was 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.
« Letzte Änderung: 23 August 2008, 15:46:45 von JoergK » Gespeichert


JoergK
Administrator
******
Offline Offline

Geschlecht: Männlich
Beiträge: 1.931



« Antworten #1 am: 20 August 2008, 12:39:38 »

Hoi Wink

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

Gruß,
Jörg

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

Hier noch was zum Lesen und Lernen
HTML, JavaScript & CSS: SelfHTML
PHP: SelfPHP und PHP-Handbuch
MySQL: MySQL 5.1 Handbuch
goodssale
weiss mehr
****
Offline Offline

Geschlecht: Männlich
Beiträge: 264



WWW
« Antworten #2 am: 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:
Zitat
Parse 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 bitte
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";
Gespeichert


siggi
Spezialist
*****
Offline Offline

Geschlecht: Männlich
Beiträge: 769



WWW
« Antworten #3 am: 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 ...  biggrin
Gespeichert




Damit eine Webseite ensteht, benutzt man ein Webseitenentstehungsgerät.
Local OS: Linux-Ubuntu 8.04 LTS Hardy Heron • Web: www.pragmatized.com
goodssale
weiss mehr
****
Offline Offline

Geschlecht: Männlich
Beiträge: 264



WWW
« Antworten #4 am: 21 August 2008, 07:09:29 »

hallo siggi,
habe die klammern gemacht geht aber trotzdem nicht. cry_smile

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

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.

 
Gespeichert


siggi
Spezialist
*****
Offline Offline

Geschlecht: Männlich
Beiträge: 769



WWW
« Antworten #5 am: 21 August 2008, 14:07:09 »

Zitat
bin ich blöd oder was

Da sage ich nichts zu biggrin

Nur folgendes :

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

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

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


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




Damit eine Webseite ensteht, benutzt man ein Webseitenentstehungsgerät.
Local OS: Linux-Ubuntu 8.04 LTS Hardy Heron • Web: www.pragmatized.com
goodssale
weiss mehr
****
Offline Offline

Geschlecht: Männlich
Beiträge: 264



WWW
« Antworten #6 am: 21 August 2008, 15:13:53 »

ok, das mit dem PMZ TEMPLATESYSTEM habe ich überlesen rougi
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>




* litebox.JPG (27.11 KB, 782x261 - angeschaut 86 Mal.)
Gespeichert


siggi
Spezialist
*****
Offline Offline

Geschlecht: Männlich
Beiträge: 769



WWW
« Antworten #7 am: 21 August 2008, 17:48:55 »

Zitat
habe es installiert und jetzt geht es, echt coole themes vielen dank.

Bitte. Weiterer Support dazu im pragmatized-Forum   highfive


Zitat
aber 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.

Gespeichert




Damit eine Webseite ensteht, benutzt man ein Webseitenentstehungsgerät.
Local OS: Linux-Ubuntu 8.04 LTS Hardy Heron • Web: www.pragmatized.com
siggi
Spezialist
*****
Offline Offline

Geschlecht: Männlich
Beiträge: 769



WWW
« Antworten #8 am: 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   biggrin   
Gespeichert




Damit eine Webseite ensteht, benutzt man ein Webseitenentstehungsgerät.
Local OS: Linux-Ubuntu 8.04 LTS Hardy Heron • Web: www.pragmatized.com
JoergK
Administrator
******
Offline Offline

Geschlecht: Männlich
Beiträge: 1.931



« Antworten #9 am: 22 August 2008, 02:25:15 »

Hoi  Wink

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. Wink
Gespeichert

Gruß,
Jörg

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

Hier noch was zum Lesen und Lernen
HTML, JavaScript & CSS: SelfHTML
PHP: SelfPHP und PHP-Handbuch
MySQL: MySQL 5.1 Handbuch
goodssale
weiss mehr
****
Offline Offline

Geschlecht: Männlich
Beiträge: 264



WWW
« Antworten #10 am: 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??
Gespeichert


Banjo
öfter hier
**
Offline Offline

Geschlecht: Männlich
Beiträge: 45


WWW
« Antworten #11 am: 22 August 2008, 17:19:55 »

<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 Huh das der Ordner litebox-1.0 im Root-Verzeichniss deines Webspaces liegt... Huh

« Letzte Änderung: 22 August 2008, 17:39:53 von Banjo » Gespeichert
JoergK
Administrator
******
Offline Offline

Geschlecht: Männlich
Beiträge: 1.931



« Antworten #12 am: 23 August 2008, 02:49:00 »

Hoi Wink

Oh man, das hab selbst ich nicht gesehen rougi
... 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>
Gespeichert

Gruß,
Jörg

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

Hier noch was zum Lesen und Lernen
HTML, JavaScript & CSS: SelfHTML
PHP: SelfPHP und PHP-Handbuch
MySQL: MySQL 5.1 Handbuch
goodssale
weiss mehr
****
Offline Offline

Geschlecht: Männlich
Beiträge: 264



WWW
« Antworten #13 am: 23 August 2008, 07:13:36 »

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.

Zitat
und 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.


* litebox.jpg (12.33 KB, 431x239 - angeschaut 82 Mal.)
* my_header.php (2.67 KB - runtergeladen 39 Mal.)
« Letzte Änderung: 23 August 2008, 07:19:32 von goodssale » Gespeichert


Banjo
öfter hier
**
Offline Offline

Geschlecht: Männlich
Beiträge: 45


WWW
« Antworten #14 am: 23 August 2008, 09:45:59 »

 gruebel  gruebel  gruebel

gibt es ein Body-Tag wie dieses Huh


onload="initLightbox()"



schaue mal in der Litebox Doku...


Gespeichert
goodssale
weiss mehr
****
Offline Offline

Geschlecht: Männlich
Beiträge: 264



WWW
« Antworten #15 am: 23 August 2008, 10:30:41 »

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.

* index.html (3.37 KB - runtergeladen 43 Mal.)
« Letzte Änderung: 23 August 2008, 10:49:01 von goodssale » Gespeichert


JoergK
Administrator
******
Offline Offline

Geschlecht: Männlich
Beiträge: 1.931



« Antworten #16 am: 23 August 2008, 12:50:12 »

Hoi Wink

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: [Select]  
<body class="bodymain">

machst Du
Code: [Select]  
<body class="bodymain" onload="initLightbox()">

Gespeichert

Gruß,
Jörg

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

Hier noch was zum Lesen und Lernen
HTML, JavaScript & CSS: SelfHTML
PHP: SelfPHP und PHP-Handbuch
MySQL: MySQL 5.1 Handbuch
goodssale
weiss mehr
****
Offline Offline

Geschlecht: Männlich
Beiträge: 264



WWW
« Antworten #17 am: 23 August 2008, 15:27:56 »

hallo jörg und banjo,
ein DICKES DANKESCHÖN an euch beiden Sag Gott zu mir jetzt geht es.

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


Gespeichert


Seiten: [1]   Nach oben
Drucken
 
Gehe zu:  

Powered by SMF 1.1.7 | SMF © 2006-2008, Simple Machines LLC
design by hENNE, layout based on YAML