Video su thumbnail is youtube

Sveiki, ieskau kodo,skripto, ar viso mod.

Iskart eisiu prie reikalo ko ieskau:

Ieskau kazko panasaus kaip lightbox2 (paveiksliuku galerija), bet man reikia kad paspaudus ant thumbnail (thumbnail paveiksliuko nuoroda idesiu,pats nereikia, kad automatiksai ji man sukurtu)) ir ant thumbnail paspaudus ismeta toki langa (kai rodo padidinta paveiksliuka))kaip ismeta ant lightbox2, bet jeme rodytu ne paveiksliuka, o video irasa is youtube.

zinau, kad toks yra, bet nelabai sekas rasti sio daikto :)

Dekui, tiems kas bandys man padeti :rolleyes:

Asmeniškai aš:

Paėmiau Lightbox script'ą ( bet kokį, kuris man patiko ) ir vietoj paveikslėlio įdėjau video.

Antras būdas:

Su jQuery nurodau kokį video krauti ( arba kokį puslapį ), o toliau pats savo jėgom pasidarau tą patį lightbox'ą. Ten tereikia: Content div'o, overlay div'o ir keletos jquery eilučių :)

Trečias būdas:

Siuntiesi šitą ir turi viską :)

http://fancyapps.com/fancybox/ -> Pasiskaityti tik API reikia :)

Asmeniškai aš:

Paėmiau Lightbox script'ą ( bet kokį, kuris man patiko ) ir vietoj paveikslėlio įdėjau video.

 

Antras būdas:

Su jQuery nurodau kokį video krauti ( arba kokį puslapį ), o toliau pats savo jėgom pasidarau tą patį lightbox'ą. Ten tereikia: Content div'o, overlay div'o ir keletos jquery eilučių :)

 

Trečias būdas:

 

Siuntiesi šitą ir turi viską :)

http://fancyapps.com/fancybox/ -> Pasiskaityti tik API reikia :)

Dekingas, pasirinkau trecia varijanta, bet kazka ne taip darau.

Gal kas geranoriskai galetu padeti su siuom jQuery fancyBox? :rolleyes:

Atrodo visus kelius nurodziau teisingai, bet is kodo atvaizdavimo ne velnio rodo paveiksliuka sumazinta paspaudi pasididina i didesni, bet jis atsidaro tam paciame lange, neveikia taip kaip turetu, atorod js kodu ir css net neatpazyta...

Guide pagal kuri bandziau daryti: fancybox

kodo net nedesiu, nes guide tas pats kuri as naudoju.

Kažką blogai su url nurodai arba nenusiunti media helper :)

Kažką blogai su url nurodai arba nenusiunti media helper :)

nenusiuncia kaip suprasti? :)

Gal kazka pamirsau, kas galit uzmeskit aki jeigu nesunku :)

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel.pack.js"></script>

<!-- Add fancyBox -->

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>

<a class="fancybox" rel="group" href="/fancybox/demo/1_b.jpg"><img src="/fancybox/demo/1_s.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="/fancybox/demo/2_b.jpg"><img src="/fancybox/demo/2_s.jpg" alt="" /></a>

nenusiuncia kaip suprasti? :)

 

Gal kazka pamirsau, kas galit uzmeskit aki jeigu nesunku :)

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel.pack.js"></script>

<!-- Add fancyBox -->

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>

<a class="fancybox" rel="group" href="/fancybox/demo/1_b.jpg"><img src="/fancybox/demo/1_s.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="/fancybox/demo/2_b.jpg"><img src="/fancybox/demo/2_s.jpg" alt="" /></a>

Ar nepastebėjei, kad tu nusiunti href su paveikslėlio adresu? Turėtum ten įdėti youtube adresą :)

Ar nepastebėjei, kad tu nusiunti href su paveikslėlio adresu? Turėtum ten įdėti youtube adresą :)

visu pirma esme dabar tame kad jis nenori net ismesti to "lango" su padidintu paveiksliuku. help :unsure:

visu pirma esme dabar tame kad jis nenori net ismesti to "lango" su padidintu paveiksliuku. help :unsure:

Tai, kad pas tave nėra nurodyta, kad tos nuorodos bus fancybox :)

Tai, kad pas tave nėra nurodyta, kad tos nuorodos bus fancybox :)

gali gal biski aiskiau paaiskint?

gali gal biski aiskiau paaiskint?

Tu su nenurodai, kad tos nuorodos bus .fancybox(); per script :)

Tu su nenurodai, kad tos nuorodos bus .fancybox(); per script :)

<script type="text/javascript">
$(document).ready(function() {
	$(".fancybox").fancybox();
});
</script>

apie sita kalbi? As nesuprantu taves ar as kokio css ar js failo nenurociau ar kaip cia?

Bandziau pagal siuos guide daryt bet ta pati nsm.

http://fancyapps.com/fancybox/

http://fancybox.net/howto

Tiesiog nesuprantu ka jus konkretaus norit pasakyt, gal kas kitas kitaip gali paaiskint.. ? :D gal tada suprasciau

<script type="text/javascript">
$(document).ready(function() {
	$(".fancybox").fancybox();
});
</script>

apie sita kalbi? As nesuprantu taves ar as kokio css ar js failo nenurociau ar kaip cia?

 

Bandziau pagal siuos guide daryt bet ta pati nsm.

http://fancyapps.com/fancybox/

http://fancybox.net/howto

 

Tiesiog nesuprantu ka jus konkretaus norit pasakyt, gal kas kitas kitaip gali paaiskint.. ? :D gal tada suprasciau

Būtent to ir nesimatė praitame kode :)

Kitas dalykas, ten pasižiūrėk geriau, yra parodyta kaip su media viską padaryti - to tau ir reikia kiek suprantu ;)

Būtent to ir nesimatė praitame kode :)

 

Kitas dalykas, ten pasižiūrėk geriau, yra parodyta kaip su media viską padaryti - to tau ir reikia kiek suprantu ;)

jo su media maciau, bet sakyciau reiktu man pirma pasidaryt, kad bent paveiksliuka rodytu :D esu irases as ta dali skripto, bet ar su juom ar be jo niekas nesikeicia, paveiksliukai 4 kaip buvo isideste isilgai taip ir liko paspaudus atsidaro naujas linkas ir viskas. Kazkas dar ne taip yra.

Siuo metu yra taip:

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<!-- Custom fancyBox --> (situos dar irasiau galvojau kazkas pasikeis bet nieko).
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="/fancybox/lib/jquery-1.10.1.min.js?v=1.10.1"></script>
<script type="text/javascript" src="/fancybox/lib/jquery-1.9.0.min.js?v=1.9.0"></script>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.js"></script>


<!-- fancyBox css-->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />

<script type="text/javascript">
$(document).ready(function() {
	$(".fancybox").fancybox();
});
</script>

<a class="grouped_elements" rel="group1" href="/fancybox/demo/1_b.jpg"><img src="/fancybox/demo/1_s.jpg" alt=""/></a>

<a class="grouped_elements" rel="group1" /fancybox/demo/2_b.jpg"><img src="/fancybox/demo/2_s.jpg" alt=""/></a> 	

<a class="grouped_elements" rel="group2" href="/fancybox/demo/3_b.jpg"><img src="/fancybox/demo/3_s.jpg" alt=""/></a> 

<a class="grouped_elements" rel="group2" href="/fancybox/demo/4_b.jpg"><img src="/fancybox/demo/4_s.jpg" alt=""/></a>