3 Bilder nebeneinander anzeigen

[paoloposo]

Hallo Community,

ich möchte gerne 3 Bilder nebeneinander anzeigen und zwar wie auf diesem Bild:
Das erste Bild soll nur zur Hälfte sichtbar sein, dass zweite komplett (genau in der Mitte der Seite) und das dritte wieder nur zur Hälfte.

Ich habe schon ganz viel rumprobiert, aber das dritte Bild wird immer unter den beiden anderen angezeigt.
Ziel ist es, eine Javascript-Slideshow zu machen, die immer das momentane Bild komplett anzeigt und das vorherige und das nächste nur zur Hälfte.

Ich hoffe, dass es irgendwie geht :-?

mfg, activegaming


Quellcode:

<script>

var elements = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg');
var index = 0;
var delay = 3000;
var slideshowSlideActive = true;

function slideshowPreviousElement(){
    index -= 1;
    if(index < 0){
        index = elements.length-1;
    }
    slideshowUpdate();
}

function slideshowNextElement(){
    index += 1;
    if(index >= elements.length){
        index = 0;
    }
    slideshowUpdate();
}

function slideshowUpdate(){
    if(elements.length != 0){
        var prev = (index-1)%elements.length;
        if(prev < 0) prev += elements.length;
        document.getElementById('slideshowPreviousElement').innerHTML = '<img src="' + elements[prev] + '">';;
        document.getElementById('slideshowCurrentElement').innerHTML = '<img src="' + elements[index] + '">';
        document.getElementById('slideshowNextElement').innerHTML = '<img src="' + elements[(index+1)%elements.length] + '">';
    }
}

function slideshowSlide(){
    if(slideshowSlideActive == true){
        window.setTimeout(slideshowSlide, delay);
        slideshowNextElement();
    }
}

</script>


<style>

body
{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#slideshowCurrentElement, #slideshowPreviousElement, #slideshowNextElement
{
    width: 50%;
    float: left;
}

#slideshowPreviousElement
{
    margin-left: -25%;
}

#slideshowNextElement
{
    width: 50%;
    overflow: hidden;
}

#slideshow
{
    width: 100%;
    padding: 0px;
    margin: 0px;
}

#slideshow img
{
    width: 100%;
    height: auto;
    border: 1px solid black;
}


</style>

<div id="slideshow">
    <div id="slideshowPreviousElement"></div>
    <div id="slideshowCurrentElement"></div>
    <div id="slideshowNextElement"></div>
</div>

<br clear="all">
<a href="javascript:slideshowPreviousElement()">Vorheriges Bild</a>
<a href="javascript:slideshowNextElement()">Nächstes Bild</a>

<script>
slideshowUpdate();
</script>

 

[Sempervivum]

Wahrscheinlich liegt es hieran:

#slideshowCurrentElement, #slideshowPreviousElement, #slideshowNextElement
{
    width: 50%;
    float: left;
}

Du gibst allen drei divs die Breite 50%. Das ergibt in der Summe mehr als 100% und deshalb wird für das dritte Bild eine neue Zeile aufgemacht. Gib dem linken und dem rechten div mal die Breite von 25%.

 

[paoloposo]

Vielen vielen Dank!

Wahrscheinlich liegt es hieran:

#slideshowCurrentElement, #slideshowPreviousElement, #slideshowNextElement
{
    width: 50%;
    float: left;
}

Du gibst allen drei divs die Breite 50%. Das ergibt in der Summe mehr als 100% und deshalb wird für das dritte Bild eine neue Zeile aufgemacht. Gib dem linken und dem rechten div mal die Breite von 25%.

Das ist natürlich vollkommen richtig was du geschrieben hast und es war tatsächlich der Fehler!

Hier ist der funktionsfähige Code:

<script>

var elements = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg');
var index = 0;
var delay = 3000;
var slideshowSlideActive = true;

function slideshowPreviousElement(){
    index -= 1;
    if(index < 0){
        index = elements.length-1;
    }
    slideshowUpdate();
}

function slideshowNextElement(){
    index += 1;
    if(index >= elements.length){
        index = 0;
    }
    slideshowUpdate();
}

function slideshowUpdate(){
    if(elements.length != 0){
        var prev = (index-1)%elements.length;
        if(prev < 0) prev += elements.length;
        document.getElementById('slideshowPreviousElement').innerHTML = '<img src="' + elements[prev] + '">';;
        document.getElementById('slideshowCurrentElement').innerHTML = '<img src="' + elements[index] + '">';
        document.getElementById('slideshowNextElement').innerHTML = '<img src="' + elements[(index+1)%elements.length] + '">';
    }
}

function slideshowSlide(){
    if(slideshowSlideActive == true){
        window.setTimeout(slideshowSlide, delay);
        slideshowNextElement();
    }
}

</script>


<style>

body
{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#slideshowPreviousElement
{
    margin-left: -25%;
    width: 25%;
    float: left;
}

#slideshowPreviousElement img
{
    width: 200%;
    border: 1px solid black;
}

#slideshowCurrentElement
{
    margin-left: 25%;
    width: 50%;
    float: left;
}

#slideshowCurrentElement img
{
    width: 100%;
    border: 1px solid black;
}

#slideshowNextElement
{
    width: 25%;
    float: left;
}

#slideshowNextElement img
{
    width: 200%;
    border: 1px solid black;
}


</style>

<div id="slideshow">
    <div id="slideshowPreviousElement"></div>
    <div id="slideshowCurrentElement"></div>
    <div id="slideshowNextElement"></div>
</div>

<br clear="all">
<a href="javascript:slideshowPreviousElement()">Vorheriges Bild</a>
<a href="javascript:slideshowNextElement()">Nächstes Bild</a>

<script>
slideshowUpdate();
</script>