galleria fotografica che da problemi con Internet Explorer

asevenx

Utente Attivo
7 Nov 2009
312
0
16
Salve, ho trovato una galleria fotografica in javascript che volevo inserire su un sito, ma se apro lo script con IE la gallery non gunziona bene. La gallery in questione è la seguente http://www.html.it/demo/javascript/37606/demo_index.html (apritela con diversi browser, tra cui IE per vedere la differenza di funzionalità). A questo punto avrei bisogno di una mano per renderlo funzionale anche con IE, oppure conoscete un javascript simile (possibilmente con le mignature sotto) che sia compatibile con tutti i browser? Grazie
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, a me fa lo stesso effetto anche su IE (versione 11) comunque non è difficile da fare
prova questo esempio
HTML:
<html>
    <head>
        <title>Esempio slide</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var images = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg", "07.jpg", "08.jpg"];
                var dir = "img";
                for (i in images) {
                    $(".contenitore_thumbs").append("<img src='" + dir + "/" + images[i] + "' alt='" + images[i] + "'/>");
                }
                $(".contenitore_thumbs,input[name='right'],input[name='left']").height($(".contenitore_thumbs img").height());
                $(".contenitore_thumbs").css("padding-left", "-" + $(".contenitore_thumbs img").width() * 4 + "px");
                $(".contenitore_thumbs img").click(function() {
                    $(".contenitore_immagine img").attr("src", $(this).attr("src"));
                });
                $(".contenitore_arrow input").click(function() {
                    if ($(this).attr("name") === "left") {
                        $(".contenitore_thumbs").prepend($(".contenitore_thumbs img").last().hide().show());
                    } else {
                        $(".contenitore_thumbs").append($(".contenitore_thumbs img").first().hide().show());
                    }
                });
            });
        </script>
        <style type="text/css">
            .contenitore, .contenitore_thumbs,.contenitore_immagine {
                overflow: hidden;
            }
            .contenitore {
                width: 500px;
            }
            .contenitore_thumbs img{
                width: 25%;
                float: left;
            }
            .contenitore_immagine img{
                width: 100%;
            }
            input[name="left"],input[name="right"] {
                border: none;
                cursor: pointer;
                background-color: black;
                color:white;
                font-weight: bold;
            }
            input[name="left"] {
                float: left;
            }
            input[name="right"] {
                float: right;
            }
        </style>
    </head>
    <body>
        <div class="contenitore">
            <div class="contenitore_arrow">
                <input type="button" name="left" value="<"/>
                <input type="button" name="right" value=">"/>
            </div>
            <div class="contenitore_thumbs"></div>
            <div class="contenitore_immagine">
                <img src="img/01.jpg">
            </div>
        </div>
    </body>
</html>
Sistemi il css come preferisci e il gioco è fatto