Mouseover Gallery

Es gibt unzählige Galerien-Plugins in WordPress, dennoch habe ich keines gefunden, das meinen Wünschen entspricht: Links oder rechts eine Thumbnail-Übersicht, die dann auf der gegenüberliegenden Seite das vergrößerte Bild mit Titel erscheinen lässt, wenn man über das entsprechende Thumb mit der Maus geht. Da ich eigentlich kein Plugin-Programmierer bin, blieb mir nichts anderes übrig als ein vorhandenes Plugin so zurechtzubiegen, dass es meine Wünsche erfüllt. Als besonders geeignet hat sich dabei die Image gallery reloaded von Daniel Sachs herausgestellt. Da ich diese Galerie so, wie sie ist, mag und parallel einsetzen möchte und es deshalb auch nicht viel Sinn machte, sie noch weiter zu parametrisieren, habe ich eine Kopie überarbeitet und einen neuen Shortcode: gallerymo eingeführt. Auf diese Weise kann man die Standardgalerie oder Davids parallel nutzen. Wenn nur der Shortcode gallerymo verwendet wird erzeugt das System 2 div-s mit den Klassen left_part und right_part.Also aus [gallerymo]
wird automatisch:
<div class="right_part">[gallerymo ]</div>
Wenn man aber in den beiden Spalten noch andere Inhalte, i. allg. Text unterbringen will, muss man diese Container vorher in der html-Sicht des Editors definieren und die Inhalte ensprechend platzieren. Auf der linken Seite kann man nur Inhalte an den Anfang platzieren, danach erfolgt die Bildvergrößerung. Der Grund ist einfach: es gibt keinen Platzhalter für das Bild, vielleicht später einmal.

Hier noch ein Beispiel:

Hier erscheint die Vergrößerung
Die Thumbs erscheinen rechts. Empfehlung: stellen Sie die Größe auf 50×50 ein.

Und nach dem gallerymo-Tag kann auch noch Text platziert werden. Der Titel für die Thumbnailübersicht wird automatisch vom Post-Titel übernommen. Zur Zeit kann er nur mit CSS-Mitteln unterdrückt werden.

Text nach dem right_part-Div wird dann erwartungsgemäß nach den beiden Spalten platziert.
Bedeutend mehr Beispiel könnt Ihr unter http://nord-deutsche-treppen.de finden.

Ein kleines Dankeschön?
Leuchtturm Poel

Eindrücke von der Insel Poel

7 Gedanken zu „Mouseover Gallery

  1. Hinke

    Hello Dietrich, thanks for yuor great plugin!

    I have one question though, is it possible to get the Mouseover gallery in a table rather than in div’s?
    For better control I would like to have thumbnails and main image in different cells of a table.
    Tried all kinds of things but could not get the main image and the thumbnails separated within the existing system/code.

    How and especially where could I arrange this?

    Thanks in advance! Hinke

    1. Dietrich Koch

      Hello Hinke,
      I don’t think, it is possible without reprogramming this plugin and I don’t think , it is a good idea. Perhaps it is possible to interpret the div’s as tables with help of CSS. But why? The div’s can be much better controlled than a table.
      Dietrich

      1. Hinke

        Dietrich, thanks for your reply! I’m afraid I’m more of an old school web designer and don’t get along very with div’s, but guess I’ll have to learn to work better with them then. Thanks anyway and keep up the good work.

  2. David

    Dietrich, I love your plugin it really helps a lot. But I have a conflict. It works just fine, but I installed another plugin and the other plugin wont work with yours installed. Im wondering if its a javascript conflict. And is there a way to update your javascript file. As this plugin is a lot newer and I think calls out the new javascript version.

    Thank You

    1. Dietrich Koch

      Hi David, sometimes it depends on the order or priority the plugins are called on. Sorry, I cannot give you more suggestions. On the other hand my plugins is a little outdated. It is not applicable for smartphones.
      Dietrich

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

captcha

Please enter the CAPTCHA text

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>