Installation von Lightbox JS v2.0

Hugo

Hallo zusammen,

bin absoluter Wordpress Neuling und würde um eine detaillierte Anweisung bitten, wie man das zugegebenermaßen geniale Plugin Lightbox installiert.

Danke für Hilfestellung.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SuMu

es steht ganz detailliert auf der Plugin-Seite:confused:...
Was verstehst du denn genau nicht?
Vielleicht wäre das hier besser für dich....

Hugo

Zitat von SuMu

es steht ganz detailliert auf der Plugin-Seite:confused:...
Was verstehst du denn genau nicht?
Vielleicht wäre das hier besser für dich....

Ich bin - wie gesagt - blutiger Anfänger.
Ich verstehe weder Part 1 noch Part 2. wo soll man das denn editieren können?

Zitat

Part 1 - Setup
Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header. <script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles). <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.
Part 2 - Activate
Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example: <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Optional: Use the title attribute if you want to show a caption.
If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example: <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

SuMu

dann nimm das genannte Plugin, welches ich oben unter "hier" verlinkt habe, da musst du nichts in den templates einbauen

Hugo

Zitat von SuMu

dann nimm das genannte Plugin, welches ich oben unter "hier" verlinkt habe, da musst du nichts in den templates einbauen

Danke, das habe ich hinbekommen, aber dafür sieht das nichtmal annähernd so gut aus wie das echte.
Da gibts ne Hardwarefressende, aber wunderschöne Animation und hier...gar nichts.

SuMu

Zitat von Hugo

aber dafür sieht das nichtmal annähernd so gut aus wie das echte.
Da gibts ne Hardwarefressende, aber wunderschöne Animation und hier...gar nichts.

Tja, die Anleitung, wie du das Plugin nutzen musst, hast du oben gepostet, du musst eben deine header.php in deinem theme-ordner anpassen und zwar so, wie oben beschrieben.

dafür benötigst du einen editor, zb weaverslave oder ein texteditor, der tut es auch.

Das hier packst du in deine header.php in deinem themeordner:

Code

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>

kurz vor dem </head>

Hugo

Oh Mann, ist das ein komplizierter Kram.

Wenn ich die header.php aus dem wp-content Ordner und dem Ordner des Designs ziehe, sehe ich keinen HTML Text, auch kein </head>

grufthopser

Ich setze die hier ein: http://www.m3nt0r.de

Zum einen schöne Animation und auf der anderen Seite auch kein gepfriemel...

pauLee

Zitat von SuMu

Das hier packst du in deine header.php in deinem themeordner:

Code

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>

kurz vor dem </head>

Ich muß das Thema nochmal aufgreifen ...

Ich habe besagten Code in die header.php eingefügt und gespeichert. Bei mir öffnets die Bilder aber nur in einem neuen Fenster. Was mach ich denn da noch falsch?

Das hier ist meine header.php

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]XHTML namespace[/url]">
<head profile="[url=http://gmpg.org/xfn/11]XFN 1.1 profile[/url]">


<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />


    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
    
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->


    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>




<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>




</head>


<body>


<div id="wrap">


<div id="header">


<small><?php bloginfo('description'); ?></small>
</div>


<!-- unComment only when you want a navigation bar like my site


how to use?
<a href="link">Linkname</a> &bull; <a href="link2">Linkname2</a> &bull;


just remember link<space>&bull;<space>link


try not to exceeed 1 line, it may messed up.


simple rite? =D


<div id="navigation">
<a href="#">Link 1</a> &bull; 
<a href="#">Link 2</a> &bull; 
<a href="#">Link 3</a> &bull; 
<a href="#">Link 4</a> &bull; 
<a href="#">And so on...</a>
</div>
-->


<!-- end of header -->

Alles anzeigen

Das rel="lightbox" Attribut ist schließlich auch gesetzt. Wo steckt der Fehler?

mfitzen

Ein Link wäre sehr hilfreich bzw. wenn es um den Link in Deiner Signatur geht, da ist kein einziges Bild verlinkt.

pauLee

Zitat von infected

Ein Link wäre sehr hilfreich bzw. wenn es um den Link in Deiner Signatur geht, da ist kein einziges Bild verlinkt.

Du hast Recht ... aber hier das Beispiel:

test_lightbox

Volker Hepp

Ich setze die hier ein: m3nt0rs weblog

Zum einen schöne Animation und auf der anderen Seite auch kein gepfriemel...
__________________
Gruß Grufthopser

Schmeiss das Plug raus und nimm das o.g.. Hat zwar auch ein, zwei Mäckchen, läuft aber problemloser als das Original

Gruss, Volker

pauLee

Zitat von Volker Hepp

Ich setze die hier ein: m3nt0rs weblog
Zum einen schöne Animation und auf der anderen Seite auch kein gepfriemel...
__________________
Gruß Grufthopser
Schmeiss das Plug raus und nimm das o.g.. Hat zwar auch ein, zwei Mäckchen, läuft aber problemloser als das Original
Gruss, Volker

Hab ich auch schon probiert aber ohne Erfolg.

Hat denn keiner eine Idee woran es liegen könnte?

Volker Hepp

Zitat von pauLee

Hab ich auch schon probiert aber ohne Erfolg.
Hat denn keiner eine Idee woran es liegen könnte?

Hast Du denn vorher das andere Plug rausgeschmissen? Bei mir lief es ohne Probleme durch...

Gruss, Volker

pauLee

Zitat von Volker Hepp

Hast Du denn vorher das andere Plug rausgeschmissen? Bei mir lief es ohne Probleme durch...
Gruss, Volker

Ja hab ich. Wie ich diese Variante der Lightbox verstehe muß ich doch nur ein Bild einfügen und schon wird es vom Plugin in das Overlay eingebunden, oder?

Es funktioniert einfach nicht, siehe hier ... test_lightbox

Volker Hepp

Richtig, die Bilder werden im Normalfall automatisch erkannt, es gibt da mal hin und wieder ein paar unmotivierte Aussetzer und Dinge, die nicht ganz schlackenfrei laufen.

Hast Du denn beim Deinstallieren des Plugins auch geschaut, oder der Code überall sauber draussen ist. Ich kann mich daran erinnern, dass es beim Säubern Probleme gibt...

Gruss, Volker

Olafb

pauLee
Ich weiß nicht wie das bei dir reinkommt aber da scheint es einen Konflikt mit dem Tracker zu geben. Jedenfalls belegt das das onclick, dadurch kann nun nicht das onclick der Thickbox ausgeführt werden. Hier mal der Code:

HTML

<a href="http://www.playboi.de/blog/pix/Saloppe07/1.jpg" 
class="thickbox" title="{holidays} xcYour caption in here" 
onclick="javascript:urchinTracker('/file/blog/pix/Saloppe07/1.jpg?ref=http_//forum.wordpress-deutschland.org/plugins-und-widgets/15205-installation-von-lightbox-js-v2-0-a-2.html');">

pauLee

Zitat von Olafb
pauLee
Ich weiß nicht wie das bei dir reinkommt aber da scheint es einen Konflikt mit dem Tracker zu geben. Jedenfalls belegt das das onclick, dadurch kann nun nicht das onclick der Thickbox ausgeführt werden. Hier mal der Code:
HTML
<a href="http://www.playboi.de/blog/pix/Saloppe07/1.jpg" 
class="thickbox" title="{holidays} xcYour caption in here" 
onclick="javascript:urchinTracker('/file/blog/pix/Saloppe07/1.jpg?ref=http_//forum.wordpress-deutschland.org/plugins-und-widgets/15205-installation-von-lightbox-js-v2-0-a-2.html');">

Ja, mit der Thickbox hab ich kurz rumgespielt...aber die funktioniert auch nicht vernünftig.

Ich habe jetzt mal zwei verschieden Lightbox-Plugins gleichzeitig aktiviert. Das eine ist das was ich eigentlich bevorzuge (Lightbox 2.0 for WordPress) und das andere was angeblich so eays funktionieren soll (m3nt0rs)

Damit bekomme ich das Overlay zumindest hin aber die Navigatoren (Rev, Next und Close) sind nicht zu sehen.
Das sagt mir aber, das mein bevorzugtes Plugin selber nicht richtig läuft und wohl auf die Funktionalitäten von m3nt0rs zurückgreift.

Hat sich mal jemand meien header.php angeschaut, ist die korrekt?

Olafb

Entscheide dich für ein Plugin, aktivier nur die Eine, dann shen wir weiter...

Was jetzt nicht stimmt:
http://www.playboi.de/blog/wp-conten…s/prevlabel.gif
existiert nicht, also alle Bilder!
Der Tracker schreibt immer noch da rein, mich wundert das es damit überhaut klappt!

pauLee

Zitat von Olafb

Entscheide dich für ein Plugin, aktivier nur die Eine, dann shen wir weiter...
Was jetzt nicht stimmt:
http://www.playboi.de/blog/wp-conten…s/prevlabel.gif
existiert nicht, also alle Bilder!
Der Tracker schreibt immer noch da rein, mich wundert das es damit überhaut klappt!

Ich hab jetzt nur mein bevorzugtes Plugin aktiviert. Das funktioniert jetzt halbwegs ... ich bekomme von zwei Bilder höchtens eins geladen, beim zweiten bleibt es einfach hängen und die Navigatoren fehlen immernoch.

Ich hab die header.php jetzt noch ein bischen angepasst.

Code

<link rel="stylesheet" href="wp-content/plugins/lightbox/css/lightbox.css" type="text/css" media="screen" />
    
<script type="text/javascript" src="wp-content/plugins/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="wp-content/plugins/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="wp-content/plugins/lightbox/js/lightbox.js"></script>

Kleines Update: jetzt werden beide Bilder wieder geladen ... hat das Ding Ladehemmung?

Ich erklär mal kurz, warum ich das Plugin nutzen will: bei dem wird nicht jedes Bild in ein Overlay gepackt, sondern nur die die ich auch will, außerdem habe ich dafür einen schönen Button mit dem ich den Code nicht immer selber eintippen muß.
Gibts bezüglich dieser Anforderugn vielleicht ein anderes Plugin - es ist mir bisher zu unzuverlassig.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Installation von Lightbox JS v2.0

Jetzt mitmachen!