Suche bestimmte Art von Slideshow

Kaycee · 27.03.2009

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 · 27.03.2009

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 · 27.03.2009

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 · 27.03.2009

AW: Suche bestimmte Art von Slideshow

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

lg
smaxle

cebito · 28.03.2009

AW: Suche bestimmte Art von Slideshow

Kaycee schrieb:
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 · 28.03.2009

AW: Suche bestimmte Art von Slideshow

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

redbull2906 · 28.03.2009

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?

saila · 29.03.2009

AW: Suche bestimmte Art von Slideshow

CSS-Klasse display: none;

gegenwind · 18.04.2009

AW: Suche bestimmte Art von Slideshow

.....................

cebito · 18.04.2009

AW: Suche bestimmte Art von Slideshow

redro schrieb:
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 · 31.05.2009

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 · 01.06.2009

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 · 01.06.2009

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 · 02.06.2009

AW: Suche bestimmte Art von Slideshow

redro schrieb:
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 · 16.11.2009

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