Thumbsauswahl mit marquee

[KingOfRap]

Hallo zusammen,

komme mit meinem Vorhaben durch suchen nicht mehr weiter.
Ich habe folgendes Script bisher:

  
  
<a href="#" title="Links" onMouseOver="vorschau.direction='left'; vorschau.start();" onMouseOut="vorschau.stop();">&laquo;links</a>  
<a href="#" title="Rechts" onMouseOver="vorschau.direction='right'; vorschau.start();" onMouseOut="vorschau.stop();">rechts&raquo;</a>  
  
<div class="smallimage">  
  
<marquee id="vorschau" height="120" scrollamount="2" scrolldelay="1" width="800">  
<?php  
$thumbs = "./templates/images/gallery/thumbs/bigfm";  
$images = "./templates/images/gallery/images/bigfm";  
$handle = opendir($thumbs);  
while ($file = readdir ($handle)) {  
if($file != "." && $file != "..") {  
if(is_dir($thumbs."/".$file)) {  
echo "/".$file."<br/>";  
} else {  
$compl = $thumbs."/".$file;  
$compl2 = $images."/".$file;  
echo "<a href=\"#\" onclick=\"return changeImage('templates/images/gallery/images/bigfm/".$file."');\"><img src=\"".$compl."\" id=\"vorschau\"></a>";  
}  
}  
}  
closedir($handle);  
?>  
</marquee>  
  
</div>  
  
<br>  
  
<div id="bigImage"><img src="templates/images/gallery/images/bigfm/_MG_7026.JPG" alt="" class="bigimage">  
</div>  
  

  
  
function count() {  
vorschau.stop();  
}  
  

Möchte nun noch folgendes erreichen:

-alle Bilder sollten von Anfang an angezeigt werden und nicht erst durchlaufen
-Die Bilder sollten sich erst nach Links oder Rechts bewegen wenn man über die jeweiligen Links fährt und vorher nicht
-die Bilder sollten in einer endlosschleife laufen, oder man sollte nur soweit nach Rechts oder Link fahren können wie Bilder da sind

Hoffe das ist mit Javascript aufbauend auf mein bisheriges Script möglich ist.

Vielen Dank schonmal im vorraus. Daniel

[plan_B]

Hallo,

Möchte nun noch folgendes erreichen:

-alle Bilder sollten von Anfang an angezeigt werden und nicht erst durchlaufen
-Die Bilder sollten sich erst nach Links oder Rechts bewegen wenn man über die jeweiligen Links fährt und vorher nicht
-die Bilder sollten in einer endlosschleife laufen, oder man sollte nur soweit nach Rechts oder Link fahren können wie Bilder da sind

vielleicht hast du dich schon mal hier informiert: http://de.selfhtml.org/html/text/proprietaer.htm#marquee@title=html/text/proprietaer.htm#marquee

dann müsstest du erstmal austesten, in wieweit die Browser die marquee-Methoden start, stop, usw. unterstützen.

ob es dann lohnt an marquee festzuhalten, möchte ich bezweifeln.

zu deinem Code: Dir ist die Verwendung des ID-Attributs nicht klar.
Eine ID darf nur einmal im Dokument vorkommen.

  

> ...  
> <a href=\"#\" onclick=\"return changeImage('templates/images/gallery/images/bigfm/".$file."');\"><img src=\"".$compl."\" id=\"vorschau\"></a>";  
> ...  

solche Links sind unschön, du möchtest nur dieses haben:

  
<img src="thumb.jpg" onclick="changeImage(this,'big.jpg')" alt="" title="xy">  

Wahrscheinlich möchtest du nicht auf den Link-Cursor verzichten. Das lässt sich einfach per CSS regeln http://de.selfhtml.org/css/index.htm@title=css/index.htm

  
#vorschau img { cursor:pointer; border:0; margin:20px; }  

Wenn sich dann das grosse Bild mit der entsprechenden id ansprechen lässt, ist der Rest auch ganz einfach.

  
function changeImage(thumb_img,url_gross) {  
var big_img=document.getElementById("img_gross");  
if (big_img) {  
   big_img.src =   url_gross;  
   big_img.title = thumb_img.title;  
   big_img.alt =   thumb_img.alt;  
  }  
}  

Gruß plan_B

[KingOfRap]

Hallo,

Hi,

vielleicht hast du dich schon mal hier informiert: http://de.selfhtml.org/html/text/proprietaer.htm#marquee@title=html/text/proprietaer.htm#marquee

dann müsstest du erstmal austesten, in wieweit die Browser die marquee-Methoden start, stop, usw. unterstützen.

ob es dann lohnt an marquee festzuhalten, möchte ich bezweifeln.

Ich würde das ganze auch lieber ohne marquee machen habe bisher aber nichts gefunden was zu meinem script passt.
Nur sehr lange externe javascripts in die man jeden Link für die Bilder einfügen muss. Diese möchte ich aber eigentlich weiterhin per php auslesen.

LG Daniel

[plan_B]

hallo,

Ich würde das ganze auch lieber ohne marquee machen habe bisher aber nichts gefunden was zu meinem script passt.

dann verabschiede dich von dieser Konstruktion

  

> <div class="smallimage">  
> <marquee id="vorschau" ....>  
> <a ....><img ....></<a>  
> <a ....><img ....></<a>  
> <a ....><img ....></<a>  
> </marquee>  
> </div>  

und nutze diese einfache Alternative

  
<div id="vorschau">  
<img ....>  
<img ....>  
<img ....>  
<img ....>  
</div>  

  
div#vorschau {  
 height:100px;  
 width:90%;  
 overflow:scroll;  
 }  

dann kann jeder Benutzer die Thumbs-Leiste so hin und her schieben, wie er möchte und ist nicht an die nervige Steuerung gebunden

Gruß plan_B

[KingOfRap]

Hi,

hatte ich auch schon dran gedacht mag aber die scrollbar absolut nicht und wollte mich deshalb an javascript halten.

Trotzdem danke.

LG Daniel

[KingOfRap]

Habe nun selbst ne Lösung zusammen bekommen.
Sie läuft komplett ohne marquee und falls einer so etwas sucht stelle ich sie hier mal bereit.

[code=javascript]
<html>
<head>
<title></title>
<script type="text/javascript">
function initPage()
{
oMyDiv = document.getElementById( "divname" );

isScrolling = false;

DX = 50;
DELAY = 100;

};

function scroll2Left( evt )
{
 if ( evt )
  isScrolling = true;

if ( isScrolling )
 {
  if ( oMyDiv.scrollLeft > 0 )
  {
   oMyDiv.scrollLeft -= DX;
   window.setTimeout( "scroll2Left()", DELAY );
  };
 };
};

function scroll2Right( evt )
{
  if ( evt )
   isScrolling = true;

if ( isScrolling )
  {
   oMyDiv.scrollLeft += DX;
   window.setTimeout( "scroll2Right()", DELAY );
  };

};

function stopScrolling()
{
 isScrolling = false;
}

</script>

</head>

<body onload="initPage()" onunload="stopScrolling()">
<div id="divname" style="width:700px;overflow:hidden;border:solid 2px black;white-space:nowrap;padding:4px">
--->Hier Bilder einfügen<---
</div>
<div style="font-size:32px"><span onmouseup="stopScrolling()" onmousedown="scroll2Left(event)">&lt;</span>&nbsp;<span onmouseup="stopScrolling()" onmousedown="scroll2Right(event)">&gt;</span>
</body>
</html>
[/code]

Viel Spaß damit.

Daniel