[kein Fehler] Slider für Header

chalu

Schüler

Beiträge: 101

Wohnort: irgendwo in Österreich

Beruf: IT

Paypal:

1

Montag, 27. September 2010, 14:38

Slider für Header

Hallo Leute,

hab mal ein wenig ein kniffliges Problem

Möchte auf meiner Seite einen Slider mit ca. 5 Bilder für die Headergrafik.

In einem anderen Eintrag hab ich gesehen dass darauf verwiesen wird: http://nivo.dev7studios.com/
Und auch in etwa wo was angepasst werden muss.

Soweit so gut. Nun steht es aber mit meinen Kenntnissen leider schon wieder an

Möchte das Ganze im Template Desertstorm umsetzen.

Kann mir jemand erklären wo ich was machen muss um das Ganze zum laufen zu bringen !?

danke schon mal im Voraus für die Hilfe!

Chalu

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »chalu« (7. Oktober 2010, 22:33)

Zum Seitenanfang

blu

cms2day Projekt Spender

Beiträge: 256

Paypal:

2

Montag, 27. September 2010, 14:56

Du meinst von A-Z erklären? Oder nur bei "Kleinigkeiten" helfen? Du arbeitest in der IT und hast von so etwas keine Ahnung? Ein bisschen HTML muss man doch können, denn mehr ist das nicht. Der Slider ist zwar toll, aber es ist gibt noch bessere, allein aus dem Grund weil du ihn komplett selber "stylen" musst, was für Anfänger nicht allzu leicht ist.

MfG blu

Zum Seitenanfang

chalu

Schüler

Beiträge: 101

Wohnort: irgendwo in Österreich

Beruf: IT

Paypal:

3

Montag, 27. September 2010, 15:28

IT muss ja nichts mit Webdesign zu tun haben ?!
Dies ist nur reines privat Vergnügen.

Bin da mehr im Server / Storage / Kundenbereich zu Hause

Back to Topic:
Wenn ich eine Komplettanleitung bekomme bin ich niemanden böse, aber wenn es nur ein kleiner Denkanstoss ist kann ich mich auch zurecht finden (hoffe ich). Bin ja Wissbegierig und will ja was Lernen ...

Um von bestehender Geschichte mal auszugehen (bin auch gerne für andere Lösungen offen):
hier gibts 1x CSS Datei und die JS Datei.

Irgendwo muss ich ja der bestehenden Seite sagen dass er auf diese beiden Dateien zugreiffen soll, oder ?!

Also für etwas Hilfe bin ich sehr dankbar

lg chalu

Zum Seitenanfang

Blyawon

Fortgeschrittener

Beiträge: 300

CMS Version: 3.9.2

Wohnort: Deutschland

Beruf: Art Director Digital Experience

Paypal:

4

Montag, 27. September 2010, 17:17

http://cssglobe.com/post/4004/easy-slide…gin-for-sliding

Da der easyslider ist wie der Name schon sagt sehr einfach einzubauen. Schau dir mal die beispiel index.html an und bau die Codes bei dir genau so ein.

Gruß

fgampert.de

Zum Seitenanfang

chalu

Schüler

Beiträge: 101

Wohnort: irgendwo in Österreich

Beruf: IT

Paypal:

5

Montag, 27. September 2010, 21:16

wenn ich mir die datei so ansehe stehen da 2 codes:

Usage
$(document).ready(function(){ $("#slider").easySlider(); });

CSS
#slider{} #slider ul, #slider li{ margin:0; padding:0; list-style:none; } #slider li{ width:696px; height:241px; overflow:hidden; } #prevBtn, #nextBtn{ display:block; width:30px; height:77px; position:absolute; left:-30px; top:71px; } #nextBtn{ left:696px; } #prevBtn a, #nextBtn a{ display:block; width:30px; height:77px; background:url(images/btn_prev.gif) no-repeat 0 0; } #nextBtn a{ background:url(images/btn_next.gif) no-repeat 0 0; }

die css geschichte bau ich denk ich mal im main.css ein oder ?! und wo mach ich dann die usage geschichte hin ??

Danke im Voraus

Chalu

Zum Seitenanfang

chalu

Schüler

Beiträge: 101

Wohnort: irgendwo in Österreich

Beruf: IT

Paypal:

6

Montag, 27. September 2010, 22:27

So ich gebe mich geschlagen, ich brings nicht hin !

Wurmt mich zwar etwas dass es nicht funktioniert, aber irgendwie weis ich nicht welchen teil ich wo hin machen soll. und indem ich mich jetzt 2 stunden gespielt habe , und auch keine passende Anleitung im Netz gefunden habe, werd ich es jetzt lassen (irgendwie hab ich da jetzt keinen Nerv mehr mich noch mehr zu Ärgern).

Ich und bestimmt auch einige Andere so erfahrene User wie ich

wären sehr dankbar wenn sich jemand die Mühe machen könnte und eine kurze Anleitung erstellen könnte, wo welche Codeschnipsel hin gehört.

Denke mal Copy & Paste kann ja jeder .. und die Links für die Bilder anpassen ist auch zu schaffen ...
Aber alles andere ... UiUiUi

Danke im Voraus

Chalu

Zum Seitenanfang

Blyawon

Fortgeschrittener

Beiträge: 300

CMS Version: 3.9.2

Wohnort: Deutschland

Beruf: Art Director Digital Experience

Paypal:

7

Dienstag, 28. September 2010, 07:01

Ja ich mache es nacher, nach der Schule.

fgampert.de

Zum Seitenanfang

chalu

Schüler

Beiträge: 101

Wohnort: irgendwo in Österreich

Beruf: IT

Paypal:

8

Dienstag, 28. September 2010, 08:23

Danke ... das ist echt toll von dir !!!
Freu mich schon drauf !!

Zum Seitenanfang

Blyawon

Fortgeschrittener

Beiträge: 300

CMS Version: 3.9.2

Wohnort: Deutschland

Beruf: Art Director Digital Experience

Paypal:

9

Dienstag, 28. September 2010, 14:25

Soo...

Ok, wenn du es nach der Anleitung nicht schaffen solltest mache ich ein Videotutorial.

Den easyslider hier runterladen: Klick
Die heruntergeladene Datei entpacken.
Via filezilla auf deinem Webspace zum template-Verzeichnis gehen, dort in den css-images und js Ordner die Dateien aus der entpackten Datei rein kopieren.
Die index.html Datei vom Template-Verzeichnis herunterladen und in einem geeigneten Editor, wie z.B. PSPad, öffnen.
Die 01.html Datei aus dem entpackten easyslider-Verzeichnis öffnen.

Quellcode

<script type="text/javascript" src="http://www.DEINEDOMAIN.de/includes/templates/DEINTEMPLATENAME/js/jquery.js"></script>
<script type="text/javascript" src="http://www.DEINEDOMAIN.de/includes/templates/DEINTEMPLATENAME/js/easySlider1.5.js"></script>
<script type="text/javascript">
	$(document).ready(function(){	
		$("#slider").easySlider();
	});	
</script>

Diese Zeilen in deiner index.html nach dem anfangenden <head> bzw. vor dem schließenden </head> reinkopieren. Die Pfade müssen dementsprechend angepasst werden.

Diese Zeilen:

Quellcode

	<div id="slider">
		<ul>				
 		<li><a href="#"><img src="BILDPFAD" alt="BILDALTERNATIVNAME" /></a></li>
 		<li><a href="#"><img src="BILDPFAD" alt="BILDALTERNATIVNAME" /></a></li>
 		<li><a href="#"><img src="BILDPFAD" alt="BILDALTERNATIVNAME" /></a></li>
 		<li><a href="#"><img src="BILDPFAD" alt="BILDALTERNATIVNAME" /></a></li>
 		<li><a href="#"><img src="BILDPFAD" alt="BILDALTERNATIVNAME" /></a></li>		 
		</ul>
	</div>

Müssen hinter dem anfangenden <body> Tag bzw. vor dem schließenden </body> Tag, in deinen Header rein.
Bei Bildpfad einfach den direkten Pfad zum BIld angeben, wie z.B. oben gemacht:

	Quellcode
1	http://www.DEINEDOMAIN.de/includes/templates/DEINTEMPLATENAME/images/BILD.jpg

Oder das Bild bei z.B. www.apload.de hochladen und dann den Link zum Bild eintragen.
bei

	Quellcode
1	<a href="#"></a>

kannst du statt dem

	Quellcode
1	#

auch einen Link eingeben welcher auf das Bild gesetzt wird.

Die CSS Datei musst du nicht einbinden kannst du aber falls du Formatierungen an den Buttons oder sonstiges vornehmen willst.

	Quellcode
1	<link rel="stylesheet" type="text/css" href="http://www.DEINEDOMAIN.de/includes/templates/DEINTEMPLATENAME/css/screen.css" />

Jetzt noch die index.html speichern und wie die anderen Dateien hochladen.
Fertig!

Ich denke es dürfte so funktionieren, ich habe das alles jetzt nicht getestet, aber es müsste so zu 90% funktionieren wenn ich keinen Flüchtigkeitsfehler beim schreiben gemacht habe.
Wenn du es so nicht kapierst mache ich mal noch für alle User ein Videotutorial.

Gruß
Florian

PS: @emet: ich frage mich warum beim cms2day Forum immer bei Opera der Browser abstürzt nachdem ich zuerst auf Vorschau und dann auf Abesenden geklickt habe, gut dass ich das schon weiß so mache ich mir erst immer eine Sicherheitskopie vom geschrieben

fgampert.de

Zum Seitenanfang

chalu

Schüler

Beiträge: 101

Wohnort: irgendwo in Österreich

Beruf: IT

Paypal:

10

Dienstag, 28. September 2010, 14:58

Hallo,

vielen lieben Dank schon mal für die Mühe die du dir da machst.
Hab das mal so gemacht, wie du es beschrieben hast, hab da nur ein "kleines" Problem

Irgendwie muss ich doch noch sagen, dass das Ganze nicht über der Seite dargestellt werden soll, sondern in dem Bereich wo der Header momentan ist, oder ?!

Um es dir besser vorzustellen was ich mein kannst auch auf www.chalu.at schauen, dann siehst was ich meine

Falls es einen Unterschied macht, ich verwende das Template Desertstorm.

Sorry dass ich nochmals so blöd Nachfrage!

Zum Seitenanfang

cms2day Forum - Community & Support rund ums cms2day

Slider für Header

Soo...

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Ähnliche Themen