NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Verquido
Tvůrce
Avatar
Verquido:29.7.2015 12:23

Zdravím, chtěl bych se zeptat jak snadno udělat "PopUp" okno pro obrázky nebo pro video popřípadě iframe.

Mám něco jednoduchého třeba jako tohle: http://jsfiddle.net/42Kru/158/
Ale třeba aby to šlo pro každý. Aby na stránce bylo jen jednou definováno to #pop-up. Ale nějak aby se z odkazu nebo obrázku vzala URL a hodila do toho #Pop-upu.

Nebo jestli mi nerozumíte tak prosím něco navrhněte. A hoďte to třeba na to jsFiddle. Díky moc ;)

 
Odpovědět
29.7.2015 12:23
Avatar
p.jaros
Člen
Avatar
p.jaros:29.7.2015 13:11

Toto by mohlo řešit tvůj problém : http://getbootstrap.com/javascript/#…

 
Nahoru Odpovědět
29.7.2015 13:11
Avatar
Richard
Člen
Avatar
Odpovídá na p.jaros
Richard:29.7.2015 13:41

To není úplně vhodné.

Nejjednodušší řešení je třeba jQuery fancybox (http://fancybox.net/) , jen nahodíš, přidáš id nebo class a hotovo.

Nahoru Odpovědět
29.7.2015 13:41
$action = $_GET['Life']; | Když dáš mínus, napiš proč!
Avatar
Verquido
Tvůrce
Avatar
Odpovídá na Richard
Verquido:29.7.2015 14:03

To sem zkoušel a vůbec mi to nefungovalo nevím proc :/

 
Nahoru Odpovědět
29.7.2015 14:03
Avatar
Richard
Člen
Avatar
Odpovídá na Verquido
Richard:29.7.2015 14:11

http://fancybox.net/howto
A jestli si to dělal podle tohoto, mrkni do js console jestli to nehází nějakej error a pokud ne, tak máš blbě selectory.

Editováno 29.7.2015 14:12
Nahoru Odpovědět
29.7.2015 14:11
$action = $_GET['Life']; | Když dáš mínus, napiš proč!
Avatar
Verquido
Tvůrce
Avatar
Odpovídá na Richard
Verquido:29.7.2015 17:22

Tak sem to zkusil znovu a podle toho návodu. A nejde to! V návodu mají jiný věci než poskytují ke stažení tak nevím.. Další nápady? :D

 
Nahoru Odpovědět
29.7.2015 17:22
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Verquido
Neaktivní uživatel:29.7.2015 17:23

Nastyluj si stránku tak, jak má vypadat s otevřeným videem/obrázkem. Poté už jenom vyřešíš show/hide přes js, nebude to víc než 10 řádků.

Nahoru Odpovědět
29.7.2015 17:23
Neaktivní uživatelský účet
Avatar
Verquido
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Verquido:29.7.2015 17:42

Nastylovat to není problém přez jQuery udělat fadeIn a FadeOut při kliknutí na obrázek toho videa třeba taky bych v tom neviděl problém..

Ale vydím problém v tom že když tam bude těch videí víc tak jak udělám aby se mi třeba po kliknutí na odkaz 3 videa nespustilo opět první?

<div class="vyskakujici_okno">
        <div class="iframe"><iframe href="**PRVNÍ ODKAZ**">ZDE VIDEO</iframe></div>
</div>

<div class="vyskakujici_okno">
        <div class="iframe"><iframe href="**DRUHÝ ODKAZ**">ZDE VIDEO</iframe></div>
</div>

<div class="vyskakujici_okno">
        <div class="iframe"><iframe href="**TŘETÍ ODKAZ**">ZDE VIDEO</iframe></div>
</div>

A takhle bych musel ject furt ne? v tom iframe by bylo dál 4,5,6 odkaz... ? jak to udělat jednodušeji?

Díky ;)

 
Nahoru Odpovědět
29.7.2015 17:42
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Verquido
Neaktivní uživatel:29.7.2015 18:48

Dejme tomu, že tomu odkazu dáš data atribut, který bude obsahovat nějaký identifikátor

<a class="js-show-target" data-target="prvni-video">Show</a>

a vyskakovací okno bude mít třeba třídu, data atribut nebo co chceš.

<div class="js-target  js-target-prvni-video">
    ...
</div>

A js (spíš pseudo js, nechce se mi to zkoušet)

$( ".js-show-target" ).on( "click", function(){
    var element = $( this );
    $( ".js-target-" + element.data( "target" ) ).fadein( 200 );
});

$( ".js-hide-target" ).on( "click", function(){
    $( ".js-target" ).fadeout( 200 );
});
Nahoru Odpovědět
29.7.2015 18:48
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Verquido
Neaktivní uživatel:29.7.2015 18:49

Není to dokonalý, ale bude to fungovat.

Nahoru Odpovědět
29.7.2015 18:49
Neaktivní uživatelský účet
Avatar
Verquido
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Verquido:29.7.2015 21:49

Ok, Nějak se v tom zkusím pohrabat a vyzkouším to. Snad bude funglovat díky.

 
Nahoru Odpovědět
29.7.2015 21:49
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Verquido
Neaktivní uživatel:30.7.2015 17:43

Odkaz na malý demíčko
https://jsfiddle.net/g3hjdb02/

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
30.7.2015 17:43
Neaktivní uživatelský účet
Avatar
Verquido
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Verquido:30.7.2015 19:09

Díky, zkusím se v tom pohrabat a zjistit jak to fungluje ;) Kdyby něco napíšu zatím ti hážu řešení vlákna .-)

 
Nahoru Odpovědět
30.7.2015 19:09
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 13 zpráv z 13.