Come faccio a modificare il JavaScript Fisheye script di allargamento trigger?

Question

Sto usando jQuery Fisheye plugin (qui nel mio sito (link al mio sito).Come potete vedere, ci sono 9 "bolle" e quando si sposta il mouse su uno di essi, verrà allargata.

E ' possibile avere una di quelle "bolle" nella sua dimensione massima, come di default, così, quando un visitatore carica la pagina che vedrà 8 piccole bolle e una "massima dimensioni" bolla?

EDIT: Ho provato ad aggiungere un nuovo css "di classe" per la "grande bolla" di grande effetto.Ora il problema è (come si può vedere nel link attched sopra) che la grande bolla sembra essere in cima alla piccola bolla di sinistra.

Ho provato ad aggiungere margin e padding per il big-bubble stile, ma questo non aiuta, Credo perché tutte le piccole bollicine float:right.

Il mio codice 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>

Il mio stile:

/* 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

Come gli elementi di iniziare a ridimensionare quando il mouse è vicino (non oltre), direi che si basa sulla posizione del mouse.Come non è possibile spostare il cursore del mouse con javascript, non credo che si può attivare questo.

Il tempo di trovare un altro metodo, come ad esempio le proporzioni del vostro grande elemento in CSS.Se tu apri Firebug (o un altro ispettore) e guarda l'elemento, vedrete la sinistra e la larghezza di essere cambiato come il mouse si avvicina.Scegliere alcuni valori e li tramite CSS.