Vorschaubilder in den VG stellen?

[Webhufi]

Hallo,

wie kann ich das folgende Script so verändern, dass die Vorschaubilder komplett im Vordergrung gezeigt werden?
Beim Vergrößern sind immer andere Thumbs im Zoombild sichtbar. Schaut bitte hier:

<style>
.zoom img {
transition: transform 0.2s;
}
.zoom img:hover {
transform: scale(3.0, 3.0);
}
</style>

Vielen Dank!

 

[ikosaeder]

Du könntest den Z-Index ändern bevor du das Bild vergrößerst.

 

[Sempervivum]

Das war auch meine erste Idee, aber leider gestaltet sich das etwas komplizierter weil der z-index nur bei absoluter Positionierung wirkt. Und dann fallen die Bilder aus dem Textfluss heraus und nehmen nicht mehr den Raum im Elternelement, hier dem a-Tag, ein.

Lösung 1: Du, @Webhufi, musst dir die Arbeit machen und Breite und Höhe vom img-Tag auf das a-Tag übertragen. Das a-Tag muss zusätzlich display: inline-block; bekommen.

Lösung 2: Man überträgt Breite und Höhe mit Javascript automatisch, etwa so:

var links = document.querySelectorAll('.zpLinkBox a');
for (var i = 0; i < links.length; i++) {
    var thelink = links[i];
    var theimg = thelink.firstElementChild;
    thelink.style.width = theimg.width + 'px';
    thelink.style.height = theimg.height + 'px';
}

(ungetestet)

 

[basti1012]

Bei mir reicht es wenn du das löscht aus der Css

.zpLinkBox a {
    position: relative;
    z-index: 2;
}

Zumindest sind dann die Bilder über alles andere beim hovern , so wie ich es verstehe in deiner Beschreibung ist das doch das was du wolltest ?

Könnte aber auch falsch liegen weil irgendwie ist die lösung zu einfach das kommt mir doch spanisch vor

Dann aber was anderes .
Das du du die ganzen Bilder in ein <p> Element rein machst ist glaube ich auch nicht ganz ok , dann lieber div.
Deine vorschau Bilder sind ja schön und gut , doch jedes Bild über 100 Kb groß finde ich als thumbail doch zu groß.

Vileleicht kannst du da ja was dran machen , das das Original Bild erst beim hovern geladen wird oder so , das würde dann den Seitenaufbau beschleunigen und auch einiges an Datenvolumen die übertragen werden

 

[Webhufi]

Ich habe vergessen zu erwähnen, dass ich ein Dummy bin...

Ich arbeite mit einem CMS, das mir per Eingabeboxen erlaubt, Codes einzugeben.

Nun finde ich bei mir nur den Code, den ich anfangs schrieb; die anderen Codeschnipsel, die ihr ( vor allem @basti1012 ) angeben habt, sind mir unbekannt... Ich denke, sie müssen zur Klasse zoom gehören. Und diesen Code suche ich gerade vergeblich! :-(

 

[Webhufi]

Bei mir reicht es wenn du das löscht aus der Css

.zpLinkBox a {
    position: relative;
    z-index: 2;
}

Zumindest sind dann die Bilder über alles andere beim hovern , so wie ich es verstehe in deiner Beschreibung ist das doch das was du wolltest ?

Könnte aber auch falsch liegen weil irgendwie ist die lösung zu einfach das kommt mir doch spanisch vor

Dann aber was anderes .
Das du du die ganzen Bilder in ein <p> Element rein machst ist glaube ich auch nicht ganz ok , dann lieber div.
Deine vorschau Bilder sind ja schön und gut , doch jedes Bild über 100 Kb groß finde ich als thumbail doch zu groß.

Vileleicht kannst du da ja was dran machen , das das Original Bild erst beim hovern geladen wird oder so , das würde dann den Seitenaufbau beschleunigen und auch einiges an Datenvolumen die übertragen werden

Du hast recht: Ich habe der Einfachheit halber die Originalbilder im CMS nach unten skaliert! Ich werde die Origs also per Bildbea auf vernünftige Größe bringen.

Danke für diesen Hinweis!

 

[Sempervivum]

diesen Code suche ich gerade vergeblich! :-(

Der HTML-Inspektor zeigt genau an, wo es definiert ist: In bundle.css?v=637086635805415959 Ich empfehle jedoch, es dort nicht zu ändern, sondern in deiner Eingabebox zu überschreiben:

.zpLinkBox a {
    position: static;
}

 

[Webhufi]

Die Quellcodes können an diversen Stellen eingeben werden, je nach Vererbung (oder auch nur auf einer spezifischen Seite). Ich habe alles durchsucht, finde den Code der Klasse zoom aber nicht.

Um etwas zu versuchen wäre es toll, wenn du mir den kompletten Code hier schreiben könntest?

 

[Sempervivum]

Das in #7 ist der komplette Code, bzw. Du musst noch die Styletags hinzu fügen:

<sttyle>
    .zpLinkBox a {
        position: static;
    }
</style>

Und dann, wenn möglich, so einfügen, dass es anschließend im Head steht.

 

[Webhufi]

Manno, es hat geklappt!!!

Das heißt also, dass der komplette Code aus den beiden Teilen #1 und #9 besteht.

Herzlichen Dank!