JavaScript Fisheyeスクリプトの拡大トリガを調整するにはどうすればよいですか？

Question

私のサイト（link to my site）にjQuery Fisheyeプラグイン（here）を使用しています。 ご覧のとおり、9つの「バブル」があり、そのうちの1つにマウスを移動すると、 が拡大されます。

これらの「バブル」のいずれかを最大サイズでデフォルトの にすることは可能ですか？訪問者がページを読み込むと、8つの小さなバブルと1つの「最大サイズ」のバブルが表示されますか？

EDIT： 「大きなバブル」効果のための新しいCSS「クラス」を追加しようとしました。 大きなバブルが左側の小さなバブルの上にあるように見えるという問題があります（上のリンクでわかるように）。

すべての小さな気泡がfloat:rightているので、私は推測する私は大きなバブルスタイルにmarginとpaddingを追加しようとしましたが、それは助けにはならない、 。

私のHTML/PHPコード：

<script type="text/javascript"> 

    $(document).ready(
     function() 
     { 
      $('#dock2').Fisheye(
       { 
        maxWidth: 150, 
        items: 'a', 
        itemsText: 'span', 
        container: '.dock-container2', 
        itemWidth: 80, 
        proximity: 80, 
        halign : 'center', 
        valign : 'bottom' 
       } 
      ) 


      $('#auto_big').addClass('dock-item2-big'); 

      $('.dock-item2').mouseover(function() { 
       $('#auto_big').removeClass('dock-item2-big'); 
      }); 
      $('.dock-item2').mouseout(function() { 
       $('#auto_big').addClass('dock-item2-big'); 
      }); 


     } 
    ); 

</script> 
    <div class="dock2" id="dock2"> 
    <div class="dock-container2"> 
<?php $categories = $this->requestAction('categories/index/direction:asc/limit:9'); ?> 
<?php foreach ($categories as $category): ?> 

    <?php 
     if($category['Category']['id'] == 27) 
      $special = " id='auto_big'"; 
     else 
      $special = ""; 
    ?> 

    <a class="dock-item2" href="/categories/show/<?=$category['Category']['id'];?>"<?=$special?>><span><img src='/img/cat/<?=$category['Category']['id'];?>_title.png'></span><img src="/img/cat/<?php echo $category['Category']['picture']; ?>" alt="<?php echo $category['Category']['name']; ?>" /></a> 
<?php endforeach; ?> 
    </div> 
</div> 

私のスタイル：

/* dock2 - bottom */ 
#dock2 { 
    width: 100%; 
    bottom: 0px; 
    position: relative; 
    left: 0px; 
} 
.dock-container2 { 
    position: absolute; 
    height: 50px; 
    /*background: url(images/dock-bg.gif);*/ 
    /*padding-left: 20px;*/ 
} 
a.dock-item2 { 
    display: block; 
    font: bold 12px Arial, Helvetica, sans-serif; 
    width: 40px; 
    color: #000; 
    bottom: 0px; 
    position: absolute; 
    text-align: center; 
    text-decoration: none; 
} 
.dock-item2 span { 
    display: none; 
    padding-left: 20px; 
    font-size:20px; 
    float:right; 

} 
.dock-item2 img { 
    border: none; 
    margin: 5px 10px 0px; 
    width: 100%; 
} 



a.dock-item2-big { 
    display: block; 
    font: bold 12px Arial, Helvetica, sans-serif; 
    width: 200px; 
    color: #000; 
    bottom: 0px; 
    position: absolute; 
} 
.dock-item2-big span { 
    display:block; 
    padding-left: 20px; 
    font-size:20px; 
    float:right; 

} 

.dock-item2-big img { 
    border: none; 
    width: 220px; 
} 

Answer 1

項目は、マウスが（ない以上）の近くにあるときにサイズを変更するために開始すると、私はそれはに基づいていると言うだろうマウスの位置。 javascriptでマウスカーソルを動かすことができないので、私はあなたがこれを引き起こすとは思わない。

CSSで大きな要素の割合を設定するなど、別の方法を見つける時間。 Firebug（または別のインスペクタ）を開いて要素を見ると、マウスが近づくにつれて左と幅が変更されます。いくつかの値を選び、CSSで設定します。