Antworten auf deine Fragen:
Neues Thema erstellen

Suche bestimmte Art von Slideshow

Kaycee

Noch nicht viel geschrieben

Ich habe auf der Seite http://www.powerbar.com eine Slideshow gesehen, die ich gerne auf meiner Seite einbinden würde. Ich bin seit längerem auf der Suche danach. Allerdings ohne Erfolg.

Vielleicht kann mir ja jemand weiterhelfen.
 

FlashSoft

Besserwisser

AW: Suche bestimmte Art von Slideshow

Dafür gibt es viele Möglichkeiten, entweder du setzt sowas in Flash oder in Javascript um. Willst du es nicht selber machen, dann wird es etwas schwieriger.

Also, nun mußt du es wissen, ob in Flash oder Javascript.

FlashSoft
 

Kaycee

Noch nicht viel geschrieben

AW: Suche bestimmte Art von Slideshow

Also ich würde das auch gerne in Javascript umsetzten. Allerdings habe ich zu wenig Ahnung bisher davon.

Wäre hilfreich, wenn es irgendwo ein Tutorial oder sowas geben würde allerdings hatte ich keins gefunden.
 

smaxle

Nicht mehr ganz neu hier

AW: Suche bestimmte Art von Slideshow

in 2 Minuten unter google auf Pos.4
Suche:image slider+javascript
kuckst Du hier:



lg
smaxle
 
Zuletzt bearbeitet:

cebito

undefined

AW: Suche bestimmte Art von Slideshow

Also ich würde das auch gerne in Javascript umsetzten. Allerdings habe ich zu wenig Ahnung bisher davon.

Wäre hilfreich, wenn es irgendwo ein Tutorial oder sowas geben würde allerdings hatte ich keins gefunden.

Das ist ziemlich einfach. Mach ein div mit einer bestimmten Größe und overflow:hidden und dort deine Bilder nebeneinander rein. Ein bisschen Javascript:

Code:
var scrollStep=[COLOR=Red]1[/COLOR];
var timer;

function scrollDivLeft(){
  clearTimeout(timer);
  d=document.getElementById('meineDivID');
  d.scrollLeft+=scrollStep;
  timer=setTimeout("scrollDivLeft()",[COLOR=Red]10[/COLOR]);
}

function scrollDivRight(){
  clearTimeout(timer);
  d=document.getElementById('meineDivID');
  d.scrollLeft-=scrollStep;
  timer=setTimeout("scrollDivRight()",[COLOR=Red]10[/COLOR]);
}

function stopMe(){
  clearTimeout(timer); 
}

... und aufrufen:

Code:
<img src="images/nachlinks.png" onmouseover="javascript:scrollDivLeft();" onmouseout="stopMe()"/>
<img src="images/nachrechts.png" onmouseover="javascript:scrollDivRight();" onmouseout="stopMe()"/>

Die Geschwindigkeit kannst du durch Änderung der Rot markierten Zahlen regeln....

Viel Spaß
 

Kaycee

Noch nicht viel geschrieben

AW: Suche bestimmte Art von Slideshow

Funktioniert einwandfrei. Danke sehr für die gute und einfache Lösung.
 

redbull2906

Nicht mehr ganz neu hier

AW: Suche bestimmte Art von Slideshow

Slideshow würde ich auch benötigen - hab auch mal versucht das so aufzubauen aber will net so wirklich.

Wie mach ich denn Bilder in ein Div so das diese net angeziegt werden?
 

cebito

undefined

AW: Suche bestimmte Art von Slideshow

Hallo,
klappt bei mir nicht wirklich...
Hat jemand eine Ahnung?
Danke schonmal...

So heißt dein div im code: <div id="site_all_reference_boxes_box1">

und das steht in der js: d=document.getElementById('site_all_reference_boxes_box');

und in der css ist eine class (keine id) definiert: .site_all_reference_boxes_box statt #site_all_reference_boxes_box

... das als erstes. Und dann frag ich mich, warum du für jedes Bild nochmal ein eigenes div machst, die class .site_reference_box kannst du auch den Bildern direkt zuweisen: <img class="site_reference_box" src="references/empty_box.png" alt="empty pic" />

Änder da mal was und wenn es dann noch nicht funzt komm wieder...
 

gegenwind

liebt Pizza.

AW: Suche bestimmte Art von Slideshow

Ich fange lieber mit einer leeren HTML an:
Code:
<!--
#Links {
	height: 20px;
	width: 20px;
	background-color:#006699;
}
#Rechts {
	height: 20px;
	width: 20px;
	background-color:#FF3300;
}
-->
</style>
</head>
<script>
var scrollStep=1;
var timer;

function scrollDivLeft(){
  clearTimeout(timer);
  d=document.getElementById('Links');
  d.scrollLeft+=scrollStep;
  timer=setTimeout("scrollDivLeft()",10);
}

function scrollDivRight(){
  clearTimeout(timer);
  d=document.getElementById('Rechts');
  d.scrollLeft-=scrollStep;
  timer=setTimeout("scrollDivRight()",10);
}

function stopMe(){
  clearTimeout(timer); 
}
</script>
<body>
<div style="width:300px; height:67px; overflow:auto;"><img src="thumbs/Bild.jpg1" width="97" height="67" /><img src="thumbs/Bild2.png" width="97" height="67" /><img src="thumbs/Bild3.png" width="97" height="67" /><img src="thumbs/Bild4.jpg" width="97" height="67" /><img src="thumbs/Bild5.png" /></div>
<div id="Rechts">LA</div>
<div id="Links">LI</div>
</body>
</html>
Wo soll der Fehler liegen?
 

cebito

undefined

AW: Suche bestimmte Art von Slideshow

Wie wär es, wenn du das Script mal eröffnest?

Code:
<script type="text/javascript">

und zB. den </head> darunter setzt, direkt vor den body-Tag.
Ich weiß auch nicht, was du scrollen willst, aber bei d=document.getElementById('Rechts'); sollte (für den rot markierten Teil) der zu scrollende div drinstehen. Dieser sollte dann auch eine feste Größe und overflow:hidden; haben.
 

stroyer

Aktives Mitglied

AW: Suche bestimmte Art von Slideshow

Ich habe in einmal so eine Horizontale Scrollleiste dafür gebastelt. Per PHP hab ich alle Thumbnails in ein breites Bild geladen=>kürzere Ladezeit. Natürlich liese sich das auch über AJAX-Preload lösen. Durch eine Imagemap hab ich die Bilder auswählen können und oberhalb habe ich dann das große Bild gehabt. Mit PHP ist die Leiste beim Laden jedes Mal an der richtigen Stelle gewesen.
 

cebito

undefined

AW: Suche bestimmte Art von Slideshow

Ich fange lieber mit einer leeren HTML an:

Hab mal an deiner leeren HTML-Datei ein paar Änderungen vorgenommen:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>


<style type="text/css">
<!--
#Links {
    height: 20px;
    width: 20px;
    background-color:#006699;
}
#Rechts {
    height: 20px;
    width: 20px;
    background-color:#FF3300;
}
-->
</style>
<script type="text/javascript">
var scrollStep=1;
var timer;

function scrollDivLeft(){
  clearTimeout(timer);
  d=document.getElementById('scroller');
  d.scrollLeft+=scrollStep;
  timer=setTimeout("scrollDivLeft()",10);
}

function scrollDivRight(){
  clearTimeout(timer);
  d=document.getElementById('scroller');
  d.scrollLeft-=scrollStep;
  timer=setTimeout("scrollDivRight()",10);
}

function stopMe(){
  clearTimeout(timer); 
}
</script>
</head>
<body>
<div id="scroller" style="width:300px; height:67px; overflow:hidden; white-space:nowrap;"><img src="thumbs/Bild.jpg1" width="97" height="67" /><img src="thumbs/Bild2.png" width="97" height="67" /><img src="thumbs/Bild3.png" width="97" height="67" /><img src="thumbs/Bild4.jpg" width="97" height="67" /><img src="thumbs/Bild5.png" width="97" height="67" /></div>
<div id="Rechts"><img src="links.png" onmouseover="scrollDivLeft();" onmouseout="stopMe();" width="97" height="67" /></div>
<div id="Links"><img src="rechts.png" onmouseover="scrollDivRight();" onmouseout="stopMe();" width="97" height="67" /></div>
</body>
</html>

rechts- bzw. links.png musst dir halt noch basteln ;)
 

schnellse

mädschendesignerin

AW: Suche bestimmte Art von Slideshow

Hey ich hab da noch eine Zusatzfrage :)
Der Code an sich funktioniert super, aber gibt es die möglichkeit zu sagen das er die bilder in schleife abspielen soll???

liebe grüße und danke schonmal im vorraus!

schnellse
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben