Für Profis? Mootools Fx.Scroll

T

TribunM

Erfahrenes Mitglied
Hi Leute,

nachdem ich leider zu meiner DropDown Frage keine konkrete Antwort bekommen habe, hoffe ich, dass ich jetzt mehr Glück habe. Ich bin kein mootools Profi, aber ich bin mir sicher, dass Jemand, der sich damit auskennt, mir bestimmt weiterhelfen kann. Und wo, wenn nicht hier, habe ich eine hohe Chance auf Hilfe ;).

Zu meinem Problem. Ich habe eine Bildergalerie, die per mootools Fx.scroll die Bilder austauscht. Die Bilder Ids werden per Klick auf ein Karussel übergeben. Klappt soweit auch alles.

In Kurzform sieht das so aus:

HTML: 
    <script type="text/javascript">
	function slide(pic_thumb) {
	// Galerie Slides
			var pic = pic_thumb;
			myFx = new Fx.Scroll('gallery');
			myFx.toElement('image_'+(pic));
	}
</script>
<!-- Galerie -->
<div id="gallery" style="overflow:hidden; position:relative; width:300px; height:300px;">
	<table cellpadding="0" cellspacing="0">
		<tr>
				<td style="vertical-align:middle; text-align: center;">
					<a id="img_0" href=""><img id="image_0" src=""></a>
				</td>
				<td style="vertical-align:middle; text-align: center;">
					<a id="img_1" href=""><img id="image_1" src=""></a>
				</td>
		</tr>
	</table>
</div>

.....

<!--Karussel-->
<div id='thumb_{$counter}' onclick="slide({$counter})">

Das Galeriebild hat Ausmaße 300x300 px und bisher waren die Fotos darauf zugeschnitten oder wurden skaliert. Das sieht zum Teil echt doof aus. Also dachte ich mir lasse ich die Seitenverhältnisse so wie sie sind und zentriere die Bilder dann. Theorie ist aber nicht gleich Praxis und daher sieht das Ergebnis ganz anders aus, als erhofft.

Wenn ich zwei schmalere Bilder habe, z.B. 100x300 u. 150x300 würden beide Bilder direkt auf einmal angezeigt, da für das scrollen wohl die Ausmaße jedes einzelnen Bildes genommen werden und diese dann aneinander gereiht werden.

Wie kann ich es lösen, dass immer die vollen 300x300 px für das scrollen verwendet werden, selbst wenn die Fotos kleiner sind und eben gecentered werden.

Da bin ich mal gespannt, ob es wirklich so kompliziert ist, wie ich annehme.

Freue mich auf eure Anregungen.
 
Hi,

du könntest die "Scrollziele" (image_0, image_1 usw) in die Tabellenzellen, die mit CSS auf die gewünschte Grösse angepasst werden, verlagern.

Im onload-Event des Dokuments passt du die Gesamtbreite der Scroll-Tabelle an die vorhandenen Tabellenzellen an.

Ausserdem solltest du den Namen der Funktion (slide) ändern, da sonst Browser wie Firefox oder Opera Probleme bekommen.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="mootools-core-1.3.1.js" type="text/javascript"></script>
<script src="mootools-1.3.1.1-more.js" type="text/javascript"></script>
<style type="text/css">
  <!--
#gallery table td{
  width: 300px;
  height: 300px;
}
#gallery table td a{
  text-decoration: none;
}
#gallery table td a img{
  border: 0 none;
}
 //-->
</style>

<script type="text/javascript">

window.addEvent('domready', function(){
  var intDim = 300;  // Breite der Bilder

  // Tabellenbreite anpassen
  $$('#gallery table')[0].set({
    styles: {
      width: (intDim * $$('#gallery table td').length) + "px"
    }
  });
});


function mySlider(pic_thumb) {
// Galerie Slides
    var pic = pic_thumb;
    myFx = new Fx.Scroll('gallery').toElement('image_'+(pic), 'x');
}
</script>
</head>
<body>

<div id="gallery" style="overflow:hidden; position:relative; width:120px; height:120px;">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td style="vertical-align:middle; text-align: center;" id="image_1">
        <a id="img_1" href="#"><img src="bild1.jpg" width="80" height="80"></a>
      </td>
      <td style="vertical-align:middle; text-align: center;" id="image_2">
        <a id="img_2" href="#"><img src="bild2.jpg"></a>
      </td>
    </tr>
  </table>
</div>
<!--Karussel-->
<div id='thumb_1' onclick="mySlider(1)">1</div>
<div id='thumb_2' onclick="mySlider(2)">2</div>
</body>
</html>
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück