dropdown mit download

Danke für die Mühe- habe es gerade runtergeladen, entzipt und als Seite angesehen und auch per notepad die Inhalte, die ich im Aufbau erahnen kann. Die Sache mit select2 kann ich optisch aber noch nicht erkennen, also daß per Auswahl ein anderes Bild zu sehen ist und man erst dann auf download klickt oder Anderes aussucht- oder habe ich was falsch verstanden oder nicht erkannt?
 
PeterPlus hat gesagt.:
Danke für die Mühe- habe es gerade runtergeladen, entzipt und als Seite angesehen und auch per notepad die Inhalte, die ich im Aufbau erahnen kann. Die Sache mit select2 kann ich optisch aber noch nicht erkennen, also daß per Auswahl ein anderes Bild zu sehen ist und man erst dann auf download klickt oder Anderes aussucht- oder habe ich was falsch verstanden oder nicht erkannt?
Zum Vergrößern anklicken....
Achja- am Handy noch nicht angesehen...
 
Ganz am Rande noch eine vollig andere Frage: machst Du einen screenshot bei Deinen Erklärungen und wie kriegst Du da einen Pfeilrein, der auf etwas hinweist? Gelegentlich würde ich das auch brauchen, wenn ich wüßte wie...
Zum Vergrößern anklicken....
Ja, die Bilder, die ich gepostet habe, sind Screenshots. Weil mich keines der Screenshot-Tools zufrieden gestellt hat, habe ich für ein paar Euro von Ashampoo Snap 10 gekauft.

Die Sache mit select2 kann ich optisch aber noch nicht erkennen, also daß per Auswahl ein anderes Bild zu sehen ist und man erst dann auf download klickt oder Anderes aussucht- oder habe ich was falsch verstanden oder nicht erkannt?
Zum Vergrößern anklicken....
Du musst auf das kleine Dreieck rechts in der Beschreibung klicken, dann klappen die Optionen auf und Du müsstest so etwas wie in meinem Posting #92 zu Gesicht bekommen. Wenn nicht, dann poste selber mal einen Screenshot, wie es bei dir aussieht.
Wenn doch, wird bei Klick auf die Zeile das große Bild oben aktualisiert und mit Klick auf das Download-Symbol ganz rechts in den Listenelementen kannst Du die Datei herunter laden.
 
Sempervivum hat gesagt.:
Ja, die Bilder, die ich gepostet habe, sind Screenshots. Weil mich keines der Screenshot-Tools zufrieden gestellt hat, habe ich für ein paar Euro von Ashampoo Snap 10 gekauft.


Du musst auf das kleine Dreieck rechts in der Beschreibung klicken, dann klappen die Optionen auf und Du müsstest so etwas wie in meinem Posting #92 zu Gesicht bekommen. Wenn nicht, dann poste selber mal einen Screenshot, wie es bei dir aussieht.
Wenn doch, wird bei Klick auf die Zeile das große Bild oben aktualisiert und mit Klick auf das Download-Symbol ganz rechts in den Listenelementen kannst Du die Datei herunter laden.
Zum Vergrößern anklicken....
Ohh- das ging vorhin noch nicht (weiß nicht warum) aber das ist so ideal- nur die angezeigten Bilder sollten etwas größer sein, den in manchen Fällen gibt es Versionen mit "kleinen Unterschieden", die sonst nicht zu erkennen sind. Wäre das auch übereinander möglich (z.B. Bild + Download-Symbol obere Zeile, Name darunter) denn es ist ja egal, wie lange die Liste nach unten ist...
 
nur die angezeigten Bilder sollten etwas größer sein
Zum Vergrößern anklicken....
Das lässt sich im CSS sehr leicht einstellen:
Code: 
.select2-option img {
    /* height: 50px; */
    height: 70px;
    margin-right: 0.5em;
}
Bedenke jedoch, dass sich jedes Bild durch einfachen Klick oben groß anzeigen lässt.

Wäre das auch übereinander möglich (z.B. Bild + Download-Symbol obere Zeile, Name darunter)
Zum Vergrößern anklicken....
Selbstverständlich. Hier würde es sich anbieten, das nur in der Handy-Ansicht zu machen weil dann weniger Platz in der Breite aber mehr Platz in der Höhe ist. Und auf dem Desktop anders herum.
Code: 
    <link href="css/select2.min.css" rel="stylesheet" />
    <style>
        /* Options in Select2 */

        .select2-option {
            display: grid;
            grid-template-columns: 1fr auto;
            font-size: 1.5em;
        }

        .select2-option img {
            /* height: 50px; */
            height: 100px;
            margin-right: 0.5em;
        }

        .select2-option .dl-icon {
            margin-left: auto;
            font-size: 1.5em;
        }

        .select2-option .option-text {
            grid-column: 1/3;
            margin-top: 0.2em;
        }

        @media (min-width: 600px) {
            .select2-option {
                grid-template-columns: auto 1fr auto;
                align-items: center;
            }

            .select2-option .option-text {
                grid-column: 2/3;
            }

            .select2-option .dl-icon {
                grid-row: 1/2;
                grid-column: 3/4;
            }
        }

        .select2-container li {
            background-color: #FFF8DC;
        }
und darunter wie bisher.
Und das HTML, das wir im Javascript einfügen, muss ein wenig anders aussehen:
Code: 
        function makeOption(data, container) {
            if (!data.id) return data.text;
            const $state = $(`
            <span class="select2-option">
                <img src="${data.element.dataset.imgUrl}">
                <span class="dl-icon" data-link=${data.element.value}>⭳</span>
                <span class="option-text">${data.text}</span>
            </span>`);
            return $state;
        };
Diese Funktion ersetzen, nicht hinzu fügen.
 
Vielen Dank, das wäre praktisch die gesuchte und ideale Lösung für mich. Muß jetzt nur noch das Ganze einarbeiten und hab noch kein Ruhefenster dafür, am ehestens Nachts- hab dann sicher noch Fragen, denn kann mir nicht vorstellen, daß ich das auf Anhieb hinkrieg... DANKE!
 
So, konnte hiermit ein paar Dinge einarbeiten und schaut schon sehr gut aus.
° Der ursprüngliche Text unter den Bildern ist aber noch zu klein, schwarz und hat weißen Hintergrund, bevor man draufklickt.
° kann man das so lösen, daß die Bilder nicht bis an den Seitenrand gehen und der Hintergrund wie ein Rahmen wirkt?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück