Countdown

[tony85pa]

Salve a tutti e scusate la mia ignoranza, ho iniziato da pochissimo e spero pian piano di capirci qualcosa quindi spero che siate con me molto umani
ho questo script java che vorrei caricare sulla homa page del mio sito fatto in wordpress..
il countdown e' di 60 minuti e dovrebbe con delle immagini creare un countdown..ma non so' dove metterle e come help me plese...Vi ringrazio in anticipo siete gentilissimi!
ps. se c'e qualcosa di sbagliato vi prego di aiutarmi..

vi allego script

<script>var interval;
var minutes = 59;
var seconds = 59;
var firstCountdown = true;


function countdown(element) {
    interval = setInterval(function() {
        var mins, secs;
        if (seconds == 0) {
            if (minutes == 0) {
                clearInterval(interval);
                return;
            } else {
                seconds = 60;
            }
        }
        if (seconds == 59) {
            if (!firstCountdown) {
                minutes--;
            }
            firstCountdown = false;
        }
        mins = minutes < 10 ? '0' + minutes : String(minutes);
        secs = seconds < 10 ? '0' + seconds : String(seconds);
        secs = secs == 60 ? '00' : secs;
        var tempo = mins + secs + '';
        document.getElementById("countdown0").src = "../img/countdown/" + mins.substr(0, 1) + ".jpg";
        document.getElementById("countdown1").src = "../img/countdown/" + mins.substr(1, 1) + ".jpg";
        document.getElementById("countdown2").src = "../img/countdown/" + secs.substr(0, 1) + ".jpg";
        document.getElementById("countdown3").src = "../img/countdown/" + secs.substr(1, 1) + ".jpg";
        seconds--;
    }, 1000);
}
$(document).ready(function() {
    countdown('countdown');
    $("#testi-carousel").owlCarousel({ // Most important owl features 
        items: 1,
        itemsCustom: false,
        itemsDesktop: [1199, 1],
        itemsDesktopSmall: [980, 1],
        itemsTablet: [768, 1],
        itemsTabletSmall: false,
        itemsMobile: [479, 1],
        singleItem: false,
        startDragging: true,
        autoPlay: true
    });
    $('.main-flex-slider').flexslider({
        slideshowSpeed: 5000,
        directionNav: false,
        animation: "fade",
        controlNav: false
    });
});
</script>

[KillerWorm]

Ciao e benvenuto

Intanto dai uno sguardo qui tanto per essere più umani possibile.
Seconda cosa: quando posti del codice su questo forum, è opportuno usare gli appositi tag di formattazione. Dai uno sguardo al regolamento di sezione se non lo hai già fatto (lo trovi in ogni sezione/forum in alto tra i post in evidenza).

Ora vedo un po' cosa non funziona in quello script.. se non ti risponde prima qualcun altro.

[tony85pa]

Killer grazie della tempestiva risposta...hai ragione...sono molto inesperto e infatti piu' di affidarmi e mettermi nelle vostre mani non posso fare...chiedo scusa a tutti se ho sbagliato a scrivere qualcosa nel post..aspettando anziosamente tue news porgo saluti.

[tony85pa]

Qualcuno per una mano?.. Killer?

Cmq ho dimenticato di dirvi che ho creato la cartella da ftp nominandola img dentro questa ho creato una cartalla chiamata countdown dentro questa ho messo i 9 jpeg ogni jpeg ha la foto di un numero nominato con un numero esp 0.jpg 1.jpeg ec..
ma non succede nulla...dove sbaglio? che devo fare?

[KillerWorm]

Scusami ho avuto altro da fare.. gli indirizzi che vedo sullo script sono relativi e si riferiscono ad una cartella di un livello inferiori (indicato da "../") rispetto a dove sta girando lo script.. bisogna quindi capire da dove stai lanciando quello script.

Presumo sia in una tua pagina che sta (diciamo) sulla cartella principale e in questa ci sta la cartella "img", giusto?

In tal caso il percorso delle cartelle dovrà essere di questo tipo "/img/countdown/".

Chiaramente poi ci dovrà essere una parte html con gli elementi <img> sui quali dovrebbero essere specificati gli id usati sullo script:

Una cosa del genere:

<img id="countdown0" src="" alt=""><img id="countdown1" src="" alt="">:<img id="countdown2" src="" alt=""><img id="countdown3" src="" alt="">

Prova a controllare queste cose e facci sapere.

[tony85pa]

ciao Killer...allora lo script lo lancio da un post della homagape...
la parte in html mi manca..dove dovrei inserirla?
e poi non cita solo 4 img? io nella cartella ne ho nove come devo fare? devo cambiare anche nome a ogni jpeg?

[KillerWorm]

Scusa ma da dove hai preso quello script non c'era qualche indicazione su come utilizzarlo?

Teoricamente dovresti avere 10 file immagini, da 0 a 9 ma questo non c'entra niente con i tag <img> i quali invece fungono solo da segnaposto per le cifre che dovranno essere visualizzate. Ad esempio sulla tua pagina sarà mostrato "50:15", ogni cifra è in se un'immagine che, per essere visualizzata, deve stare dentro il tag <img>. Tutto qua.

Questa parte html dovrebbe stare nel punto in cui vuoi che appaia il countdown.

Non ti nascondo che quel sistema non mi piace molto. Da quel che vedo stai usando jQuery, sicuramente puoi trovare script o plugin più "eleganti".

[tony85pa]

Killer lo script lo preso girovagando in internet...
dall alto della mia ignoranza vorrei farti delle domande..
lo script che ti ho postato dove dovrei metterlo di preciso? (home page come semplice post o sul foglio di stile o non so...)
la parte html dove dovrei metterlo? (home page come semplice post o sul foglio di stile o non so...)
le immagini ho creato una cartella su ftp img/countdown (va bene o no?)
le immagini hai ragione sono 10 (comprensivo di zero che avevo dimenticato a contare)
sicuramente tu hai anche ragione nel dire che potrei trovare di meglio ( ogni tua parola per me e' legge!) ma io mi accontento se dio vuole di far funzionare questo script e se ci riesco lo devo solo a te...
mi servono le info passo passo per capire come inserire questo script...ringraziandoti per la pazienza aspetto tue news

[KillerWorm]

Quello che chiedi va oltre il semplice aiuto riferito ad uno script. Puoi capire tu stesso che ti servirebbe un tutor che ti spieghi passo passo cosa fare per utilizzare quella roba, partendo però dalle basi della programmazione web. Umanamente ti dico che non posso aiutarti in questo senso e che solitamente questo non è nello spirito del forum (vedi regolamento).

Se credi, puoi comunque attendere eventuali risposte da altri utenti.

Personalmente ti invito a cercare qualcosa di più pratico e alla tua portata, che magari sia documentato, così da poter capire come applicarlo sul tuo sito in WordPress. Puoi fare una ricerca del genere: https://www.google.it/#q=countdown+wordpress

Sicuramente troverai plugin, widget, estensioni o cos'altro che siano più facili da installare sul tuo sito.

Quello che posso fare è postarti un esempio funzionante con quello stesso script. Magari può tornarti utile per comprendere qualcosa di più:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
  </head>
  <body>
    <img id="countdown0" src="#" alt=""><img id="countdown1" src="#" alt="">:<img id="countdown2" src="#" alt=""><img id="countdown3" src="#" alt="">
    <script type="text/javascript">
      var interval;
      var minutes = 1;
      var seconds = 59;
      var firstCountdown = true;
      function countdown() {
        interval = setInterval(function() {
          var mins, secs;
          if (seconds == 0) {
            if (minutes == 0) {
              clearInterval(interval);
              return;
            } else {
              seconds = 60;
            }
          }
          if (seconds == 59) {
            if (!firstCountdown) {
              minutes--;
            }
            firstCountdown = false;
          }
          mins = minutes < 10 ? '0' + minutes : String(minutes);
          secs = seconds < 10 ? '0' + seconds : String(seconds);
          secs = secs == 60 ? '00' : secs;
          var tempo = mins + secs + '';
          document.getElementById("countdown0").src = "/img/countdown/" + mins.substr(0, 1) + ".jpg";
          document.getElementById("countdown1").src = "/img/countdown/" + mins.substr(1, 1) + ".jpg";
          document.getElementById("countdown2").src = "/img/countdown/" + secs.substr(0, 1) + ".jpg";
          document.getElementById("countdown3").src = "/img/countdown/" + secs.substr(1, 1) + ".jpg";
          
          //------------------------------------------------------------
          // Questo blocco sarebbe da eliminare ma lo metto come esempio.
          // Se le immagini non vengono trovate, il valore numerico sarà mostrato comunque
          // attraverso l'attributo alt.
          document.getElementById("countdown0").alt = mins.substr(0, 1);
          document.getElementById("countdown1").alt = mins.substr(1, 1);
          document.getElementById("countdown2").alt = secs.substr(0, 1);
          document.getElementById("countdown3").alt = secs.substr(1, 1);
          seconds--;
          //------------------------------------------------------------
          
        }, 1000);
      }
      
      countdown();
    </script>
  </body>
</html>

Ripeto, il sistema che è stato usato non mi piace, potrebbe essere ottimizzato parecchio.

[tony85pa]

Capisco cosa intendi.. e credimi ci sto' mettendo tutta la mia buona volonta' a capire...
intanto sono riuscito a far partire lo script in locale creando un file html e creando su c il percorso img/countdown/ con dentro i 10 file.jpeg
(pecchero' di presunzione ma il tuo script conteneva un errore i minuti erano a 1 l ho portato a 59).....
come vedi sto' cercando di arrivarci....adesso il file html dove lo metto?
su ftp? o in homepage? questo non mi e' ancora chiaro...