Forum
Aktif konular
Üyeler
Kurallar
Arama
Tahribat.com Forumları 
Html - CSS - XML - JavaScript - Ajax 
Resme Tıklayınca Ekran Kararacak Ortada Video Player Çıkacak Nasıl Yaparım. Resme Tıklayınca Ekran Kararacak Ortada Video Player Çıkacak Nasıl Yaparım.
-
arkadaşlar tbt de bir örneği var
resme tıklayınca ekran kararıyo ortaya resim çıkıyor ya bende de aynı olacak resim olacak ancak resme tıklanınca
bende player çıkacak play e basacak ve video yu izleyecek bilgisi olan
Çok acil umarım bilen vardır
-
http://jqueryui.com/demos/dialog/#modal
Az biraz incelersen, mantığı kavrarsın.
Kaba taslak, şöyle olacak:
Js
$('#resim').click(function()
{
$('#video').dialog({
bgiframe: true,
//gerisi kendine göre
});
});
Html
<div id="resim"><img src="resmin" /></div>
<div id="video"><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/1Uleh0k0VBY&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/1Uleh0k0VBY&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object></div> //divlerin arasında kalan kısma aldanma, youtube'dan rasgele bi video'nun embed kodu
-
joomla word press gibi bişey kullanıyosan mutlaka bi eklentisi plugini zartı zurtu vardır.
eğer kendi el yapımı siten varsa onu nasıl yapıcan bilmiyorum ama jquery.comda buna benzer bişey vardı.
-
rokbox joomla eklenti olarak mevcut normal olarakta bulursun
-
arkadaşlar sıfırdan yapıyorum bununla alakalı
çok light box var inceledim fakat bazı yerlerinde takıldım ... Bazı değil çoğu yeri ..
hala araştırıyorum inanın 10 saat oldu ajaxrain.com dan ne kodlar incelemedim
elinde hazır örneği olan varsa çok sevinirim ...
Saygılarımla
-
hadi erdem olacak inş :)
-
DOM üzerinden opacity'e Timer ile birlikte müdahale etmen gerek.Dikkat etmen gereken husus opacity IE'de 10-20-30-40 vs. diye ilerler ama Firefoxta 0.1,0.2,0.3 vs diye ilerler
document.getElementById("[Nesnenin ID'si]").style.opacity=0.5; //FF ve diğerleri için.
document.getElementById("[Nesnenin ID'si]").filters.alpha.opacity=50; // IE için.
Daha önce böyle bir şey yapmıştım fakat kodları kayıp (yapalı çok oldu çünkü) Kodlar dursaydı örnek olarak onlarıda koyardım.
-
sanane bunu yazdı:
-----------------------------
hadi erdem olacak inş :)
-----------------------------abi babam hep der azimle sıçan mermer taşını delermiş diye :)
Bak bu sözü iletime yazayım
sora sora öğrnecez abi :)
-
Mc_cO_By bunu yazdı:
-----------------------------
http://jqueryui.com/demos/dialog/#modal
Az biraz incelersen, mantığı kavrarsın.
Kaba taslak, şöyle olacak:
Js
$('#resim').click(function()
{
$('#video').dialog({
bgiframe: true,
//gerisi kendine göre
});
});
Html
< width="425" height="344"> < name="movie" value="http://www.youtube.com/v/1Uleh0k0VBY&hl=en_US&fs=1&" /> < name="allowFullScreen" value="true" /> < name="allowaccess" value="always" />< ="application/x-shockwave-flash" width="425" height="344" ="http://www.youtube.com/v/1Uleh0k0VBY&hl=en_US&fs=1&" allowaccess="always" allowfullscreen="true">//divlerin arasında kalan kısma aldanma, youtube'dan rasgele bi video'nun embed kodu-----------------------------
tam bu dediğini yapar ona tıklanınca video player çıkar ama arka plan kararması lazım o nasıl olacak :S
-
Zxone bunu yazdı:
-----------------------------
sanane bunu yazdı:
-----------------------------
hadi erdem olacak inş :)
-----------------------------abi babam hep der azimle sıçan mermer taşını delermiş diye :)
Bak bu sözü iletime yazayım
sora sora öğrnecez abi :)
-----------------------------azimle değil azimli sıçan (farenin büyüğü) duvarı deler ;)
-
Attığım örnekte ekran kararıyor hocam.
Dialog değil de, modal dialog olayına bakman gerek.
Şu an çıkmam gerekiyor, geldiğimde daha fazla yardımcı olmaya çalışırım.
Kolay gelsin.
Aşağıdaki koda, 'modal: true' değerini de eklemelisin.
$('#video').dialog({
bgiframe: true,
modal: true //gibi
//gerisi kendine göre
});
Edit:
Dayanamadım yazdım hocam =)
Js
$(function() {
$("#video").dialog(
{
autoOpen: false, //otomatik açılmaması için bu değeri false vermelisin
bgiframe: true,
height: 385, //Kendi video'nun boyutlarına göre bir değer verirsin
width: 450, //Kendi video'nun boyutlarına göre bir değer verirsin
modal: true //ekranın kararma olayı
});
$("#resim").click(function() //#resim id'sine sahip kısım tıklandığında
{
$('#video').dialog('open'); //Dialog penceresine açılmasını söyledik
});
});Html
<div id="resim">
<a href="#">Tıkla</a> <!-- Burda resmin olacak -->
</div>
<div id="video" title="Video başlığı">
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/1Uleh0k0VBY&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/1Uleh0k0VBY&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
</div>Kullanacağın jQueryUI kütüphaneleri ve örnek css dosyaları:
<link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.draggable.js"></script>
<script type="text/javascript" src="ui/ui.resizable.js"></script>
<script type="text/javascript" src="ui/ui.dialog.js"></script>
<script type="text/javascript" src="external/bgiframe/jquery.bgiframe.js"></script>
<link type="text/css" href="demos/demos.css" rel="stylesheet" />
<script type="text/javascript">Burdan indirebilirsin:
Not: resizable.js, draggable.js falan işin fantazisi hocam. Dersenki, boyutlandırmalarına, sağa sola taşımalarına ne gerek var diye, pas geç bunları.
Nasıl görünecek:
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla