galleryFocus

Image-Effekt für LibraryAdmin und jQueryAdmin

Heller Hintergrund

Dunkler Hintergrund

Anwendung

Plugin installieren und Preset erstellen.
Standardmäßig wirkt das Plugin nun auf Bilder im Div class="content" oder id="content".
Die einzelnen Werte sind bequem im Einstellungsdialog änderbar.

Update: Es wurde nachträglich noch eine CSS-Anweisung zugefügt um schon bei Betreten der Seite den Transparenzeffekt zu erzielen und nicht bei der ersten Mausbewegung.

autor: mediaupstream.com/sandbox/gallery-focus/

TIPP um auch auf hellen Hintergründen den abgedunkelten Effekt zu erzielen

Dazu wird jedes Bild automatisch in ein Div mit schwarzem Hintegrund gepackt.
Preset wie folgt ändern bzw. kopieren und einfügen :

<script type="text/javascript" src="{WB_URL}/modules/jqueryadmin/plugins/galleryFocus/jquery.galleryFocus.min.js"></script>
<!-- position: body-->
<script type="text/javascript">
  if ( typeof jQuery != undefined ) {
    jQuery(document).ready(function($){
    jQuery('.content img, #content img').each(function() {
           var iW = jQuery(this).attr("width");
         //var iH = jQuery(this).attr("height");
      jQuery(this).wrap("<div style='background-color:#000;width:"+ iW +"px' />")
    }).css('opacity','0.7');
    jQuery('.content img, #content img').galleryFocus({
          'radius': 400,    // 'radius' - default: 400 - set the source radius size
          'fadeTo': 0.7,      // 'fadeTo' - default: 0.2 - the min/max value to fade elements to depending on the value of 'invert'
          'source': 'cursor',  // 'source' - default: 'cursor' - if set to a class or ID the source will be the center of that DOM element
          'invert': false,    // 'invert' - default: false - Inverts the direction in which elements fade from the 'source'
          'overlay': false    // 'overlay' - default: false - displays an overlay to visualize the 'source' influence
    });
  });
  }
</script>