Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

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
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na David Čápka
Ondrca:

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:

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
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Nahoru Odpovědět 9.9.2013 16:53
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondrca
Redaktor
Avatar
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:

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
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na David Čápka
Ondrca:

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ý:

Protože to je prasárna.

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

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:

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

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

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:

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:

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

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

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

Nahoru Odpovědět  +1 10.9.2013 21:34
Zase jsem o něco chytřejší
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na Silvinios
Petr Nymsa:

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

Nahoru Odpovědět  +2 10.9.2013 21:37
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Petr G
Redaktor
Avatar
Petr G:

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

 
Nahoru Odpovědět  -1 13.9.2013 22:13
Avatar
Milan Gallas
Redaktor
Avatar
Milan Gallas:

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):

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
Nesnáším {}, proto se jim vyhýbám.
Avatar
Milan Gallas
Redaktor
Avatar
Milan Gallas:

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
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Daniel Vítek:

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

 
Nahoru Odpovědět 15.9.2013 17:31
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na Daniel Vítek
Daniel Vítek:

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
Avatar
David Dostal
Redaktor
Avatar
David Dostal:

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:

Ř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 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  +2 15.9.2013 19:33
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Daniel Vítek:

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

 
Nahoru Odpovědět 15.9.2013 19:58
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Daniel Vítek:

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

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

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
Nesnáším {}, proto se jim vyhýbám.
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
Daniel Vítek:

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

 
Nahoru Odpovědět 15.9.2013 20:03
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Daniel Vítek
David Čápka:

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
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
David Dostal
Redaktor
Avatar
Odpovídá na David Čápka
David Dostal:

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:

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

 
Nahoru Odpovědět  +1 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.