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!

[JürgenB]

Hallo,

zwei Versionen einer Bibliothek einzubinden ist in etwa so, als würdest du anstelle eines Updates deines Schummeldiesels einfach zusätzlich einen sauberen Motor einbauen.

Läuft das Zufallsscript auch mit dem neuen jquery?

Gruß
Jürgen

[Zeppelin]

Tatsache, hatte es vorhin mal mit der Jquery, die auf Google liegt probiert, da wollte es irgendwie nicht, mit der von code.jquery.com jetzt schon! Daran lag es aber sicher nicht, eher an nem Fehler bei mir im Code.

Danke dafür, mal wieder die einfachste Lösung!

Eine Idee für ein Fallback für noscript?

• für die fancybox brauch ich ja eventuell auch ein Fallback, kann ich da target="_blank" nutzen?

Schöne Grüße & Danke!

[Auge]

Hallo

Eine Idee für ein Fallback für noscript?

Binde ein Bild fest ein und ändere mit JS/JQuery nur die URL des Bildes. So wird immer ein bestimmtes Bild angezeigt und mit aktiviertem JS hast du deine Zufallsanzeige. Im übrigen ist es im Normalfall nicht notwendig, dem festen Bild eine andere ID zu geben als einem Zufallsbild, falls das Zufallsbild nur ein Ersatz für das feste Bild ist (selbe Größe, selbe Position).

Tschö, Auge

[Gunnar Bittersmann]

@@Zeppelin

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

Nei-en. Dass es Unsinn ist, zweimal jQuery einzubinden, wurde ja schon gesagt.

Um ein Element ins DOM zu hängen, brauchst du aber überhaupt kein jQuery.

Statt

    $('<img class="fade-in" src="img/bg/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#bildbg');

kannst du auch schreiben:

document.querySelector('#bildbg').innerHTML += '<img class="fade-in" src="img/bg/' + images[Math.floor(Math.random() * images.length)] + '" alt="">';

Dem img-Element fehlte übrigens das zwingend notwendige alt-Attribut. Ich hab das mal ergänzt.

Wenn du sowieso jQuery verwendest, kannst du natürlich auch deinen obigen Code verwenden. Dort aber unbedingt noch das alt-Attribut ergänzen! Am besten gefüllt mit einem sinnvollen Alternativtext.

LLAP 🖖

[j4nk3y]

Hey,

document.querySelector('#bildbg').innerHTML += '<img class="fade-in" src="img/bg/' + images[Math.floor(Math.random() * images.length)] + '" alt="">';

Wieso denn ein document.querySelector, document.getElementbyID sollte besser passen, da eine ID eh nur einmal vergeben werden darf. Da muss nicht nach dem ersten Element mit einer entsprechenden ID im DOM gesucht werden.

(Falls document.getElementbyID das DOM aber genauso nach dem Element mit der ID sucht wie document.querySelector, hab ich nichts gesagt)

Gruß
Jo

[Gunnar Bittersmann]

@@j4nk3y

(Falls document.getElementbyID das DOM aber genauso nach dem Element mit der ID sucht wie document.querySelector, hab ich nichts gesagt)

Dem ist nicht so. document.querySelector sucht; document.getElementbyID schmeißt einen Fehler:
TypeError: document.getElementbyID is not a function 😜

Zwischen document.querySelector('#foo') und document.getElementByID('foo') sollte kein Unterschied sein.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

… document.getElementbyID schmeißt einen Fehler:
TypeError: document.getElementbyID is not a function 😜

Zwischen document.querySelector('#foo') und document.getElementByID('foo') sollte kein Unterschied sein.

Das sollte heißen: Zwischen document.getElementbyID('foo') und document.getElementByID('foo') sollte kein Unterschied sein.
TypeError: document.getElementByID is not a function 😜

LLAP 🖖