0

私は最近、画像オーバーレイ用のエキサイティングなjqueryプラグインに出くわしましたhttp://jobyj.in/adipoli/ テキストオーバーレイ機能があると言われていますが、それがどのように機能するかわかりません。

    <script>
  $('.hover').adipoli({
      'overlayText' : 'overlayText'
  });

このプラグインの効果が本当に好きですが、他のプラグインの提案を受け入れるように、ギャラリー名をオーバーレイとして配置する必要があるデフォルトのオーバーレイを行います。

4

1 に答える 1

0

ソース：jquery.adipoli.js

ライン: 64

//...
else if (settings.startEffect == "overlay") {
    element = $(this);
    element.hide();
    $(this).siblings('.adipoli-before').html(settings.overlayText).css({
//...

したがって、 を有効にするsettings.overlayTextには、settings.startEffectと等しくなければなりませんoverlay。これにより、動作するオーバーレイ デモのサンプル コードが得られます...

    $(function(){
        $('.hover').adipoli({
            'overlayText' : '<b>overLayText</b>',
            'startEffect' : 'overlay',
            'hoverEffect' : 'popout'
        });
    });

ライブデモはこちら: http://jsfiddle.net/tzE4V/2/

完全な JSfiddle.net デモ ソース:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
    <!--[if IE]>
                <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link href="http://jobyj.in/adipoli/css/adipoli.css" rel="stylesheet" type="text/css"/>

    <body>
      <p id="hello">Hello World</p>
      <img class="img-style row1" src="http://jobyj.in/adipoli/img/gallery-images/1_1.png"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script src="http://jobyj.in/adipoli/js/jquery.adipoli.min.js"></script>
      <script type="text/javascript">
        $(function(){
            $('.row1').adipoli({
          'overlayText' : '<b>overLayText</b>',
                'startEffect' : 'overlay',
                'hoverEffect' : 'popout'
            });
        });
      </script>
    </body>
  </head>
</html>
于 2012-06-16T04:34:48.937 に答える