Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Diskuze: Přehrátí video

JavaScript JavaScript Přehrátí video

Aktivity (1)
Avatar
Amomym
Člen
Avatar
Amomym:24.5.2013 20:24

Ahoj, dělám web a teď tam potřebuji použít javascript, který neumím :), tak se ptám zde. Mám představu, že po kliknutí na obrázek, vyjede okno, kde by bylo nějaké video. Budu rád za každou pomoc, i kdyby to nebyl script, stačilo by aj co k tomu použít a třeba odkázat na nějaký článek tady na devbooku :D.

 
Odpovědět 24.5.2013 20:24
Avatar
Amomym
Člen
Avatar
Amomym:24.5.2013 21:36

???

 
Nahoru Odpovědět 24.5.2013 21:36
Avatar
niveses
Redaktor
Avatar
niveses:24.5.2013 21:37

Foto udělej jako odkaz a pak: http://www.no-margin-for-errors.com/…htbox-clone/#…

 
Nahoru Odpovědět 24.5.2013 21:37
Avatar
Odpovídá na Amomym
Michael Olšavský:24.5.2013 21:38

Co si predstavujes pod oknem?

 
Nahoru Odpovědět 24.5.2013 21:38
Avatar
Amomym
Člen
Avatar
Odpovídá na Michael Olšavský
Amomym:24.5.2013 21:41

tak dám příklad, jak jsou obrázky a když se klikne na nějaký, tak se otevřena velký, ale když se klikne mimo, tak se zavře, a toto bych chtěl s tím videem

 
Nahoru Odpovědět 24.5.2013 21:41
Avatar
Michal Žůrek (misaz):24.5.2013 21:46

myslíš lightBox?

Editováno 24.5.2013 21:46
Nahoru Odpovědět 24.5.2013 21:46
Nesnáším {}, proto se jim vyhýbám.
Avatar
Michal Žůrek (misaz):24.5.2013 21:47

Podívej se na web který dělám: http://ambrozici.unas.cz/fotogalerie/#vid3

Nahoru Odpovědět 24.5.2013 21:47
Nesnáším {}, proto se jim vyhýbám.
Avatar
Amomym
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
Amomym:24.5.2013 21:50

ano, toto myslím

 
Nahoru Odpovědět 24.5.2013 21:50
Avatar
Odpovídá na Amomym
Michal Žůrek (misaz):24.5.2013 21:52

Pokud myslíš to co jsem ti ukazoval na ambrožíkách, tak to dělám jednoduše přes css:

.lightBox {
    position: absolute;
    text-align: center;
    z-index: 5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.85);
    display: none;
}

.lightBox:target {
    display: block;
}

a v kódu HTML je něco takoého:

<div id="vid3" class="lightBox">
        <div class="lightBoxBody">
                <div class="lightBoxImage">
                        <object width="420" height="315">
                                <param name="movie" value="https://www.youtube.c
                                <param name="allowFullScreen" value="true"></par
                                <param name="allowscriptaccess" value="always"><
                                <embed src="https://www.youtube.com/v/-EX8s4NvFA
                </div>
        </div>
        <div class="lightBoxContent">
                <p class="lightBoxTextContent"></p>
        </div>
        <div class="lightBoxNavigation">
                <div class="lightBoxNextPrevious">
                        <a class="lightBoxNextPrevious" href="#" onclick="za
                </div>
                <div class="lightBoxThumbnail">
                </div>
        </div>
</div>
Nahoru Odpovědět 24.5.2013 21:52
Nesnáším {}, proto se jim vyhýbám.
Avatar
Amomym
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
Amomym:24.5.2013 21:59

díky moc, ale ještě bych to aj zkusil přes javascript, nebo je lepší css?

 
Nahoru Odpovědět 24.5.2013 21:59
Avatar
Odpovídá na Amomym
Michal Žůrek (misaz):24.5.2013 22:00

To je fuk. Debilní uživatele pc mají javascript vypnutý.

Nahoru Odpovědět 24.5.2013 22:00
Nesnáším {}, proto se jim vyhýbám.
Avatar
Amomym
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
Amomym:24.5.2013 22:04

řeknu to tak, na webu bude muset být i na více místech javascript, takže tady je to úplně jedno :D

 
Nahoru Odpovědět  +1 24.5.2013 22:04
Avatar
Amomym
Člen
Avatar
Amomym:24.5.2013 22:24

Michael Olšavský pomůžeš prosím?

 
Nahoru Odpovědět 24.5.2013 22:24
Avatar
Odpovídá na Amomym
Michael Olšavský:24.5.2013 22:36

:-) Pokusím se. Existují už hotové projekty, po úpravě můžeš vložit i video: http://lokeshdhakar.com/…s/lightbox2/

Nebo si napiš vlastní. Osobně mi css verze nepřijde jako nejvhodnější. Na tohle se používá Javascript(nebo alespoň používal). JQuery ti mnoho z práce usnadní. Hlavní ale bude vytvořit okno hned ve stránce, ale s průhlednost a vycentruj. Po kliknutí nastav zdroj obrázku(změň vlastnost src), průhlednost(vi­sibility) a můžeš i zvětšit okno. ;-) zkus to nějak. Kdyžtak ještě poradím nebo to mohu zkusit sám napsat :-)

 
Nahoru Odpovědět 24.5.2013 22:36
Avatar
Amomym
Člen
Avatar
Odpovídá na Michael Olšavský
Amomym:24.5.2013 22:43

díky, pokusím se něco složit a naučit javascript, takže můžeš čekat, že se aspoň 2x zeptám :D

 
Nahoru Odpovědět 24.5.2013 22:43
Avatar
Odpovídá na Michael Olšavský
Michal Žůrek (misaz):25.5.2013 8:01

A proč není css nejvhodnější? CO je na něm konktrétně špatně.

Nahoru Odpovědět 25.5.2013 8:01
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:25.5.2013 9:00

jelikož je CSS jak název napovídá určeno ke stylům, JS je zase určeno k programování ...
Nač dělat dlouhé styly s malou efektivitou, když může JS vykonat práci snadno a efektivně :)

Nahoru Odpovědět  +1 25.5.2013 9:00
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Michal Žůrek (misaz):25.5.2013 9:33

15 řádků je dlouhé?

Ale beru asi se na to moc nehodí.

Nahoru Odpovědět 25.5.2013 9:33
Nesnáším {}, proto se jim vyhýbám.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
David Čápka:25.5.2013 9:33

Ten zdroják jsi tam nějak nevložil celý, docela by mě zajímalo jak to funguje. Kde že ti to běží?

Nahoru Odpovědět 25.5.2013 9: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
Odpovídá na David Čápka
Michal Žůrek (misaz):25.5.2013 9:36

Jestli myslíš to jak jsem to uřezal, tak to už bylo jenom youtube. Pak je v styleshetu jenom pozicovní tlačítek, barvičky atd. To co tu je je to nejdůležitější.

Nahoru Odpovědět 25.5.2013 9:36
Nesnáším {}, proto se jim vyhýbám.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
David Čápka:25.5.2013 10:00

No a běží ti to někde?

Nahoru Odpovědět 25.5.2013 10:00
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
Odpovídá na David Čápka
Michal Žůrek (misaz):25.5.2013 11:13

Jako co by mi kde mělo běžet? Video přes embded - youtube, lightbox - css. Nic víc tam není.

Nahoru Odpovědět 25.5.2013 11:13
Nesnáším {}, proto se jim vyhýbám.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
David Čápka:25.5.2013 11:25

Jestli máš někde ukázku.

Nahoru Odpovědět 25.5.2013 11:25
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
Odpovídá na David Čápka
Michal Žůrek (misaz):25.5.2013 11:35

Můžeš si to prohlídnout přímo v těch ambrožícíci: http://ambrozici.unas.cz/fotogalerie/#vid3

A že si to ty, tak sem na devbook tu ukázku dám. :)

Editováno 25.5.2013 11:36
Nahoru Odpovědět 25.5.2013 11:35
Nesnáším {}, proto se jim vyhýbám.
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 24 zpráv z 24.