• User Attivo

    Popup all'interno del sito fatto con wordpress

    Buonasera , avrei una curiosità da sottoporvi , vorrei creare un popup ma non il solito popup con il classico codice javascript che apre la finestrella al di fuori del sito , a me servirebbe leggere qualche guida che parli come creare un popup che si apra all'interno del sito e che mi riproduca un video preso da youtube , oppure che lo faccia vedere tramite il codice embed
    E' possibile secondo voi ?

    Grazie e cordiali saluti


  • User Attivo

    Certo che si può, ecco il codice:
    [PHP]
    <style type="text/css">
    <!-- #fadeinbox{ position:absolute; width: 210px; left: 0; top: -400px; border: 2px solid black; background-color: #ffffff; padding: 4px; z-index: 100; visibility:hidden; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 11px; } //-->
    </style>
    <script type="text/javascript"> <!--
    //Specify display mode. 3 possible values are:
    //1) "always"- This makes the fade-in box load each time the page is displayed
    //2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
    //3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
    // For example, 2 would display the box about (1/2) 50% of the time the page loads.
    var displaymode="oncepersession"
    //var displaymode="always"
    var enablefade="yes" //("yes" to enable fade in effect, "no" to disable)
    var autohidebox=["no", 30] //Automatically hide box after x seconds? [yes/no, if_yes_hide_after_seconds]
    var showonscroll="yes" //Should box remain visible even when user scrolls page? ("yes"/"no)
    var IEfadelength=1 //fade in duration for IE, in seconds
    var Mozfadedegree=0.05 //fade in degree for NS6+ (number between 0 and 1. Recommended max: 0.2)
    ////////No need to edit beyond here///////////
    if (parseInt(displaymode)!=NaN)
    var random_num=Math.floor(Math.random()*displaymode)
    function displayfadeinbox(){
    var ie=document.all && !window.opera
    var dom=document.getElementById
    iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
    objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox
    var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
    var docwidth=(ie)? iebody.clientWidth : window.innerWidth
    docheight=(ie)? iebody.clientHeight: window.innerHeight
    var objwidth=objref.offsetWidth
    objheight=objref.offsetHeight
    objref.style.left=docwidth/2-objwidth/2+"px"
    objref.style.top=scroll_top+docheight/2-objheight/2+"px"
    if (showonscroll=="yes")
    showonscrollvar=setInterval("staticfadebox()", 50)
    if (enablefade=="yes" && objref.filters){
    objref.filters[0].duration=IEfadelength
    objref.filters[0].Apply()
    objref.filters[0].Play()
    }
    objref.style.visibility="visible"
    if (objref.style.MozOpacity){
    if (enablefade=="yes")
    mozfadevar=setInterval("mozfadefx()", 90)
    else{
    objref.style.MozOpacity=1
    controlledhidebox()
    }
    }
    else
    controlledhidebox()
    }
    function mozfadefx(){
    if (parseFloat(objref.style.MozOpacity)<1)
    objref.style.MozOpacity=parseFloat(objref.style.MozOpacity)+Mozfadedegree
    else{
    clearInterval(mozfadevar)
    controlledhidebox()
    }
    }
    function staticfadebox(){
    var ie=document.all && !window.opera
    var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
    objref.style.top=scroll_top+docheight/2-objheight/2+"px"
    }
    function hidefadebox(){
    objref.style.visibility="hidden"
    if (typeof showonscrollvar!="undefined")
    clearInterval(showonscrollvar)
    }
    function controlledhidebox(){
    if (autohidebox[0]=="yes"){
    var delayvar=(enablefade=="yes" && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000 : autohidebox[1]*1000
    setTimeout("hidefadebox()", delayvar)
    }
    }
    function initfunction(){
    setTimeout("displayfadeinbox()", 100)
    }
    function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = ""
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) {
    offset += search.length
    end = document.cookie.indexOf(";", offset)
    if (end == -1)
    end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }
    if (displaymode=="oncepersession" && get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
    if (window.addEventListener)
    window.addEventListener("load", initfunction, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initfunction)
    else if (document.getElementById)
    window.onload=initfunction
    document.cookie="fadedin=yes"
    }
    //--> </script>
    <div id="fadeinbox" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) progid:DXImageTransform.Microsoft.Shadow(color=blue,direction=200) ; -moz-opacity:0">
    <br /><br />
    <center>INSERISCI QUI IL CODICE EMBED DI YOUTUBE</center>
    <br /><br />
    <div align="right">
    <a href="#" onClick="hidefadebox();return false" class="gensmall"> [Chiudi]</a></div>
    </div>[/PHP]


  • User Attivo

    Grazie ma mi potresti consigliare anche qualche sito o qualche blog dove trovo guide e tutorial se ne conosci ?

    Grazie mille
    Ps questo codice lo devo applicare alla index del template giusto ?

    Cordiali saluti


  • User Attivo

    Ciao, in rete ce ne sono una marea di tutorial, quindi per questo "attingi" al buon Google.
    Inserisci il popup nella index ricordandoti di inserire l'embed di youtube dove ti ho indicato. 🙂


  • User Attivo

    Ciao grazie per lo script davvero bello l'ho modificato un po' e viene un bel risultato soltanto con internet explorer mi da qualche problema in quanto
    ho inserito nel foglio di stile : background-image:url(wp-content/themes/channel/images/VIDEOBACK.jpg);

    che mi inserisce uno sfondo sotto il video pero' scompare il tasto chiudi mentre in google chrome tutto questo non succede come si spiega sto fatto.

    Grazie
    Ps ma in un sito fatto in wordpress il codice mi conviene inserirlo nel file index.php o nel file header.php

    Cordiali saluti


  • User Attivo

    Purtroppo con i "browser" bisogna perderci un po' più di tempo modificando in maniera ottimale lo script. Per il resto aggiungi lo script in questione in cima all'header di WP e se hai problemi inseriscilo alla fine.


  • User Attivo

    Ciao grazie sono riuscito al sistemare il tutto davvero un bell'effetto , grazie pero' mi puoi consigliare qualche sito dove ci sono tutti questi codici con esempi che io possa studiare in quanto vorrei provare a fare un sito tutto in jquery tipo la finestra che si apre a tutto schermo e che dentro escono le animazioni ?

    Puoi consigliarmi qualche blog ben fatto in quanto io non ne sono riuscito a trovare.
    Grazie