Bildergalerie mit unterschiedlich breiten Bildern

[PHP-Fan]

Hi,

ich suche jetzt schon länger nach einem Lösungsansatz. Ich habe bestimmte Logos, die ich gerne in einem Karussell laufen lassen würde. Es gibt dafür unzählige Plugins aber alle haben große Probleme damit, dass die Logos unterschiedlich breit sein können (nur die Höhe ist immer gleich). Wenn die Logos immer gleich breit wären, würde dieses Problem nicht auftreten, da es aber dynamisch bleiben soll, bleibt mir nichts anderes übrig als dafür eine Lösung zu finden.

Ausprobiert habe ich bereits folgende:

- http://web.enavu.com/demos/carousel.html (genau das, was ich brauche aber Probleme mit dynamischer Breite)
- http://www.jcoverflip.com/demo (weicht ohnehin stark vom Aufbau ab)
- http://sorgalla.com/projects/jcarousel/#Examples ((genau das, was ich brauche aber Probleme mit dynamischer Breite)

Welche Lösungsansätze gibt es? Das ganze soll in etwa so aufgebaut werden:



Wenn man dann auf den Pfeil klickt soll das ganze sich verschieben und die anderen Logos anzeigen bis man durch ist und dann geht es wieder Übergangslos von vorne los. Ich freue mich auf euer Feedback, ich verzweifle langsam.

Viele Grüße

 

[tombe]

Man kann sicher auch den Code der obigen Beispiele entsprechend anpassen aber um ehrlich zu sein das ist mir zu viel.

Habe deshalb jetzt selber was entworfen womit du vielleicht arbeiten kannst. Oder es hilft dir vielleicht zu finden warum es bei deinen Beispielen nicht geht.

<style type="text/css">
.pfeil
	 {
		width: 50px;
		height: 50px;
		border: 1px solid;
		background-color: #C0C0C0;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		position: absolute;
 		top: 50px;
	 }
#links
	{
		left: 50px;
	}
#rechts
	{
		left: 500px;
	}
#inhalt
	{
		position: absolute;
		top: 50px;
		left: 100px;
  		width: 400px;
  		height: 50px;
  		border: 1px solid;
  		overflow: hidden;
	}
.box
	{
		padding: 0 5px;
		position: absolute;
		top: 0px;
		height: 50px;
		width: 10px;
		background-color: #C0C0C0;
	}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var nummer = 1;
$(document).ready(function() {

	$("#links").click(function() {
		if (nummer == 1) return false;
		nummer--;
		breite = Math.abs(parseInt(document.getElementById("container").style.left)) - parseInt(document.getElementById("box" + nummer).style.width);
		$("#container").animate({"left": -breite}, 2000);
	});

	$("#rechts").click(function() {
		if (nummer == 4) return false;
		breite = Math.abs(parseInt(document.getElementById("container").style.left)) + parseInt(document.getElementById("box" + nummer).style.width);
		$("#container").animate({"left": -breite}, 2000);
		nummer++;
	});
});
</script>

<div id="links" class="pfeil"><<</div>
<div id="inhalt" class="inhalt">
	<div id="container" style="position: absolute; top: 0px; left: 0px; width: auto;">
		<div class="box" id="box1" style="width: 250px; left: 0px; background-color: #808080;">Container 1</div>
		<div class="box" id="box2" style="width: 90px; left: 250px; background-color: #0000FF;">Container 2</div>
		<div class="box" id="box3" style="width: 180px; left: 340px; background-color: #FFFF00;">Container 3</div>
		<div class="box" id="box4" style="width: 350px; left: 520px; background-color: #FF0000;">Container 4</div>
	</div>
</div>
<div id="rechts" class="pfeil">>></div>