Jquery funktioniert nicht, wie gewollt

tklustig

Erfahrenes Mitglied
Hallo Leute,
folgender Code soll eigentlich alle 4 Bilder an ein und derselben Position ein-und ausblenden. Das funktioniert soweit auch, allerdings werden alle 4 Bilder untereinander aus-und eingeblendet, anstatt immer nur jeweils eines im Wechsel. Wo liegt der Bug?
HTML:
               <div id="photos">
                     <img alt="moi_1" src="img/moi_coloured.jpg">
                      <img alt="moi_2" src="img/moi_coloured_large.jpg">
                      <img alt="moi_3" src="img/moi_large_sw.jpg">
                      <img alt="moi_4" src="img/moi_sw.jpg">
               </div>
Javascript:
           $(document).ready(function () {
                rotiere_pic(0);
            });

            function rotiere_pic(photo_aktuell) {
                var anzahl = $('#photos img').length;
                photo_aktuell = photo_aktuell % anzahl;
                $('#photos img').eq(photo_aktuell).fadeOut(function () {
                    $('#photos img').each(function (i) {
                        $(this).css(
                                'zIndex', ((anzahl - i) + photo_aktuell) % anzahl
                                );
                    });
                    $(this).show();
                    setTimeout(function () {
                        rotiere_pic(++photo_aktuell);
                    }, 750);
                });
                $("#photos img").css({top: '70px', height: '120px', width: '120px', display: 'block'});
            }
 
Zuletzt bearbeitet von einem Moderator:
Habs von selber rausgekriegt. So klappts:
Javascript:
  $("#photos img").css({position: 'absolute', top: '70px', height: '120px', width: '120px'});
Die Angabe der absoluten Position hatte gefehlt![/CODE]
 
Zuletzt bearbeitet von einem Moderator:
Hi,

mich interessiert, wo photo_aktuell herkommt?

Denn wenn nur der Codeschnipsel so existiert, sollte es einen Fehler geben.

Ciao,
Quaese
 
photo_aktuell wird als Parameter der Funktion übergeben. Den Aufruf der Funktion hatte ich ich nicht veröffentlicht, da er für die Problemstellung irrelevant war.
 
Hi,

danke für deine Antwort. Das dachte ich mir schon. Ich wollte es nur klar gestellt wissen, falls jemand den Code kopieren und verwenden möchte.

Ciao,
Quaese
 
Yuup Für diesen von Dir erwähnten Fall publiziere ich den gesamten Code, wie er derzeit in einem Produktivsystem genutzt wird:
Javascript:
<script language="JavaScript">
            /*var fensterHoehe = window.innerHeight;
             var fensterBreite = window.innerWidth;*/
            $(document).ready(function () {
                rotiere_pic(0);
            });
            function rotiere_pic(photo_aktuell) {
                var anzahl = $('#photos img').length;
                photo_aktuell = photo_aktuell % anzahl;
                $('#photos img').eq(photo_aktuell).fadeOut(function () {
                    $('#photos img').each(function (i) {
                        $(this).css(
                                'zIndex', ((anzahl - i) + photo_aktuell) % anzahl
                                );
                    });
                    $(this).show();
                    setTimeout(function () {
                        rotiere_pic(++photo_aktuell);
                    }, 750);
                });    
                $("#photos img").css({position: 'absolute', height: '67px', width: '107px'});
            }
</script>
HTML:
<!-- Die Rotation wird in der JQuery Funktion über den Selektor id in rotiere_pic() implementiert -->
<div class="col-lg-1 offset-lg-8"  id="photos">
    <img alt="moi_1" src="img/moi_coloured.jpg">
    <img alt="moi_2" src="img/moi_coloured_large.jpg">
    <img alt="moi_3" src="img/moi_large_sw.jpg">
    <img alt="moi_4" src="img/moi_sw.jpg">
</div>
 
Zuletzt bearbeitet von einem Moderator:
Zurück