Hírdetés megjelenitése a videó betöltése előtt

Sziasztok,











Még nagyon új vagyok a wordpress-ben!





Wptube3-as sablont használok.Azt szeretném elérni, hogy a videók betöltődése előtt jelenjen meg néhány másodpercig egy reklám a videók helyett, majd a reklám tűnjön el néhány másodperc múlva, és a reklám helyen jelenjen meg a videó.Remélem tud nekem segíteni valaki ebben a dologban.Előre is köszönöm!

Egyszerű példa erre: http://jsfiddle.net/lorincz_andras/eeecq/











Jquery erre jó, ezzel lehet megjeleníteni és eltüntetni a div eket, időzítéssel. Így pár másodperces reklámot tudsz a video elé beszúrni. A delay paraméterében az időzítés van. (3800 az 3,8 sec). A video div-jét persze kezdetben “display: none” -t adunk, hogy a video ne látszódjék amíg a reklám igen.











“Run” al tudod ismételten lejátszani. (jobb oldalt, a lenit ablakban van az eredmény)

Szia,











Köszönöm a választ, nagyon hasznos volt, ez pont az ami nekem kell.Kérlek még egy dologban segíts!Kérlek magyarázd el hogyan és hová kell beillesztenem a Jyuery-t a wordpress-be, hogy működjön a dolog.Nagyon szépen köszönöm előre is!

Szia!











Hogyan kell beilleszteni? :slight_smile:











Azt elég sokféleképpen lehet, lehet közvetelenül is, de lehet functions.php n keresztül hook-okkal, ami talán jobb:











Keresd meg a wp-content/tehemes könyvtáradabn a sablont amit használsz, annak is van egy neve. Abbe menj bele és keresed meg a functions.php nevű fájlt.











Nyisd meg, itt tudsz mindenféle függvényt készíteni:

















function jquery_fejreszbe_ha_single() { //jquery elérése a fejrészbe



if ( !is_admin() && is_single() ) { // Ha nem vagyun belépbe és bejegyzést nézünk



// jquery



wp_deregister_script(‘jquery’); // aktuális script dereg.



wp_register_script(‘jquery’, (“https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”), false); // jquery fájl útvonala



wp_enqueue_script(‘jquery’); // beszúrás



}



}







function video_reklam_css(){ //kiegészítjük a saját css-el, a head részt, hogy a videó alapból ne látszódjon



if ( !is_admin() && is_single() ) {



?>







.video_code{



display:none;



}



.reklam_banner{



width:600px;



height:400px;



border: 1px solid #d8f1bf;



background-color:#ebf5e1;



padding: 20px 20px 20px 20px;



}



​







<?php







}



}







function reklam_script_footerbe_ha_single() { //saját scrip, a reklám div eltüntetésére pár sec után



if ( !is_admin() && is_single() ) {







// your own script



?>







$(document).ready(function() {



$(".reklam_banner").delay(3800).fadeOut(200);



$(".video_code").delay(4000).show(“fast”);



});











<?php



}



}



add_action( ‘get_header’, ‘jquery_fejreszbe_ha_single’); // Jquery ténylges beillsztés get_header hook segítségével



add_action( ‘get_footer’, ‘reklam_script_footerbe_ha_single’); // Saját script a footerbe, get_footer hook segítségével



add_action( ‘wp_head’, ‘video_reklam_css’); //saját css wp_header hook segítségével…











A function.php végét ?> zárja majd le, azt szerintem ne töröld.











Ahhoz hogy működjön a dolog, van egy teendő:







A single.php -ban be kell szúrnod a reklám div-t:














Ez itt a relkám helye! Hamarosan mutatom a video-t...









Ezt közvetlenül a

után szúrd be, így a videó div elé kerül.function jquery_fejreszbe_ha_single() { //jquery elérése a fejrészbe


if ( !is_admin() && is_single() ) { // Ha nem vagyun belépbe és bejegyzést nézünk


// jquery


wp_deregister_script('jquery'); // aktuális script dereg.


wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"), false); // jquery fájl útvonala


wp_enqueue_script('jquery'); // beszúrás


}


}





function video_reklam_css(){ //kiegészítjük a saját css-el, a head részt, hogy a videó alapból ne látszódjon


if ( !is_admin() && is_single() ) {


?>





.video_code{


display:none;


}


.reklam_banner{


width:600px;


height:400px;


border: 1px solid #d8f1bf;


background-color:#ebf5e1;


padding: 20px 20px 20px 20px;


}


​





<?php





}


}





function reklam_script_footerbe_ha_single() { //saját scrip, a reklám div eltüntetésére pár sec után


if ( !is_admin() && is_single() ) {





// your own script


?>





$(document).ready(function() {


$(".reklam_banner").delay(3800).fadeOut(200);


$(".video_code").delay(4000).show("fast");


});








<?php


}


}


add_action( 'get_header', 'jquery_fejreszbe_ha_single'); // Jquery ténylges beillsztés get_header hook segítségével


add_action( 'get_footer', 'reklam_script_footerbe_ha_single'); // Saját script a footerbe, get_footer hook segítségével


add_action( 'wp_head', 'video_reklam_css'); //saját css wp_header hook segítségével
...








A function.php végét ?> zárja majd le, azt szerintem ne töröld.








Ahhoz hogy működjön a dolog, van egy teendő:





A single.php -ban be kell szúrnod a reklám div-t:










Ez itt a relkám helye! Hamarosan mutatom a video-t...









Ezt közvetlenül a
után szúrd be, így a videó div elé kerül.



Ez itt a relkám helye! Hamarosan mutatom a video-t...













Ezt közvetlenül a
után szúrd be, így a videó div elé kerül.

A részek között van a kód, csak nekem nem működik megfelelően a formázás itt a fórumon a hozzászólás írásánál!











Olyan, mintha inaktív lenne…











Nem tudom, hogy csak nálam van-e ez, vagy bugos, vagy másnál is? Tehát érted, a code jelek közötti részek kellenek csak!

Szia,











Épp most láttam meg a válaszodat, nagyon köszönöm!Ha nem írtad volna meg ezt a sok információt nem tudom hogyan tudtam volna boldogulni.Ezer hála és köszönet meg egyszer.Remélem egyszer valahogyan meg tudom majd neked hálálni!

Szia,











Mindent úgy csináltam ahogyan leírtad, nagyon jól működik minden!





Szerettem volna adni egy lehetőséget a reklám elzárására még a videó megjelenése előtt, de sajnos ne sikerült.Megnéznéd kérlek mit csináltam rosszul, az alábbiakat írtam bele a single.php-ba:


















Ez itt a reklám helye!Hamarosan mutatom a videó-t...


CLOSE and PLAY VIDEO




Ez itt a reklám helye!Hamarosan mutatom a videó-t...


CLOSE and PLAY VIDEO

Szia!











Ilyen “csúnya” getElementById -k nélkül is meg lehet oldani, a jquery-ben pont az a jó, hogy ezek nélkül is ki lehet “jelölni” a div eket. (általában id vagy class alapján ez könnyen megy)











setTimeout -ra lecseréljük a .delay() -t, mert akkor a click esemény függvényében tudjuk a div ek látszóságát vagy nem látszóságát vezérelni:











A function.php -ban a video_reklam_css() függvényt kiegészítjük pár css el, tehát ilyen legyen az egész:















function video_reklam_css(){



if ( !is_admin() && is_single() ) {



?>







.reklam_bezar{



padding: 5px;



background-color: green;



color: white;



cursor:pointer;



width:50%;



display:block;



}



.reklam_bezar:hover{



background-color: red;



}



.video_code{



display:none;



}



.reklam_banner{



width: 600px;



height:400px;



border: 1px solid #d8f1bf;



background-color: #ebf5e1;



padding: 20px 20px 20px 20px;



}



​







<?php



}



}











Ugyan itt, a reklam_script_footerbe_ha_single() meg legyen ilyen, a régi példa helyett:











function reklam_script_footerbe_ha_single() {



if ( !is_admin() && is_single() ) {











?>







var reklam_eddig_lathato=4000;



$(document).ready(function() {



setTimeout("$(’.reklam_banner’).fadeOut(‘fast’);", reklam_eddig_lathato);



setTimeout("$(’.video_code’).show(‘fast’);", reklam_eddig_lathato+200);







$(".reklam_bezar").click(function () {



setTimeout("$(’.reklam_banner’).fadeOut(‘fast’);", 100);



setTimeout("$(’.video_code’).show(‘fast’);", 300);



});//click vége







});//document ready vége











<?php



}



}











Ha ezzel megvagy, akkor már csak a single.php -be kell beszúrni az új, kattintásra bezáródó div-et (.reklam_bezar), amiben lesz a “Katt. ide…”:












Ez itt a relkám helye! Hamarosan mutatom a video-t...



Kattints ide a reklám bezeárásához és a video mutatásához








Persze sokkal szebb css-t is tudsz neki adni, én csak összehánytam, hogy a lényeg látszódjon.



Ugye itt class a reklam_banner, de lehetne akár id-is, és abból egyet szabad használni egy oldalon!


function video_reklam_css(){


if ( !is_admin() && is_single() ) {


?>





.reklam_bezar{


padding: 5px;


background-color: green;


color: white;


cursor:pointer;


width:50%;


display:block;


}


.reklam_bezar:hover{


background-color: red;


}


.video_code{


display:none;


}


.reklam_banner{


width: 600px;


height:400px;


border: 1px solid #d8f1bf;


background-color: #ebf5e1;


padding: 20px 20px 20px 20px;


}


​





<?php


}


}








Ugyan itt, a reklam_script_footerbe_ha_single() meg legyen ilyen, a régi példa helyett:







function reklam_script_footerbe_ha_single() {

if ( !is_admin() && is_single() ) {





?>



var reklam_eddig_lathato=4000;

$(document).ready(function() {

setTimeout("$('.reklam_banner').fadeOut('fast');", reklam_eddig_lathato);

setTimeout("$('.video_code').show('fast');", reklam_eddig_lathato+200);



$(".reklam_bezar").click(function () {

setTimeout("$('.reklam_banner').fadeOut('fast');", 100);

setTimeout("$('.video_code').show('fast');", 300);

});//click vége



});//document ready vége





<?php

}

}





Ha ezzel megvagy, akkor már csak a single.php -be kell beszúrni az új, kattintásra bezáródó div-et (.reklam_bezar), amiben lesz a "Katt. ide...":







Ez itt a relkám helye! Hamarosan mutatom a video-t...



Kattints ide a reklám bezeárásához és a video mutatásához








Persze sokkal szebb css-t is tudsz neki adni, én csak összehánytam, hogy a lényeg látszódjon.



Ugye itt class a reklam_banner, de lehetne akár id-is, és abból egyet szabad használni egy oldalon!


function reklam_script_footerbe_ha_single() {


if ( !is_admin() && is_single() ) {








?>





var reklam_eddig_lathato=4000;


$(document).ready(function() {


setTimeout("$('.reklam_banner').fadeOut('fast');", reklam_eddig_lathato);


setTimeout("$('.video_code').show('fast');", reklam_eddig_lathato+200);





$(".reklam_bezar").click(function () {


setTimeout("$('.reklam_banner').fadeOut('fast');", 100);


setTimeout("$('.video_code').show('fast');", 300);


});//click vége





});//document ready vége








<?php


}


}








Ha ezzel megvagy, akkor már csak a single.php -be kell beszúrni az új, kattintásra bezáródó div-et (.reklam_bezar), amiben lesz a "Katt. ide...":









Ez itt a relkám helye! Hamarosan mutatom a video-t...



Kattints ide a reklám bezeárásához és a video mutatásához








Persze sokkal szebb css-t is tudsz neki adni, én csak összehánytam, hogy a lényeg látszódjon.



Ugye itt class a reklam_banner, de lehetne akár id-is, és abból egyet szabad használni egy oldalon!





Ez itt a relkám helye! Hamarosan mutatom a video-t...




Kattints ide a reklám bezeárásához és a video mutatásához












Persze sokkal szebb css-t is tudsz neki adni, én csak összehánytam, hogy a lényeg látszódjon.





Ugye itt class a reklam_banner, de lehetne akár id-is, és abból egyet szabad használni egy oldalon!

Szia,











Nem is tudom, hogy mondjak neked köszönetet, nagyon hálás vagyok.Még egyszer nagyon köszönöm!