Как настроить триггер расширения скрипта JavaScript Fisheye?

Question

Я использую плагин jQuery Fisheye (here) на моем сайте (link to my site). Как вы можете видеть, есть 9 «пузырей», и когда вы нажимаете мышь на один из них, он будет увеличен.

Возможно ли иметь один из этих «пузырей» в максимальном размере по умолчанию, поэтому, когда посетитель загружает страницу, он увидит 8 маленьких пузырьков и один пузырь максимального размера?

EDIT: Я попытался добавить новый класс css для «эффекта большого пузыря». Теперь проблема (как вы можете видеть в ссылке, приведенной выше), что большой пузырь, кажется, находится на вершине маленького пузыря слева.

Я пытался добавить margin и padding в стиль большого пузыря, но это не помогает, я думаю, потому что все маленькие пузырьки float:right.

Мой код 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.