• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Links mit Vorschaubild und -Text. Geht das mit WordPress? jQuery, Bildervorschau bei MouseOver

DerLocke

Neues Mitglied
Links mit Vorschau | Geht das mit WordPress? jQuery: Bildervorschau bei MouseOver

http://matthiasschuetz.com/jquery-bildervorschau-bei-mouseover

Ich würde gerne eine Vorschau von dem verlinkten Artikel erstellen, habe aber keine ahnung wie. Habe nur gelesen, dass dies heute auch mit css möglich ist.

Info: Ich benutze das Theme ColorMag Version: 2.0.0.3 von ThemeGrill
https://demo.themegrill.com/colormag/

Folgendes geht leider nicht, es sollte aber am Ende so aussehen als, wenn es so gehen würde:

<a href="https://demo.themegrill.com/colormag/2015/03/24/destruction-in-montania/" title=" <img src=“https://demo.themegrill.com/colormag/wp-content/uploads/sites/20/2015/03/fireman-100722_1280.jpg“> Nunc consectetur ipsum nisi, ut pellentesque felis tempus vitae. Integer eget lacinia nunc. Vestibulum consectetur convallis augue id egestas. Nullam rhoncus, arcu in tincidunt ultricies, velit diam imperdiet lacus, sed ">ARD Tagesschau... alt="Feuerwehrmann" height="240px" width="80px" </a>

Ich würde es immer per Hand machen, wenn ich wüsste wie, es wäre halt toll, wenn das title-Attribut einfach (so wie das alt auch) title="Feuerwehrmann" wäre aber dem Leser ein Bild von der verlinkten Seite und die ersten 30 Wörter angezeigt würden. Die Wörter an sich könnte ich bei title="" zwischen den "" setzen aber das Bild wäre noch klasse.

Da das Header-Bild der einzelnen Beiträge immer im div mit der klasse featured-image sitzt, könnte man das bestimmt nutzen, oder? Auch die Klassen image-popup und attachment-colormag-featured-image size-colormag-featured-image wp-post-image sind immer gleich.

Habe gelesen, dass man title nicht "umstylen" kann aber vielleicht kann man bei CSS unter Stylesheet (style.css) etwas einfügen, damit interne links automatisch den div mit featured-image und 30 Wörter von dem Text ausgeben. Der Text liegt immer in dem DIV mit der Klasse class="entry-content clearfix".

Habe nicht so den Plan davon aber da jeder Beitrag dieselben "Class-Wörter" hat, kann man bestimmt einen Befehl geben der in Worte gefasst, das bewerkstelligt.

Nimm von dem internen Link das Header-Bild aus featured-image und füge noch 30 Wörter bzw. 150 Zeichen aus entry-content clearfix und gib, wenn eine Maus darüber fährt ein Fenster aus, welches 240 mal 80 Pixel groß ist und sowohl das Bild als auch den Text ausgibt.

Von der Ausrichtung sollte das Bild oben im Fenster sein und darunter der kurze Textauszug mit … am Ende. Das soll den Leser eine Vorschau geben, bevor dieser Klickt.

---- 1
https://demo.themegrill.com/colormag/2015/03/24/destruction-in-montania/

<div class="featured-image"> <a href="https://demo.themegrill.com/colormag/wp-content/uploads/sites/20/2015/03/fireman-100722_1280.jpg" class="image-popup"><img src="https://demo.themegrill.com/colorma...es/20/2015/03/fireman-100722_1280-800x445.jpg" class="attachment-colormag-featured-image size-colormag-featured-image wp-post-image" alt="" loading="lazy" width="800" height="445"></a></div>
----

---- 2
https://demo.themegrill.com/colormag/2015/03/24/invention-of-advance-technology/

<div class="featured-image"> <a href="https://demo.themegrill.com/colormag/wp-content/uploads/sites/20/2015/03/vehicle-193213_1280.jpg" class="image-popup"><img src="https://demo.themegrill.com/colorma...es/20/2015/03/vehicle-193213_1280-800x445.jpg" class="attachment-colormag-featured-image size-colormag-featured-image wp-post-image" alt="" loading="lazy" width="800" height="445"></a></div>
---


<div class="entry-content clearfix"><p>Text</p></div>


Bei Wikipedia sieht der Link ganz normal aus und es wird 1 zu 1 so ausgegeben, wie ich es auch gerne auf meiner Seite hätte.
 

Anhänge

  • 1.png
    1.png
    117,9 KB · Aufrufe: 2
Werbung:
Zurück
Oben