This topic contains 0 replies, has 1 voice, and was last updated by  Geoffrey Timmerman 6 years ago.

  • Author
    Posts
  • #45787 Reply

    First we have to edit the “functions “page in the DigitalSignage plugin so that jQuery is loaded in the header instead of the footer.
    STEP 1.Navigate on the WordPress server to “wp-content/themes/DigitalSignagePressTheme/functions.php” and following code:
    function insert_jquery(){
    wp_enqueue_script(‘jquery’, false, array(), false, false);
    }
    add_filter(‘wp_enqueue_scripts’,’insert_jquery’,1);

    STEP 2. Now add the code for the newsScroller by editing the playlist and selecting “ADD > html”:
    <!– CSS styling for the scroller –>
    <style>
    /* Horizontal scroller */
    div#hscroller {
    width: 100%;
    z-index: 999;
    font-size: 2em;
    }
    div#hscroller marquee {
    background-color: rgba(204, 0, 0, 0.9); color: white; /* red */
    /* background-color: rgba(255, 255, 0, 0.9); color: black; yellow */
    /* background-color: rgba(255, 204, 0, 0.9); color: black; yelloworange */
    /*background-color: rgba(0, 0, 0, 0.9); color: white;*/
    text-transform: uppercase;
    width: 100%;
    font-family: “Volvo Sans Medium”, sans-serif;
    font-size: 0.65em;
    padding: 2px 0px;
    margin: 0;
    }
    div#hscroller marquee span {
    margin-right: 8%;
    }
    div#hscroller #feedlogo {
    position: absolute;
    top: 0px;
    left:1px;
    z-index: 9;
    font-size: 0.5em;
    background: grey;
    color: white;
    border: 1px solid white;
    padding: 5px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    }
    </style>

    <!– The scroller html markup –>
    <div id=”hscroller”>
    <div id=”feedlogo”>LOGO</div>
    <marquee direction=”left” speed=”normal” behavior=”loop” scrollamount=”10″></marquee>
    </div>

    <!– The jQuery code for adding news items from a RSS feed (not needed if you want manual text in the marquee) –>
    <script>
    //var urlticker = ‘https://www.tijd.be/rss/ondernemen_auto.xml’; //detijd.be
    var urlticker = ‘http://www.verkeerscentrum.be/rss/4-INC%7CLOS%7CINF%7CPEVT.xml’; //verkeerscentrum.be

    jQuery(document).ready(function($) {

    //if scroller div exists…
    if (jQuery(‘#hscroller’).length > 0){

    //RSS feed ophalen via interne methode HSCROLLER
    jQuery.ajax({
    url: ‘https://www.tijd.be/rss/ondernemen_auto.xml’,
    type: ‘GET’,
    dataType: “xml”,
    success: function(xml) {

    console.log(“News loading into bottom scroller…”);

    var i = 0;
    var itemCount = jQuery(“item”, xml).length;
    /*console.log(“TEST COUNT ” + itemCount);*/

    jQuery.each(jQuery(“item”, xml), function(i, e) {

    //Haal item data op
    var itemURL = (jQuery(e).find(“link”)).text().trim();
    var itemTitle = (jQuery(e).find(“title”)).text().trim();
    var itemDescription = (jQuery(e).find(“description”)).text().trim();
    var itemPubDate = (jQuery(e).find(“pubDate”)).text().trim();
    var logolink = itemURL.replace(/^(http|https):\/\//, ”).replace(/\/.+/, ”);

    //Herschrijf pubDate
    var date = new Date(itemPubDate);
    var months = Array(“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”);
    var time = date.getHours()+”:”+date.getMinutes();
    var itemPubDate = date.getDate() + ” ” + months[date.getMonth()] + ” ” + date.getFullYear() + ” “+ time;

    //console.log(itemTitle);
    jQuery(“#hscroller #feedlogo”).empty().text(logolink);

    //News Scroller
    jQuery(“#hscroller marquee”).append(” » ” + itemTitle + ” <span> </span> “);

    i++; //counter

    });

    jQuery(“#hscroller”).show(); //Show when ready
    }

    });

    }
    });
    </script>

Reply To: Add newsScroller to a playlist slide
Your information:




47 − = 42