Avatar
Paranormal
Redaktor
Avatar
Paranormal:

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
„Když toho moc neumíme tak jsme na nejlepší pozici se něčemu naučit.“
Avatar
p.jaros
Člen
Avatar
p.jaros:

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:

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
Paranormal
Redaktor
Avatar
Odpovídá na Richard
Paranormal:

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

Nahoru Odpovědět 29.7.2015 14:03
„Když toho moc neumíme tak jsme na nejlepší pozici se něčemu naučit.“
Avatar
Richard
Člen
Avatar
Odpovídá na Paranormal
Richard:

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
Paranormal
Redaktor
Avatar
Odpovídá na Richard
Paranormal:

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
„Když toho moc neumíme tak jsme na nejlepší pozici se něčemu naučit.“
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Paranormal
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
Paranormal
Redaktor
Avatar
Odpovídá na Jiří Gracík
Paranormal:

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
„Když toho moc neumíme tak jsme na nejlepší pozici se něčemu naučit.“
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Paranormal
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Paranormal
Jiří Gracík:

Není to dokonalý, ale bude to fungovat.

Nahoru Odpovědět 29.7.2015 18:49
Creating websites is awesome till you see the result in another browser ...
Avatar
Paranormal
Redaktor
Avatar
Odpovídá na Jiří Gracík
Paranormal:

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
„Když toho moc neumíme tak jsme na nejlepší pozici se něčemu naučit.“
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Paranormal
Jiří Gracík:

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

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět  +2 30.7.2015 17:43
Creating websites is awesome till you see the result in another browser ...
Avatar
Paranormal
Redaktor
Avatar
Odpovídá na Jiří Gracík
Paranormal:

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
„Když toho moc neumíme tak jsme na nejlepší pozici se něčemu naučit.“
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.