Eric Lowry

<p><a href="http://ericlowry.fr/en/development/#el-gallery" title="EL-Gallery, the lightweight wordpress gallery" rel="nofollow ugc">EL-Gallery</a> will simply adapt to your website’s width without any fuss or hours of configuration.</p>
<p>A few simple options are at your disposal if you wish, but the plugin will work perfectly well as soon as it is installed.</p>
<h4>Details</h4>
<p>I am not a professional developer, but there were no plugins that were both simple enough and could adapt to responsive design. This is why I chose to code this plugin.</p>
<p>EL-Gallery should function properly on any browser that supports both CSS3 and javascript.</p>
<p>If you have any suggestions or questions, please <a href="http://ericlowry.fr/en/contact/" title="Contact Eric Lowry (Plugin Author)" rel="nofollow ugc">contact me</a> directly, or propose changes on <a href="https://github.com/ELowry/EL-Gallery" title="EL-Gallery on GitHub" rel="nofollow ugc">this project’s GitHub page</a>.</p>
<p>This plugin is designed to function on any type of machine, and for it to best function on mobile devices, we reccomend you install the <a href="https://wordpress.org/plugins/wp-mobile-detect/" title="Plugin : WP Mobile Detect" rel="ugc">WP Mobile Detect</a> plugin.</p>
<p>EL-Gallery is currently available in both English and French. If you wish to help translate it into another language, please <a href="http://ericlowry.fr/en/contact/" title="Contact Eric Lowry (Plugin Author)" rel="nofollow ugc">contact me</a>.</p>
<h4>Configuration</h4>
<p>Once installed, you will find the configuration menu for EL-Gallery in the “Appearance” section of  your wordpress administration page.</p>
<p>There you will be able to modify the duration of each slide as well as a few other functions:</p>
<ul>
<li>EL-Gallery uses responsive design, and you may wish to choose a specific page width at which the thumbnails will go from 8 per line to 5 per line.</li>
<li>You may wish to disable the links on a gallery’s images.</li>
<li>If you have installed the <a href="https://wordpress.org/plugins/wp-mobile-detect/" title="Plugin : WP Mobile Detect" rel="ugc">WP Mobile Detect</a> plugin, don’t forget to activate the corresponding option so images may display in a lighter format when on mobile devices.</li>
<li>You can use the following <a href="https://codex.wordpress.org/Shortcode_API#Overview" title="About Shortcode Attributes" rel="nofollow ugc">shortcode parameters</a>:
<ul>
<li><em>nopause=”1″</em> to remove the pause button and autoplay functionality</li>
<li><em>nothumb=”1″</em> to remove the thumbnail display.</li>
</ul>
</li>
</ul>
<h4>Examples</h4>
<ul>
<li>http://ericlowry.fr/en/</li>
<li>http://alpha-gamma.fr/</li>
</ul>
<h4>Contributors</h4>
<ul>
<li>Andrew Kurtis for <a href="http://webhostinghub.com" rel="nofollow ugc">WebHostingHub</a>.</li>
</ul>
<h3>Donations</h3>
<p>http://ericlowry.fr/en/development/#el-gallery (donate button to the right)</p>


EL-Gallery

EL-Gallery is an elegant untra-lightweight javascript & css gallery replacement for Wordpress.

Nick Halsey

<p>This plugin automatically adds CSS3 transitions to your website/blog and the WordPress admin. Links, etc. get animated transitions between their normal and hover states. CSS3 Transitions are supported by the most recent version of every major browser (Chrome, Internet Explorer 10, Firefox, Opera, Safari); browsers without support will continue to render everything as they had before. This plugin adds the transitions (eye candy) to all <code><a></code> (link), <code><li></code> (list item, usually used in navigation menus), <code><img></code> (image), and <code><input></code> (form field and button) tags that have a hover or focus state defined (for example, if links change color when the mouse hovers over them). Other “buttons”, form elements, and WordPress-specific selectors are also targeted. Transitions are between .2 and .3 seconds in duration, so they shouldn’t cross the line between nice and distracting; however, depending on the colors used in your theme, the transitions may not be noticeable.</p>
<p>Also, please note that image sprites simply don’t work well with blanket css3 transitions. If you see wierd animations where images scroll between their normal and hover states, they’re using sprites. Depending on where the sprites are used, there are various ways to prevent the behavior on those elements, while retaining transitions where desired. One method is to add an inline style attribute to those elements: <code>style="transition: none; -webkit-transition: none;"</code>. Adding the css to your theme will override the plugin’s css as long as you target the elements using sprites by class or id.</p>
<p>Please feel free to offer any feature suggestions you might have and I will consider them for future releases.</p>
<h4>CSS3 Transitions UX Theory</h4>
<p>Because of the way our brains process images, in simple terms, instant/sudden changes are generally not as well perceived as more gradual ones. In the physical space, we never see instant changes, like slides changing with no animation in a PowerPoint, but with digital technology this is a very common practice. When websites make use of hover states, for example, if a link changes color when the mouse hovers over it, they exhibit small, but instant visual changes. Adding the css3 transitions makes these changes more gradual, and therefore easier on the eye. For this same reason, operating systems now tend to make use of a lot of animations. There’s a lot of neuroscience behind these concepts, but I’m not well versed in that. Basically, <em>slight</em> animations generally look better than instant changes. Some people will argue that things aren’t as “snappy” or seem slugish with transitions, but if that’s the case, it’s only a matter of adjusting the animation timing function and duration.</p>


CSS3 Transitions

This plugin automatically adds CSS3 transitions to your website/blog and the WordPress admin. Links, etc. get animated transitions between their norma …

EL-Gallery vs CSS3 Transitions