Comment modifier le déclencheur d'agrandissement du script JavaScript Fisheye ?

Question

J'utilise le plugin jQuery Fisheye (ici) sur mon site (lien vers mon site).Comme vous pouvez le voir, il y a 9 "bulles" et lorsque vous déplacez votre souris sur l'un d'eux, il sera agrandi.

Est-il possible d'avoir une de ces "bulles" sur sa taille maximale par défaut, donc lorsqu'un visiteur charge la page, il verra 8 petites bulles et une bulle "de taille maximale"?

MODIFIER:J'ai essayé d'ajouter une nouvelle "classe" CSS pour l'effet "grosse bulle".Maintenant, le problème est (comme vous pouvez le voir dans le lien ci-dessus) que la grosse bulle semble être au-dessus de la petite bulle à gauche.

j'ai essayé d'ajouter margin et padding à la grande bulle mais cela n'aide pas, je suppose que parce que toutes les petites bulles sont float:right.

Mon code 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>

Mon style:

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

Comme les éléments commencent à redimensionner lorsque la souris est proche (pas terminée), je dirais que cela est basé sur l'emplacement de la souris.Comme vous ne pouvez pas déplacer le curseur de la souris avec javascript, je ne pense pas que vous puissiez déclencher cela.

Il est temps de trouver une autre méthode, comme définir les proportions de votre grand élément en CSS.Si vous ouvrez Firebug (ou un autre inspecteur) et observez l'élément, vous verrez la gauche et la largeur modifiées à mesure que la souris se rapproche.Choisissez quelques valeurs et définissez-les via CSS.