Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET
Nauč se s námi víc. Využij 50% zdarma na e-learningové kurzy.
discount week 50

Diskuze: Machr na webdesign - Javascriptová slideshow

Aktivity
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:9.9.2013 16:37

Ahoj webdesigneři, v pravidelné minisoutěži o placku a samolepky si tento týden zkusíme naprogramovat jednoduchou slideshow v Javascriptu. Půjde o jednoduchý doplněk, který bude buď v nějakém časovém intervalu nebo po kliknutí střídat obrázky. Jak propracované to naprogramujete záleží jen na vás, mělo by jít alespoň určit jaké obrázky zobrazovat. Můžete použít jQuery (samozřejmě ne existující pluginy na slideshow :)). JS tu v soutěžích moc nebyl a pokud ano, tak se nezúčastnilo moc lidí. Máte tedy šanci si ho zopakovat. Čas si dejme do neděle 15.8. do 18:00.

Odpovědět
9.9.2013 16:37
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na David Čápka
Ondrca:9.9.2013 16:51

Bude hodně špatné když sem někdo dá "prasekód"?

Nahoru Odpovědět
9.9.2013 16:51
Zase jsem o něco chytřejší
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Ondrca
David Čápka:9.9.2013 16:53

Pokud se ptáš, jestli to musí být objektově, tak nemusí. Ale globální proměnné prosím ne.

Nahoru Odpovědět
9.9.2013 16:53
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Odpovídá na David Čápka
Michal Žůrek - misaz:9.9.2013 16:53

pokud vyjde čas, tak skusím

 
Nahoru Odpovědět
9.9.2013 16:53
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na David Čápka
Ondrca:9.9.2013 16:57

Proč ne

var

?

Nahoru Odpovědět
9.9.2013 16:57
Zase jsem o něco chytřejší
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Ondrca
David Čápka:9.9.2013 17:07

Var je správně. Pokud chceš diskutovat o tom co znamená, tak si založ nové vlákno, tohle je vlákno soutěžní.

Nahoru Odpovědět
9.9.2013 17:07
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Daniel Vítek
Redaktor
Avatar
Odpovídá na David Čápka
Daniel Vítek:9.9.2013 17:08

Machr na Webdeing ? :)

Nahoru Odpovědět
9.9.2013 17:08
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na David Čápka
Ondrca:9.9.2013 17:08

Promiň, já nechci diskutovat, ale ptám se proč nemůžou být globální proměnné.

Nahoru Odpovědět
9.9.2013 17:08
Zase jsem o něco chytřejší
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na Ondrca
Jan Vargovský:9.9.2013 17:11

Protože to je prasárna.

 
Nahoru Odpovědět
9.9.2013 17:11
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Jan Vargovský
Ondrca:9.9.2013 17:12

Dobré vysvětlení :), díky.

Nahoru Odpovědět
9.9.2013 17:12
Zase jsem o něco chytřejší
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Daniel Vítek
Ondrca:9.9.2013 17:13

Pod webdesign se taky řadí JavaScript ne? :)

Nahoru Odpovědět
9.9.2013 17:13
Zase jsem o něco chytřejší
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na Ondrca
Jan Vargovský:9.9.2013 17:16

Reaguje nato, že tam chybí znak 's'.

 
Nahoru Odpovědět
9.9.2013 17:16
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Jan Vargovský
Ondrca:9.9.2013 17:17

Tak to se tedy omlouvám.

Nahoru Odpovědět
9.9.2013 17:17
Zase jsem o něco chytřejší
Avatar
Silvinios
Redaktor
Avatar
Silvinios:10.9.2013 21:18

Ahoj, jakým způsobem se soutěžní úloha odevzdává?

 
Nahoru Odpovědět
10.9.2013 21:18
Avatar
 
Nahoru Odpovědět
10.9.2013 21:27
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Silvinios
Ondrca:10.9.2013 21:34

Můžeš ji ale i nahrát sem , aby ji všichni viděli. :)

Nahoru Odpovědět
10.9.2013 21:34
Zase jsem o něco chytřejší
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na Silvinios
Petr Nymsa:10.9.2013 21:37

Nebo ještě lépe , hod to na nějaký FREE hosting, např. endora.cz :)

Nahoru Odpovědět
10.9.2013 21:37
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Petr Gürth
Redaktor
Avatar
Petr Gürth:13.9.2013 22:13

Tak přidávám svoji slideshow :-)
http://girtas.aspone.cz/…w/index.html

 
Nahoru Odpovědět
13.9.2013 22:13
Avatar
Milan Gallas
Redaktor
Avatar
Milan Gallas:14.9.2013 11:14

David Čápka takže stačí když to umístím na webhosting a nemusím ti posílat kódy. Nebo ti mám poslat kódy a popřípadě umístit na webhosting?

 
Nahoru Odpovědět
14.9.2013 11:14
Avatar
Odpovídá na Milan Gallas
Michal Žůrek - misaz:14.9.2013 11:15

když to umístíš na webhosting tak jsou kódy veřejné, a ano stačí to.

 
Nahoru Odpovědět
14.9.2013 11:15
Avatar
Milan Gallas
Redaktor
Avatar
Milan Gallas:14.9.2013 14:52

tak můj výtvor najdete na adrese:
http://gallas.jecool.net/
nikdy jsem slider nedělal, tak tam možná najdete nějaký nesrovnalosti a po soutěži bych byl rád i za nějaké rady.

 
Nahoru Odpovědět
14.9.2013 14:52
Avatar
Daniel Vítek
Redaktor
Avatar
Odpovídá na David Čápka
Daniel Vítek:15.9.2013 17:31

btw, doufám že jsi chtěl napsat 15.9...

Nahoru Odpovědět
15.9.2013 17:31
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
Daniel Vítek
Redaktor
Avatar
Odpovídá na Daniel Vítek
Daniel Vítek:15.9.2013 17:49

konečně jsem fixnul posledních pár bugů tak to sem přidávám :P
http://projekty.danvitek.cz/…t-slideshow/

Nahoru Odpovědět
15.9.2013 17:49
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
David Dostal
Redaktor
Avatar
David Dostal:15.9.2013 18:02

Na poslední chvíli jsem také něco splácal. https://www.dropbox.com/…k/EVPQA_72ax
Dělal jsem to na poslední chvíli, takže to ještě není ve formě Jquery pluginu a kód také není nic moc.

Editováno 15.9.2013 18:03
 
Nahoru Odpovědět
15.9.2013 18:02
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:15.9.2013 19:33

Řešení jsou všechna pěkná, proto jsem hodnotil hlavně použitelnost galerie jako webového doplňku.

Dan a fuulll - Výsledek je pěkný, v HTML kódu je však slideshow definována poměrně složitě. Podívejte se třeba na řešení Salatika, mělo by jít jen o jednoduchý seznam obrázků, zbytek automaticky obstará JS. Hlavně u Dana jsem překvapen že to vypadá docela dobře, už to prostě není ten klučina co tu píše o Batchi :)

Salatik - Hezký efekt a oddělení logiky galerie od HTML, minimalistický kód, tak to má být. Škoda, že jsi to nedotáhl do úplného konce, první obrázek se nezobrazí a nejsou nastylovaná tlačítka.

silvinious30 - Ten atribut class u každého obrázků je tam trochu navíc, ale chápu, že jsi to udělal bez použití jQuery. Kód máš pěkně objektový a zvládl jsi efekty v čistém JS.

Strašně jsem váhal mezi Salatikem a Girtasem, nakonec jsem dospěl k tomu, že Salatik už placku má a úplně to nedotáhl. Placku si tedy odnáší Petr Gürth a druhou ještě Silvinios.

Díky všem za účast a těším se příště. Budu moc rád, když své výtvory přidáte.

EDIT: Ještě jsem zapomněl, adresu pošlete x do zpráv :)

Editováno 15.9.2013 19:38
Nahoru Odpovědět
15.9.2013 19:33
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Daniel Vítek
Redaktor
Avatar
Odpovídá na David Čápka
Daniel Vítek:15.9.2013 19:58

Né, on mi tu placku prostě nedá :D

Nahoru Odpovědět
15.9.2013 19:58
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
Daniel Vítek
Redaktor
Avatar
Odpovídá na David Čápka
Daniel Vítek:15.9.2013 20:00

btw. zdá se mi to, nebo tu nikde není odkaz na výtvor Silvinios

Nahoru Odpovědět
15.9.2013 20:00
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
Odpovídá na Daniel Vítek
Michal Žůrek - misaz:15.9.2013 20:00

Zkoušej dál, mě se třeba webdesign povedl asi až taky nějak na 7. pokus. Předtím jsem nevyhrál ani s http://www.itnetwork.cz/…ce-zeleznice

 
Nahoru Odpovědět
15.9.2013 20:00
Avatar
Daniel Vítek
Redaktor
Avatar
Odpovídá na Michal Žůrek - misaz
Daniel Vítek:15.9.2013 20:03

A to jsem si myslel že bych s tím dnes mohl vyhrát :D

Nahoru Odpovědět
15.9.2013 20:03
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Daniel Vítek
David Čápka:15.9.2013 20:04

Jeho řešení je následující:

<!DOCTYPE html>
<!-- Reseni soutezni ulohy: Machr na webdesign - Javascriptova slideshow -->
<!-- Copyright (C) 2013 Silvinios -->
<html>
<head>
<meta charset="UTF-8">
<title>Slideshow</title>
<script type="text/javascript">

  /** Vytvori Slideshow objekt pro zadany identifikator DIV elementu. */
  function Slideshow(containerElementId) {
    this.images = [];
    var container = document.getElementById(containerElementId);
    var child = container.firstChild;
    while (child != null) {
      if (child.nodeName == "IMG") {
        this.images.push(child);
      }
      child = child.nextSibling;
    }
    this.previousIndex = 0;
    this.currentIndex = 0;
    this.timerId = null;
    this.updateTimeout = 25;
    this.updateStep = 0.05;
  }

  /** Aktualizuje snimek. */
  Slideshow.prototype.update = function() {
    var img1 = this.images[this.previousIndex];
    var img2 = this.images[this.currentIndex];
    var op = 0.0;
    var timeout = this.updateTimeout;
    var step = this.updateStep;
    var f = function() {
      img1.style.opacity = 1 - op;
      img2.style.opacity = op;
      op += step;
      if (op < 1) {
        setTimeout(f, timeout);
      } else {
        img1.style.opacity = 0;
        img2.style.opacity = 1;
      }
    };
    setTimeout(f, timeout);
  }

  /** Zobrazi nasledujici snimek. */
  Slideshow.prototype.next = function() {
    this.previousIndex = this.currentIndex++;
    if (this.currentIndex >= this.images.length) {
      this.currentIndex = 0;
    }
    this.update();
  };

  /** Zobrazi predchozi snimek. */
  Slideshow.prototype.previous = function() {
    this.previousIndex = this.currentIndex--;
    if (this.currentIndex < 0) {
      this.currentIndex = this.images.length - 1;
    }
    this.update();
  };

  /** Spusti slideshow. Snimky se stridaji po zadanem poctu milisekund. */
  Slideshow.prototype.start = function(millisec) {
    if (this.timerId == null) {
      var t = this;
      this.timerId = setInterval(function() {
        t.next();
      }, millisec);
    }
  };

  /** Zastavi slideshow. */
  Slideshow.prototype.stop = function(time) {
    if (this.timerId != null) {
      clearInterval(this.timerId);
      this.timerId = null;
    }
  }

  /** Povoli/zakaze tlacitko. */
  function setButtonEnabled(buttonId, enabled) {
    document.getElementById(buttonId).disabled = enabled ? null : 'disabled';
  }

  /** Inicializuje obsluhu tlacitek a spusti slideshow. */
  function initialize() {
    var slideshow = new Slideshow('slideshow');
    slideshow.update();
    var timeout = 2500;
    slideshow.start(timeout);
    setButtonEnabled('start', false);
    setButtonEnabled('stop', true);
    setButtonEnabled('previous', false);
    setButtonEnabled('next', false);

    document.getElementById('start').onclick = function() {
      slideshow.start(timeout);
      setButtonEnabled('start', false);
      setButtonEnabled('stop', true);
      setButtonEnabled('previous', false);
      setButtonEnabled('next', false);
    };
    document.getElementById('stop').onclick = function() {
      slideshow.stop();
      setButtonEnabled('start', true);
      setButtonEnabled('stop', false);
      setButtonEnabled('previous', true);
      setButtonEnabled('next', true);
    };
    document.getElementById('previous').onclick = function() {
      slideshow.previous();
    };
    document.getElementById('next').onclick = function() {
      slideshow.next();
    };
  }
</script>
<style type="text/css">
body {
  margin: 0;
  background-color: black;
}

input[type=button] {
  width: 100px;
}

div.slideshow {
  position: relative;
}

img.slide {
  width: 1280px;
  height: 800px;
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  opacity: 0;
}
</style>
</head>
<body onload="initialize()">
  <input type="button" id="start" value="Spustit" />
  <input type="button" id="stop" value="Zastavit" />
  <input type="button" id="previous" value="Předchozí" />
  <input type="button" id="next" value="Další" />
  <div class="slideshow" id="slideshow">
    <img class="slide" src="http://res2.windows.microsoft.com/resbox/en/windows/main/673123be-1940-4d0f-8e8f-e88d7b4ac407_6.jpg" />
    <img class="slide" src="http://res1.windows.microsoft.com/resbox/en/windows/main/3b50ecdd-5646-4c5b-9704-734b6bd72079_6.jpg" />
    <img class="slide" src="http://res1.windows.microsoft.com/resbox/en/windows/main/5f9d4db2-76c6-4166-9f80-d59800811ebc_6.jpg" />
    <img class="slide" src="http://res2.windows.microsoft.com/resbox/en/windows/main/ebf9f807-1f54-4b82-a3fe-862380833f9c_6.jpg" />
    <img class="slide" src="http://res1.windows.microsoft.com/resbox/en/windows/main/e9206635-053a-4964-8387-2fdd027c844f_6.jpg" />
    <img class="slide" src="http://res1.windows.microsoft.com/resbox/en/windows/main/65148472-c83e-4c00-b8c2-cd4bf1ba1796_6.jpg" />
    <img class="slide" src="http://res2.windows.microsoft.com/resbox/en/windows/main/df5c0b4c-34e3-458c-b2a5-27d26a14ee00_6.jpg" />
    <!-- Sem lze pridavat dalsi obrazky. Pro spravne zobrazeni je treba nastavit atribut class na "slide". -->
  </div>
</body>
</html>
Nahoru Odpovědět
15.9.2013 20:04
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
David Dostal
Redaktor
Avatar
Odpovídá na David Čápka
David Dostal:15.9.2013 20:58

Jej, v Chromu jsem to nezkoušel. Zdá se, že výška obrázku je zde nulová až do $(window).load(). Rovnou jsem i nastyloval tlačítka. Odkaz zůstává stejný.

Editováno 15.9.2013 20:58
 
Nahoru Odpovědět
15.9.2013 20:58
Avatar
Silvinios
Redaktor
Avatar
Odpovídá na Daniel Vítek
Silvinios:16.9.2013 7:44

Nechtěl jsem svůj kód zveřejňovat před ukončením soutěže.

 
Nahoru Odpovědět
16.9.2013 7:44
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 32 zpráv z 32.