• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mein jQuery Hover-Zooming geht nicht im IE7/8

Publisher

Neues Mitglied
Hallo miteinander

Link: Halskette - Sexy&Glamorous

Wenn man mit der Maus über die Bilder geht, zoomt das Bild wie ein Popup auf. Funktioniet wunderbar auf IE9, Firefox, Chrome, Safari.
Walidierungsfehler hat es im HTML und CSS keine gemäss w3.validator.org

An was könnte es liegen dass es im IE7/8 nicht geht?

Danke schon im Voraus für die Antworten!

Code:

JS
HTML:
$(window).load(function() {
    $('.product_img_link').bind('mouseenter', function() {
        $(this).addClass('hoveler').stop(true, true).animate({
            position : 'absolute',
            width : '229px',
            height : '229px',
            left : '-18px',
            top : '-40px'
        }, 200).find('img').stop(true, true).animate({
            width : '229px',
            height : '229px'
        }, 200);
        $('.product_img_link').not('.hoveler');
    });
    $('.product_img_link').bind('mouseleave', function() {
        $('.product_img_link').removeClass('hoveler').stop(true, true).animate({
            width : '141px',
            height : '141px',
            left : '25px',
            top : '0px'
        }, 200).find('img').stop(true, true).animate({
            width : '141px',
            height : '141px'
        }, 200);
    });
});

HTML
HTML:
<ul id="product_list" class="clear">
    <li class="erst ajax_block_product first_item item clearfix">
        <a href="http://sexy-glamorous.ch/shop/halskette/148-the-aztec-triangle.html" class="product_img_link" title="Der Aztec Triangle"><img class="zoomer" src="http://sexy-glamorous.ch/shop/148-182-home/the-aztec-triangle.jpg" alt="Der Aztec Triangle" width="229" height="229" style="width: 141px; height: 141px;"></a>
        <div class="center_block">
            <h3><a href="http://sexy-glamorous.ch/shop/halskette/148-the-aztec-triangle.html" title="Der Aztec Triangle">Der Aztec Triangle</a></h3>
        </div>
        <div class="right_block">
            <div>
                Preis: <span class="price" style="display: inline;">CHF 29,90</span>
                <br>
                <span class="availability">Auf Lager</span>
            </div>
            <a class="button" href="http://sexy-glamorous.ch/shop/halskette/148-the-aztec-triangle.html">Aktuelles Saison</a><div class="clear"></div>
        </div>
    </li>
    <li class="zweit ajax_block_product  alternate_item clearfix">
        <a href="http://sexy-glamorous.ch/shop/halskette/149-the-love-necklace.html" class="product_img_link" title="The Love Necklace"><img class="zoomer" src="http://sexy-glamorous.ch/shop/149-183-home/the-love-necklace.jpg" alt="The Love Necklace" width="229" height="229" style="width: 141px; height: 141px;"></a>
        <div class="center_block">
            <h3><a href="http://sexy-glamorous.ch/shop/halskette/149-the-love-necklace.html" title="The Love Necklace">The Love Necklace</a></h3>
        </div>
        <div class="right_block">
            <div>
                Preis: <span class="price" style="display: inline;">CHF 19,90</span>
                <br>
                <span class="availability">Auf Lager</span>
            </div>
            <a class="button" href="http://sexy-glamorous.ch/shop/halskette/149-the-love-necklace.html">Aktuelles Saison</a><div class="clear"></div>
        </div>
    </li>
    <li class="dritt ajax_block_product  item clearfix">
        <a href="http://sexy-glamorous.ch/shop/halskette/150-the-vintage-skull-necklace.html" class="product_img_link" title="The Vintage Skull Necklace"><img class="zoomer" src="http://sexy-glamorous.ch/shop/150-184-home/the-vintage-skull-necklace.jpg" alt="The Vintage Skull Necklace" width="229" height="229" style="width: 141px; height: 141px;"></a>
        <div class="center_block">
            <h3><a href="http://sexy-glamorous.ch/shop/halskette/150-the-vintage-skull-necklace.html" title="The Vintage Skull Necklace">The Vintage Skull Necklace</a></h3>
        </div>
        <div class="right_block">
            <div>
                Preis: <span class="price" style="display: inline;">CHF 24,90</span>
                <br>
                <span class="availability">Auf Lager</span>
            </div>
            <a class="button" href="http://sexy-glamorous.ch/shop/halskette/150-the-vintage-skull-necklace.html">Aktuelles Saison</a><div class="clear"></div>
        </div>
    </li>
    <li class="viert ajax_block_product  alternate_item clearfix">
        <a href="http://sexy-glamorous.ch/shop/halskette/151-golden-teeth-necklace.html" class="product_img_link" title="Goldene Zähne Halskette"><img class="zoomer" src="http://sexy-glamorous.ch/shop/151-185-home/golden-teeth-necklace.jpg" alt="Goldene Zähne Halskette" width="229" height="229" style="width: 141px; height: 141px;"></a>
        <div class="center_block">
            <h3><a href="http://sexy-glamorous.ch/shop/halskette/151-golden-teeth-necklace.html" title="Goldene Zähne Halskette">Goldene Zähne Halskette</a></h3>
        </div>
        <div class="right_block">
            <div>
                Preis: <span class="price" style="display: inline;">CHF 19,90</span>
                <br>
                <span class="availability">Auf Lager</span>
            </div>
            <a class="button" href="http://sexy-glamorous.ch/shop/halskette/151-golden-teeth-necklace.html">Aktuelles Saison</a><div class="clear"></div>
        </div>
    </li>
</ul>
 
Werbung:
Der Fehler tritt im jQuery auf. Das machts sehr schwer. Als Schuss ins Blaue würde ich folgndes versuchen:
In deiner global.css ist in Zeile 1509 top: 0; definiert. Änder das mal in top: 0px; Allerdings ist die Wahrscheinlichkeit, dass das hilft, nicht sehr groß ... schadet aber auch nichts. :cool:
 
Zurück
Oben