Lightbox-Script... nur kein plan wie?

Diskutiere Lightbox-Script... nur kein plan wie? im Internet Forum Forum im Bereich Software Forum; hey mein mitbewohner und ich haben ne kleine internet präsenz über unsere pilgertour nach wacken. diese besteht eigentlich nur aus html... soweit...
Third-Eye

Third-Eye

Threadstarter
Mitglied seit
27.06.2010
Beiträge
120
Alter
32
Standort
schleswig-holstein
hey
mein mitbewohner und ich haben ne kleine internet präsenz über unsere pilgertour nach wacken.
diese besteht eigentlich nur aus html... soweit ja nicht weiter schwer.
nun möchte ich die bilder nur gerne hochladen, da ich diese gerne mit nem Lightbox-Script haben möchte, ich aber keinen plan davon habe wie ich dieses einbinden soll und auch eigentlich keine erfahrung in diese richtung habe, bitte ich hier um hilfe.

die seite ist: www.wir-pilgern-wacken.de.tc

ist schlicht und einfach... aber soweit reicht es mir... uns fehlen nur noch die bilder.

ich hoffe ihr könnt mir helfen.

mfg. Timmey
 
G

Ghost in the Shell

Gast
Lightbox Scripts sind eigentlich immer JavaScript basiert, welche dann auf bestimmte tags/ids/classes triggern. Damit du die ganzen Funktinen nich selber schreiben must gibt es einige Frameworks die dir das abnehmen. Ich persönlich verwende fast nurnoch jQuery.

Hier sollte eigentlich alles ausreichend beschrieben sein: http://leandrovieira.com/projects/jquery/lightbox/
 
Third-Eye

Third-Eye

Threadstarter
Mitglied seit
27.06.2010
Beiträge
120
Alter
32
Standort
schleswig-holstein
irgendwie bekomm ichs nicht hin...
könnte mir das jemand kurz coden? oder so??? wenn ich die daten sende oder so?
 
H

HWFlo

Mitglied seit
04.09.2005
Beiträge
5.271
Alter
32
Beweis doch noch bisschen Ausdauer ;)
Zwischen der Antwort von Ghost in the Shell und deiner Nachfrage liegen ja gerade mal rund 30 Minuten.

Wenn es nicht drum geht was zu lernen dann nehm doch einfach ein fertiges Script. Die gibt es bestimmt (evtl. Google: "jquery lightbox").

Ansonsten am Besten mal deinen aktuellen Code posten so das man dich führen kann ohne dir die Arbeit abzunehmen. Dabei lernt man mehr.
 
G

Ghost in the Shell

Gast
Natürlich könnten wir das für dich übernehmen aber wie HWFlo schon richtig sagt lernst du dabei recht wenig. Beim nächsten Problem bist du dann wieder auf uns angewiesen. BTW finde ich es gefährlich anderen Leuten die FTP Daten zu geben da solltest du mit mehr Vorsicht rangehen.
 
Third-Eye

Third-Eye

Threadstarter
Mitglied seit
27.06.2010
Beiträge
120
Alter
32
Standort
schleswig-holstein
klar... stimmt auch wieder...


hier ist der code der seite... wo muss ich nun nur was reinklatschen?

Code:
<HTML>
<HEAD>
<TITLE>Wir-pilgern-Wacken.de.tc</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"><style type="text/css">
<!--
.Stil1 {color: #FFFFFF}
.Stil2 {
	font-size: 18px;
	color: #990000;
}
-->
</style></HEAD>
<BODY BGCOLOR=#000000 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<center>
  <TABLE WIDTH=600 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=7>
			<div align="center"><IMG SRC="Bilder/index_01.gif" WIDTH=600 HEIGHT=225 ALT=""></div></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="Bilder/index_02.gif" WIDTH=23 HEIGHT=39 ALT=""></TD>
		<TD>		  <a href="http://www.gratis-gaestebuch.de/137492.html"><IMG SRC="Bilder/index_03.gif" ALT="" WIDTH=183 HEIGHT=39 border="0"></a></TD>
		<TD>
			<a href="Logbuch.html"><IMG SRC="Bilder/index_04.gif" ALT="" WIDTH=100 HEIGHT=39 border="0"></a></TD>
		<TD>
			<a href="Fotos.html"><IMG SRC="Bilder/index_05.gif" ALT="" WIDTH=78 HEIGHT=39 border="0"></a></TD>
		<TD>
			<a href="Videos.html"><IMG SRC="Bilder/index_06.gif" ALT="" WIDTH=86 HEIGHT=39 border="0"></a></TD>
		<TD>
			<a href="ueber uns.html"><IMG SRC="Bilder/index_07.gif" ALT="" WIDTH=105 HEIGHT=39 border="0"></a></TD>
		<TD>
			<IMG SRC="Bilder/index_08.gif" WIDTH=25 HEIGHT=39 ALT=""></TD>
	</TR>
	<TR>
		<TD><a href="http://www.wacken.com"><img src="http://www.winboard.org/forum/woa logo mini.jpg" alt="W:O:A" width="320" height="133" border="0"></a></TD>
		<TD COLSPAN=5><div align="center">
		  <p><strong><span class="Stil2">Fotos</span></strong></p>
		  <p class="Stil1">coming soon!!!! </p>
		  <p align="left"> </p>
		</div></TD>
		<TD><a href="http://www.wacken.com"><img src="http://www.winboard.org/forum/woa logo mini.jpg" alt="W:O:A" width="320" height="133" border="0"></a></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="Bilder/index_12.gif" WIDTH=23 HEIGHT=29 ALT=""></TD>
		<TD COLSPAN=5><div align="center"><strong><span class="Stil1">Design by Timmey - Code by Timmey </span></strong></div></TD>
		<TD> 
			<IMG SRC="Bilder/index_14.gif" WIDTH=25 HEIGHT=29 ALT=""></TD>
	</TR>
</TABLE>
</center>
</BODY>
</HTML>
 
G

Ghost in the Shell

Gast
Also zunächst musst du erstmal die beiden JavaScript Dateien einbinden um sie zu verwenden. Dazu kommt in die <head></head> Tags folgender Code:

PHP:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />
Das setzt natürlich voraus das du einmal "jquery.js" an sich schonmal runtergeladen hast und in den Ordner "js" gepackt hast. Zum anderen muss in dem Ordner "js" noch die Datei "jquery.lightbox-0.4.js" rein. Die CSS Datei für die Lightbox sollte im Ordner "css" liegen und den Namen "jquery.lightbox-0.4.css" tragen.

So jetzt hast du erstmal Zugriff auf das Framework und das Plugin dazu. Jetzt musst du nurnoch Auslöse Events festlegen. Das heißt das du dem JavaScript beibringst das es reagiert wenn der Nutzer auf eine bestimmte Sorte von Element (hier ein Link) drückt. Das jeweilige JavaScript sieht dann folgendermasen aus:

PHP:
<script type="text/javascript">
$(function() {
	$('a[@rel*=lightbox]').lightBox(); 
});
</script>
Dieser Code sollte auch in den <head></head> Teil deiner Seite, kann aber auch an beliebiger stelle stehen. Die JavaScript Funktion greift auf alle Links zu die den rel Tag "lightbox" tragen. Wenn du also auf eine Lightbox verlinken willst dann sollte der Code so aussehen:

PHP:
<a href="bild.jpg" rel="lightbox">verlinktes Element</a>
Bevor du dich an Lightbox Galerien probierst versuch erstmal das Beispiel zum Laufen zu bringen danach ist der Schritt zur Galerie trivial :)
 
Third-Eye

Third-Eye

Threadstarter
Mitglied seit
27.06.2010
Beiträge
120
Alter
32
Standort
schleswig-holstein
mmmh.. irgendwie hab ich da n fehler drin...

hab nun die aktuelle version, also 0.5 runtergeladen

hier nochmal der code nun:

Code:
<HTML>
<HEAD>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />  

<script type="text/javascript">
$(function() {
    $('a[@rel*=lightbox]').lightBox(); 
});
</script>  


<TITLE>Wir-pilgern-Wacken.de.tc</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"><style type="text/css">
<!--
.Stil1 {color: #FFFFFF}
.Stil2 {
	font-size: 18px;
	color: #990000;
}
-->
</style></HEAD>
<BODY BGCOLOR=#000000 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<center>
  <TABLE WIDTH=600 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=7>
			<div align="center"><IMG SRC="Bilder/index_01.gif" WIDTH=600 HEIGHT=225 ALT=""></div></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="Bilder/index_02.gif" WIDTH=23 HEIGHT=39 ALT=""></TD>
		<TD>		  <a href="http://www.gratis-gaestebuch.de/137492.html"><IMG SRC="Bilder/index_03.gif" ALT="" WIDTH=183 HEIGHT=39 border="0"></a></TD>
		<TD>
			<a href="Logbuch.html"><IMG SRC="Bilder/index_04.gif" ALT="" WIDTH=100 HEIGHT=39 border="0"></a></TD>
		<TD>
			<a href="Fotos.html"><IMG SRC="Bilder/index_05.gif" ALT="" WIDTH=78 HEIGHT=39 border="0"></a></TD>
		<TD>
			<a href="Videos.html"><IMG SRC="Bilder/index_06.gif" ALT="" WIDTH=86 HEIGHT=39 border="0"></a></TD>
		<TD>
			<a href="http://pilgertourwacken.bplaced.net/filemanager/pilgertour 2/ueber uns.html"><IMG SRC="Bilder/index_07.gif" ALT="" WIDTH=105 HEIGHT=39 border="0"></a></TD>
		<TD>
			<IMG SRC="Bilder/index_08.gif" WIDTH=25 HEIGHT=39 ALT=""></TD>
	</TR>
	<TR>
		<TD><a href="http://www.wacken.com"><img src="http://www.winboard.org/forum/woa logo mini.jpg" alt="W:O:A" width="320" height="133" border="0"></a></TD>
		<TD COLSPAN=5><div align="center">
		  <p><strong><span class="Stil2">Fotos</span></strong></p>
		  <p class="Stil1">
		  
		  </p>
		  <p align="left"> </p>
		</div></TD>
		<TD><a href="http://www.wacken.com"><img src="http://www.winboard.org/forum/woa logo mini.jpg" alt="W:O:A" width="320" height="133" border="0"></a></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="Bilder/index_12.gif" WIDTH=23 HEIGHT=29 ALT=""></TD>
		<TD COLSPAN=5><div align="center"><strong><span class="Stil1">Design by Timmey - Code by Timmey </span></strong></div></TD>
		<TD> 
			<IMG SRC="Bilder/index_14.gif" WIDTH=25 HEIGHT=29 ALT=""></TD>
	</TR>
</TABLE>
</center>
</BODY>
</HTML>
 
G

Ghost in the Shell

Gast
Naja auf jedenfall solltest du das rel="lightbox" Tag bei den gewünschten Links zu den Bildern noch einfügen.
 
G

Ghost in the Shell

Gast
Naja du hat doch bestimmt die Fotos schon da die du einfügen willst oder? Weil bisher ist ja noch keines deiner Fotos im Quellcode zu sehen :) Wenn du eins einfügen willst dann beispielsweise so:
PHP:
<a href="http://www.socialmediamarketing.com/blog/wp-content/uploads/2009/08/CrashTestDummy-2-8544b.jpg" rel="lightbox">TEST</a>
Die Verlinkung kann auch relativ gemacht werden :)
 
Third-Eye

Third-Eye

Threadstarter
Mitglied seit
27.06.2010
Beiträge
120
Alter
32
Standort
schleswig-holstein
aaah... danke...
und das muss ich nun mit jedem bild machen?!
 
G

Ghost in the Shell

Gast
Eigentlich schon, ist leider der Nachteil wenn alles statisches HTML ist :)
 
G

Ghost in the Shell

Gast
sicher das die js Dateien und die css Dateien wirklich in den richtigen Verzeichnissen liegt?
 
Third-Eye

Third-Eye

Threadstarter
Mitglied seit
27.06.2010
Beiträge
120
Alter
32
Standort
schleswig-holstein
ja eigentlich schon...

im ordner css hab ich: jquery.lightbox-0.5.css

und in js: jquery.js, jquery.lightbox-0.5.js, jquery.lightbox-0.5.min.js, jquery.lightbox-0.5.pack.js

oder hab ich nun irgendwo nich aufgepasst?


edit: sooo es klappt soweit nun schon ganz gut...
wie ist denn das wenn ich anstatt dass da z.B. "micha" als link steht ne verkleinerte version von dem bild ist? wie bekomm ich denn das hin?
 
Zuletzt bearbeitet:
G

Ghost in the Shell

Gast
Da hast du zwei Varianten. Entweder du erstellst zu jedem Bild gleich eine verkleinerte Variante mit, die du dann verlinkst oder du nutzt die "width" und "hight" vom "img" Tag. Allerdings wird bei der zweiten Variante das Bild immer in der vollen Größe geladen und es kann auch bei der Darstellung verzerrt werden. Deshalb würde ich dir Variante 1 empfehlen.
 
Third-Eye

Third-Eye

Threadstarter
Mitglied seit
27.06.2010
Beiträge
120
Alter
32
Standort
schleswig-holstein
achso... das ja eigentlich recht einfach... habs mir schon gedacht... dachte nur dass es ne andere bzw. einfachere möglichkeit gäbe^^


edit:
habs gerade mal versucht... aber irgendwie bekomm ich den code nicht so richtig hin... könntest mir dabei nochmal auf die sprünge helfen?
 
Zuletzt bearbeitet:
G

Ghost in the Shell

Gast
Du hast das img Tag falsch geschrieben :) das sollte so aussehen:

PHP:
<img src="http://pilgertourwacken.bplaced.net/filemanager/Fotos/klein/k-100_5871.JPG" />
Gewöhn dir außerdem mal an das ganze relativ zu verlinken das gibt dann keine Probleme falls du die URL mal änderst.
 
Third-Eye

Third-Eye

Threadstarter
Mitglied seit
27.06.2010
Beiträge
120
Alter
32
Standort
schleswig-holstein
cool danke... ganz großes danke!!!

nun hab ich da noch nen kleinen fehler...
und zwar hab ich nun 1 mal das erste bild und 4 mal das zweite... warum hab ich 4 mal das zweite bild?
und kann man irgendwie den blauen rahmen weg bekommen?

wäre dann auch erstmal meine letzte frage^^

Code:
<HTML>
<HEAD>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />  

<script type="text/javascript">
$(function() {
    $('a[@rel*=lightbox]').lightBox(); 
});
</script>  


<TITLE>Wir-pilgern-Wacken.de.tc</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"><style type="text/css">
<!--
.Stil1 {color: #FFFFFF}
.Stil2 {
	font-size: 18px;
	color: #990000;
}
-->
</style></HEAD>
<BODY BGCOLOR=#000000 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<center>
  <TABLE WIDTH=600 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=7>
			<div align="center"><IMG SRC="Bilder/index_01.gif" WIDTH=600 HEIGHT=225 ALT=""></div></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="Bilder/index_02.gif" WIDTH=23 HEIGHT=39 ALT=""></TD>
		<TD>		  <a href="http://www.gratis-gaestebuch.de/137492.html"><IMG SRC="Bilder/index_03.gif" ALT="" WIDTH=183 HEIGHT=39 border="0"></a></TD>
		<TD>
			<a href="Logbuch.html"><IMG SRC="Bilder/index_04.gif" ALT="" WIDTH=100 HEIGHT=39 border="0"></a></TD>
		<TD>
			<a href="Fotos.html"><IMG SRC="Bilder/index_05.gif" ALT="" WIDTH=78 HEIGHT=39 border="0"></a></TD>
		<TD>
			<a href="Videos.html"><IMG SRC="Bilder/index_06.gif" ALT="" WIDTH=86 HEIGHT=39 border="0"></a></TD>
		<TD>
			<a href="http://pilgertourwacken.bplaced.net/filemanager/pilgertour 2/ueber uns.html"><IMG SRC="Bilder/index_07.gif" ALT="" WIDTH=105 HEIGHT=39 border="0"></a></TD>
		<TD>
			<IMG SRC="Bilder/index_08.gif" WIDTH=25 HEIGHT=39 ALT=""></TD>
	</TR>
	<TR>
		<TD><a href="http://www.wacken.com"><img src="http://www.winboard.org/forum/woa logo mini.jpg" alt="W:O:A" width="320" height="133" border="0"></a></TD>
		<TD COLSPAN=5><div align="center">
		  <p><strong><span class="Stil2">Fotos</span></strong></p>
		  <p class="Stil1">
		  
		  <a href="http://pilgertourwacken.bplaced.net/filemanager/Fotos/100_5870.JPG" rel="lightbox"><img src="http://pilgertourwacken.bplaced.net/filemanager/Fotos/klein/k-100_5870.JPG" /> 
		  <a href="http://pilgertourwacken.bplaced.net/filemanager/Fotos/100_5871.JPG" rel="lightbox"><img src="http://pilgertourwacken.bplaced.net/filemanager/Fotos/klein/k-100_5871.JPG" />
		
		  </p>
		  <p align="left"> </p>
		</div></TD>
		<TD><a href="http://www.wacken.com"><img src="http://www.winboard.org/forum/woa logo mini.jpg" alt="W:O:A" width="320" height="133" border="0"></a></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="Bilder/index_12.gif" WIDTH=23 HEIGHT=29 ALT=""></TD>
		<TD COLSPAN=5><div align="center"><strong><span class="Stil1">Design by Timmey - Code by Timmey </span></strong></div></TD>
		<TD> 
			<IMG SRC="Bilder/index_14.gif" WIDTH=25 HEIGHT=29 ALT=""></TD>
	</TR>
</TABLE>
</center>
</BODY>
</HTML>
 
Zuletzt bearbeitet:
Thema:

Lightbox-Script... nur kein plan wie?

Lightbox-Script... nur kein plan wie? - Ähnliche Themen

  • Windows Script Fehler

    Windows Script Fehler: Hallo, Seit kurzem bekomme ich in regelmäßigen Abständen Error Meldungen von Windows Script Host in denen folgendes gesagt wird: Ich habe...
  • Windows Script Host

    Windows Script Host: Seit kurzen erscheint folgende Meldung: Windows Script Host Skript:C:/Users/Berthold/SysWOW64/qnHX98dp.vbs Zeile: 3 Zeichen: 1 Fehler: Das System...
  • Windows 7 Embedded - Zertifikate per Script importieren

    Windows 7 Embedded - Zertifikate per Script importieren: Hallo zusammen, und zwar habe ich eine Aufgabe erhalten an welcher ich etwas verzweifel weil ich mich mit dem Thema "Scripting" nicht so gut...
  • GELÖST Lightbox 2.0 automatisch ausführen

    GELÖST Lightbox 2.0 automatisch ausführen: Hallo Leute, ich möchte gerne Lightbox 2.0 so verwenden, dass ein Bild automatisch sich öffnet wenn jemand auf meine Seite kommt. Weiß jemand...
  • Wer kennt sich mit Lightbox 2 aus ?

    Wer kennt sich mit Lightbox 2 aus ?: Hallo Leute, ich habe mal nee frage und zwar suche ich jemanden der mir sagen kann wie ich mit Lightbox nee schöne Galerie erstellen kann für...
  • Ähnliche Themen

    • Windows Script Fehler

      Windows Script Fehler: Hallo, Seit kurzem bekomme ich in regelmäßigen Abständen Error Meldungen von Windows Script Host in denen folgendes gesagt wird: Ich habe...
    • Windows Script Host

      Windows Script Host: Seit kurzen erscheint folgende Meldung: Windows Script Host Skript:C:/Users/Berthold/SysWOW64/qnHX98dp.vbs Zeile: 3 Zeichen: 1 Fehler: Das System...
    • Windows 7 Embedded - Zertifikate per Script importieren

      Windows 7 Embedded - Zertifikate per Script importieren: Hallo zusammen, und zwar habe ich eine Aufgabe erhalten an welcher ich etwas verzweifel weil ich mich mit dem Thema "Scripting" nicht so gut...
    • GELÖST Lightbox 2.0 automatisch ausführen

      GELÖST Lightbox 2.0 automatisch ausführen: Hallo Leute, ich möchte gerne Lightbox 2.0 so verwenden, dass ein Bild automatisch sich öffnet wenn jemand auf meine Seite kommt. Weiß jemand...
    • Wer kennt sich mit Lightbox 2 aus ?

      Wer kennt sich mit Lightbox 2 aus ?: Hallo Leute, ich habe mal nee frage und zwar suche ich jemanden der mir sagen kann wie ich mit Lightbox nee schöne Galerie erstellen kann für...
    Oben