Supersized - problemi visualizzazione transizioni in chrome

[elisa21]

ciao a tutti,
devo implementare una galleria a tutto schermo, ho optato per supersized, modificandola andando a pescare le immagini da database. Come dal titolo del post, visualizzando la pagina con mozilla nessun problema, vedo la transizione fade in modo corretto, mentre su chrome il passaggio da un'immagine all'altra avviene come se non fosse presente la transizione.

Ho fatto un test verificando la pagina demo e si vede correttamente, quindi deve essere qualcosa dell'implementazione che genera un errore, ma non riesco a capire quale sia

questo è il codice che ho utilizzato:

        <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />
        
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.easing.min.js"></script>
        
        <script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
        <script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
        
        <script type="text/javascript">
            
            jQuery(function($){
                
                $.supersized({
                
                    // Functionality
                    slideshow               :   1,            // Slideshow on/off
                    autoplay                :    1,            // Slideshow starts playing automatically
                    start_slide             :   1,            // Start slide (0 is random)
                    stop_loop                :    0,            // Pauses slideshow on last slide
                    random                    :     0,            // Randomize slide order (Ignores start slide)
                    slide_interval          :   3000,        // Length between transitions
                    transition              :   1,             // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                    transition_speed        :    1000,        // Speed of transition
                    new_window                :    1,            // Image links open in new window/tab
                    pause_hover             :   0,            // Pause slideshow on hover
                    keyboard_nav            :   1,            // Keyboard navigation on/off
                    performance                :    3,            // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                    image_protect            :    1,            // Disables image dragging and right click with Javascript
                                                               
                    // Size & Position                           
                    min_width                :   0,            // Min width allowed (in pixels)
                    min_height                :   0,            // Min height allowed (in pixels)
                    vertical_center         :   1,            // Vertically center background
                    horizontal_center       :   1,            // Horizontally center background
                    fit_always                :    0,            // Image will never exceed browser width or height (Ignores min. dimensions)
                    fit_portrait             :   1,            // Portrait images will not exceed browser height
                    fit_landscape            :   0,            // Landscape images will not exceed browser width
                                                               
                    // Components                            
                    slide_links                :    'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                    thumb_links                :    0,            // Individual thumb links for each slide
                    thumbnail_navigation    :   0,            // Thumbnail navigation
                    slides                     :      [            // Slideshow Images


<%
    Set objRSFoto = Server.CreateObject("ADODB.Recordset")
    objsqlFoto = "SELECT * FROM " &strDbTable& "galleria WHERE gl_id_cat = 8 AND gl_status_foto = 1 ORDER BY gl_anno ASC;"
    objRSFoto.Open objsqlFoto, DFCon, 1, 1
    If Not objRSFoto.EOF Then
        
        x = ","
        While Not objRSFoto.Eof
        
%>                

                                                    {image : 'foto/<%=objRSFoto("gl_foto_big")%>', title :'<%=Pulisci(objRSFoto("gl_desc"))%>', thumb :'wbresize.aspx?f=/galleria/foto/<%=objRSFoto("gl_foto_big")%>&c=50&h=150&o=0'}<%=x%> 

<%
        objRSFoto.MoveNext
        Wend 
    Else
        x = ""
    End If
    PuliziaRS(objRSFoto)
%>
                                                   
                                                ],
                                                
                    // Theme Options               
                    progress_bar            :    1,            // Timer for each slide                            
                    mouse_scrub                :    0
                    
                });
            });
            
        </script>
        
    </head>

<body>

    <!--Thumbnail Navigation-->
    <div id="prevthumb"></div>
    <div id="nextthumb"></div>
    
    <!--Arrow Navigation-->
    <a id="prevslide" class="load-item"></a>
    <a id="nextslide" class="load-item"></a>
    
    <div id="thumb-tray" class="load-item">
        <div id="thumb-back"></div>
        <div id="thumb-forward"></div>
    </div>
    
    <!--Time Bar-->
    <div id="progress-back" class="load-item">
        <div id="progress-bar"></div>
    </div>
    
    <!--Control Bar-->
    <div id="controls-wrapper" class="load-item">
        <div id="controls">
            
            <a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
        
            <!--Slide counter-->
            <div id="slidecounter">
                <span class="slidenumber"></span> / <span class="totalslides"></span>
            </div>
            
            <!--Slide captions displayed here-->
            <div id="slidecaption"></div>
            
          
            
        </div>
    </div>

</body>

dove sto sbagliando?
grazie per l'aiuto,
elisa

[cavicchiandrea]

Se la modifica apportata e solo quella di inserire le immagini lato server, mantenendo i nomi le classi i tag gli id la struttura e la logica dello script come in origine mi verrebbe da dire impossibile, se invece hai messo mano al codice js forse potresti ripartire dall'esempio funzionante a andare per step fai una modifica e lo provi fai la seconda modifica e lo provi, etc.... finché non trovi il problema.

[elisa21]

Se la modifica apportata e solo quella di inserire le immagini lato server, mantenendo i nomi le classi i tag gli id la struttura e la logica dello script come in origine mi verrebbe da dire impossibile, se invece hai messo mano al codice js forse potresti ripartire dall'esempio funzionante a andare per step fai una modifica e lo provi fai la seconda modifica e lo provi, etc.... finché non trovi il problema.

Ciao Andrea,
grazie della risposta, allora avevo anche io pensato di fare una cosa del genere, ovvero andare a step, pur non avendo toccato niente lato js e css. L'ho rifatto anche poco fa per vedere se mi sono persa qualcosa per strada ma niente... non appena vado ad inserire la parte dinamica

<%
    Set objRSFoto = Server.CreateObject("ADODB.Recordset")
   objsqlFoto = "SELECT * FROM " &strDbTable& "galleria WHERE gl_id_cat = 8 AND gl_status_foto = 1 ORDER BY gl_anno ASC;"
    objRSFoto.Open objsqlFoto, DFCon, 1, 1
    If Not objRSFoto.EOF Then
        
        x = ","
        While Not objRSFoto.Eof
        
%>                


                                                        {image : '../public/galleria/<%=objRSFoto("gl_foto_big")%>', title :'<%'=fissa(objRSFoto("gl_desc"))%>'}<%=x%>
                                                
<%
        objRSFoto.MoveNext
        Wend 
    Else
        x = ""
    End If
    PuliziaRS(objRSFoto)
%>

perdo la transizione fade
come può essere?

[cavicchiandrea]

Confronta i due codici html tra la versione "originale" e la tua se sono identici credo nulla se c'è anche solo una piccola differenza tipo un apice mancate un tag una virgoletta correggi il tuo

[elisa21]

Confronta i due codici html tra la versione "originale" e la tua se sono identici credo nulla se c'è anche solo una piccola differenza tipo un apice mancate un tag una virgoletta correggi il tuo

ho verificato ed è tutto uguale...ma...
nelle infinite prove che sto facendo, ho notato che se ridimensiono la finestra di chrome la transizione si vede perfettamente mentre se la lascio a tutto schermo il passaggio da una foto all'altra avviene a scatti, che posso fare??

[cavicchiandrea]

... che posso fare??

Credo molto poco, prova a vedere se trovi uno script simile che non abbia questo bug

[webbeloz]

ho verificato ed è tutto uguale...ma...
nelle infinite prove che sto facendo, ho notato che se ridimensiono la finestra di chrome la transizione si vede perfettamente mentre se la lascio a tutto schermo il passaggio da una foto all'altra avviene a scatti, che posso fare??

per andare dritti al nocciolo... va visto on-line.
Quando ridimensioni e la transizione è OK, che Browser usi...