Diskuze: Machr na webdesign - Javascriptová slideshow

David Hartinger

Vlastník

David Hartinger: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

New kid back on the block with a R.I.P

Ondrca

Tvůrce

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ší

David Hartinger

Vlastník

David Hartinger: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

New kid back on the block with a R.I.P

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:9.9.2013 16:53

pokud vyjde čas, tak skusím

Nahoru Odpovědět

9.9.2013 16:53

Ondrca

Tvůrce

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ší

David Hartinger

Vlastník

David Hartinger: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

New kid back on the block with a R.I.P

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:9.9.2013 17:08

Machr na Webdeing ?

Nahoru Odpovědět

9.9.2013 17:08

Neaktivní uživatelský účet

Ondrca

Tvůrce

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ší

Jan Vargovský

Tvůrce

Jan Vargovský:9.9.2013 17:11

Protože to je prasárna.

Nahoru Odpovědět

9.9.2013 17:11

Ondrca

Tvůrce

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ší

Ondrca

Tvůrce

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ší

Jan Vargovský

Tvůrce

Jan Vargovský:9.9.2013 17:16

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

Nahoru Odpovědět

9.9.2013 17:16

Ondrca

Tvůrce

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ší

Silvinios

Tvůrce

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

Vojtěch Pospíchal

Tvůrce

Vojtěch Pospíchal:10.9.2013 21:27

Pošlí ji David Hartinger do SZ.

Nahoru Odpovědět

10.9.2013 21:27

Ondrca

Tvůrce

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ší

Petr Nymsa

Tvůrce

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

Petr Gürth

Tvůrce

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

Milan Gallas

Tvůrce

Milan Gallas:14.9.2013 11:14

David Hartinger 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

Michal Žůrek - misaz

Tvůrce

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

Milan Gallas

Tvůrce

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

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:15.9.2013 17:31

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

Nahoru Odpovědět

15.9.2013 17:31

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:15.9.2013 17:49

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

Nahoru Odpovědět

15.9.2013 17:49

Neaktivní uživatelský účet

David Dostal

Tvůrce

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

David Hartinger

Vlastník

David Hartinger: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

New kid back on the block with a R.I.P

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:15.9.2013 19:58

Né, on mi tu placku prostě nedá

Nahoru Odpovědět

15.9.2013 19:58

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel: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

Neaktivní uživatelský účet

Michal Žůrek - misaz

Tvůrce

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

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:15.9.2013 20:03

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

Nahoru Odpovědět

15.9.2013 20:03

Neaktivní uživatelský účet

David Hartinger

Vlastník

David Hartinger: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

New kid back on the block with a R.I.P

David Dostal

Tvůrce

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 <code>$(window).load()</code>. 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

Silvinios

Tvůrce

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