Zwei jquery Versionen auf html Seite funktioniert nicht, workaround leider auch nicht.

[Zeppelin]

Hallo,

nachwievor arbeite ich an der Studi Seite, nachwievor sieht der Code für euch wahrscheinlich schrecklich aus 😉

Ich habe im oberen Teil der Seite per Javascript ein Script, das ein zufälliges Bild aus einem Pool an Bildern anzeigt. Das funktioniert hervorragend, basiert aber auf Jquery 1.8

Code dafür:

<div id="bildbg">
            <!--Don't forget Jquery-->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>

<!--New images on load -->
<script>
//Add your images, we'll set the path in the next step
    var images = ['1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png', '9.png'];
    
//Build the img, then do a bit of maths to randomize load and append to a div. Add a touch off css to fade them badboys in all sexy like.
    $('<img class="fade-in" src="img/bg/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#bildbg');
</script>
            </div>
                <!-- Javascript Ende -->

Im Css der bildbg:

#bildbg {
    background-color: #FDFDFD;
    margin-left: -8px;
    margin-top: 0vh;
    margin-bottom: 0vh;
    width: 99vw;
    height: auto;
    vertical-align: top;
}

Jetzt wollte ich auf einer Unterseite eine fancybox Galerie einfügen, die allerdings auf Jquery 1.9.1 basiert und wenn ich das tue funktioniert keine der beiden Sachen mehr. Eine Lösung dafür per noconflict hat bei mir nicht funktioniert. Wenn dafür jemand eine Anregung hat, sehr gerne! Ein iframe dafür ist zu unschön, da die Bilder im Zoom dann nur im Iframe erscheinen.

Mein Workaround wäre jetzt (was grundsätzlich auch als Fallback für Leute ohne JS nötig wäre) ein einzelnes Bild so einzubinden, wie die zufällige Bildanzeige.

Das habe ich so gemacht:

<img id="noscriptimg" src="img/bg/5.png">

#noscriptimg {
    background-color: #FDFDFD;
    margin-left: -8px;
    margin-top: 0vh;
    margin-bottom: 0vh;
    width: 99vw;
    height: auto;
    vertical-align: top;
}

Allerdings wird dann das Bild in weniger Höhe dargestellt als in der zufälligen Anzeige und wenn ich mit height: vh/vw spiele, dann funktioniert es zwar in genau einer Anzeige, aber in allen anderen nicht mehr. Hat jemand dafür eine Idee?

Schöne Grüße & vielen Dank!