Mouseover Gallery

There are countless Galerien-Plugins in WordPress, nevertheless I didn’t find any which corresponds to my wishes: On the left or on the right a Thumbnail overview which demonstrates the enlarged picture with title on the opposite side when one goes about the suitable Thumb with the mouse. Actually, I am not a Plugin programmer,such that nothing else was left to me as to reprogram an available Plugin in such a way that it fulfils my wishes. For this purpose the image gallery reloaded from Daniel Sachs has been particularly suitable. Because I like this gallery as it is and would like to use it in parallel, therefore I have reworked a copy of it and have introduced a new Shortcode: gallerymo . In this manner one can use the standard gallery or Davids in parallel. If only the Shortcode gallerymo is used the system generates 2 div-s with the classes left_part and Therefore [gallerymo] changes automatically to
<div class="right_part">[gallerymo ]</div>
If one still wants to insert other content, i. gen. texts in both columns one must define these containers before in the html-view of the editor and place the contents respectively. On the left side one can place only contents to the beginning, then the picture enlargement occurs. The reason is easy: there is no place holder for the picture.
Here an example follows:

The enlargemennt occurs here
The Thumbs occur on the right. I recommend the size 50×50 for the thumbs.

And after the gallerymo tag text can be still placed. The title for the thumbnail-overview is automatically taken over from the post title. At the moment he can be suppressed only with CSS means.

Then text after the right_part-Div is placed as expected after both columns.
You can find considerably more example under http://nord-deutsche-treppen.de .

A small thank-you?

This post is also available in Deutsch.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>