Youtube Top chart HTML5-HTML5, CSS, and jQuery javascript DATA JSONObject

topchart.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Topchart html iframe plugin VRAPro Admin</title>
        <link rel="stylesheet" href="topchart.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript" src="radio.js"></script>
        <script type="text/javascript" src="https://vrapro.hu/plugin/fulljs/coclive.js"></script>
    <script type="text/javascript">
        var oke = 'Sikeresen szavaztál. Köszönjük a szavazatott.';
        var hiba = 'Sajnos kétszer nem szavazhatsz ugyan arra a dalra.';
        document.write("<script language='text/javascript' type='text/javascript' src='https://admin.vrapro.hu/json/js/?radio="+radio+"&dsk="+dsk+"&ip="+self.location.hostname+"'><\/script>");
        document.write("<script language='text/javascript' type='text/javascript' src='https://admin.vrapro.hu/json/string/?radio="+radio+"&plugin=toplist'><\/script>");
            </script>
    <script type="text/javascript" src="https://vrapro.hu/plugin/fulljs/js/form_topchart.js"></script>
    </head>
    <body>
        <script src="topchart.js"></script>
    </body>
</html>

topchart.js

var JSONObject = JSON.parse(JSONString);
    console.log(JSONObject);
    /* start hiba oldalak */
    if (401==JSONObject[0]["json_status"]) {
document.write("Plugin hiba");
 }else{if (404==JSONObject[0]["json_status"]) {
document.write("Nem tudtunk kapcsolodni a rádió adminhoz.");
 }else{if (403==JSONObject[0]["json_status"]) {
document.write("Lejárt rádió admin.");
 }else{if (402==JSONObject[0]["json_status"]) {
document.write("Az admin fel van függesztve.");
}else{
 ///////// end hiba oldalak//////////
 /////////  start toplista plugin vezérlése//////////
 if(JSONObject[0]['top_stat'] == "offline"){document.write("A toplista inaktív");}else{ if(JSONObject[0]['top_stat_db'] == "0"){document.write("Jelenleg nincs szavazás.");}else{
document.write("<table style='width:100%;'><tbody id='reload'>");
     for (i = 1; i <= JSONObject[0]['top_stat_db']; i++) {
 /////////  start HTML//////////
document.write("<tr>");
document.write("<td style='width:8px'><span class='badge'><li></li></span></td>");
document.write("<td style='width:50px' class='yuimg'><img src='https://img.youtube.com/vi/"+JSONObject[0]["top_youtubeid"][""+i+""]+"/3.jpg' alt=''/></td>");
document.write("<td><b></b><div class='muted'>"+JSONObject[0]["top_title"][""+i+""]+"</div></td>");
document.write("<td style='width:10px'><span class='badge'>"+JSONObject[0]["toplist_nez"][""+i+""]+"</span></td>");
document.write("<td style='width:10px'><span class='badge'>"+JSONObject[0]["top_szav"][""+i+""]+"</span></td>");
document.write("<td style='width:10px'><span id='vidiview"+JSONObject[0]["top_youtubeid"][""+i+""]+"' class='badge'><a class='povidi' href='#!' data-link='https://www.youtube.com/embed/"+JSONObject[0]["top_youtubeid"][""+i+""]+"?enablejsapi=1' data-titles='"+JSONObject[0]["top_title"][""+i+""]+"' data-ids='"+JSONObject[0]["top_youtubeid"][""+i+""]+"'><img src='https://sport.news.am/static/other/play-ico-s.png' width='30' height='30' alt='Megtekintés'></a></span></td>");
document.write("<td style='width:10px'><span id='vidiplus"+JSONObject[0]["top_youtubeid"][""+i+""]+"' class='badge'><a class='poplus' href='#!' data-ids='"+JSONObject[0]["top_youtubeid"][""+i+""]+"'><img src='https://static.bbci.co.uk/radio/109/1.96.20171025155453/img/icons/chart_up.png' width='30' height='30' alt='Szavazás'></a></span></td>");
document.write("</tr>");
 /////////  end HTML//////////
 }
 }
document.write("</tbody></table>");
}}}}}

topchart.css

body{
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
font-weight: 300;
}
table {
    counter-reset: section;
    list-style: none;
}
td {
background:#FFFFFF;
color: #414141;
margin: 0 0 0px 0;
}
.yuimg img{
    width: 50px;
    height: 50px;
    display: block;
    border-top-left-radius: 10%;
    border-top-right-radius: 10%;
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 10%;
    box-sizing: border-box;
    border: 2px solid #33343C;
}
li {
    margin: 0 0 0px 0;
    line-height: 40px;
}
li:before {
    content: counter(section);
    counter-increment: section;
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0 20px 0 0;
    border: 1px solid #ccc;
    border-radius: 100%;
    text-align: center;
}
.badge {
cursor: default;
width: 40px;
height: 40px;
padding: 0px 0px 0px 0px;
border-radius: 50%;
margin: 0px 0px 0px 0px;
transition: all .0s ease-out;
}
.badge:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
.vidivra_modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    color: #010F1B;
}
.vidivra_modal-content {
    margin: auto;
    padding: 20px;
    width: 80%;
    font-family: Arial,Helvetica,sans-serif;
    background-color: #D1F532;
    border: 2px solid #CC22A3;
    border-radius: 6px;
}
.close{
color: #CC22A3;
    float: right;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: #CC22A3;
    text-decoration: none;
    cursor: pointer;
}

Tömörített állomány létöltése (.zip)

Hozzászolások

Ehhez a plugonhoz, még nem érkeztek hozzászólások.


Új hozzászóláshoz be kel jelentkezni. Bejelentkezés | Regisztráció