610 messaggi dal 11 febbraio 2013
ciao
nella mia gallery di immagini ho notato che se lascio la finestra e poi ritorno
l'immagine non è piu centrata nel div che la avvolge... da cosa può dipendere

Questo accade sia con animate() che con show()


 galleryImage.stop().hide('slide', { direction:'left' }, function () {
                 ResetGallery();
                 galleryImage.attr("src", myArrImages[currentPage]);
                 galleryImage.stop().show({
                     direction: 'left',
                     duration: 1500,
                     effect: 'slide'
                 });
             }, 1500);
             
             ...
             galleryImage.stop().animate({
                 "margin-left": "+=450px",
                  duration: 2000
             }, function () {
                 ResetGallery();
                 galleryImage.attr("src", myArrImages[currentPage]);

                 galleryImage.stop().animate({
                     "margin-left": "-=450px",
                     duration: 2000
                 });
             });



inoltre vorrei stoppare lo slider se lascio aperta la pagina poi ci ritorno.
qual'e l'evento migliore

grazie per l'aiuto
Modificato da jjchuck il 10 aprile 2018 18.14 -
10.683 messaggi dal 09 febbraio 2002
Contributi
Ciao,
per la questione dell'immagine centrata non so cosa consigliarti, dovrei vedere un esempio funzionante.
Invece, per la questione del fermare l'animazione se l'utente cambia tab, si può fare con la Page Visibility API di HTML5. Qui c'è la documentazione e degli esempi:
https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

Citano esattamente il tuo caso:

Let's consider a few use cases for the Page Visibility API.
A site has an image carousel that shouldn't advance to the next slide unless the user is viewing the page
...


ciao,
Moreno

Enjoy learning and just keep making
610 messaggi dal 11 febbraio 2013
per bloccare l'animazione ho fatto cosi

$(window).on('blur', function () {
             StopSlider();
             galleryImage.css({ left: 0 });
         });


per quel che riguarda il fatto che perda il "centro"
negli eventi di paginazione ho messo

[codegalleryImage.css({left:0});]


cmq questo è il lavoretto che sto facendo
ogni consiglio sarà prezioso
grazie mille

https://fiddle.jshell.net/jonata/11n838j2/2/

è il primo fiddle che faccio spero di aver fatto correttamente