samedi 26 août 2017

Making feed slider to use random posts instead of first ones

OK i made a slider using code i found somewhwhere over net to display posts from two labels from blogger feed api. So there is a problem that this code is a little bit confusing to me and I am asking how to anapt this code to pick for egxample random 7 posts.

<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(http://ift.tt/1O3RgW0);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px, sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px , sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {display:none!important;visibility:hidden!imporant;opacity:0!important;height: 0!important;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
#slidecontainter {max-width: 270px;max-height: 270px;position:relative;margin: 0 auto;display: inline-block;}
#centerwrapckass{text-align:center;}
#spacebetweentwo{width:90px;display: inline-block;}
@media only screen and (max-width:448px){#spacebetweentwo{display:none!important;}}
</style>
<div id="centerwrapckass">
<div  id="slidecontainter" ><div id="featuredbwidget"></div></div>
<div  id="spacebetweentwo" ></div>
<div  id="slidecontainter" ><div id="featuredbwidget1"></div></div>
</div>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"",
featuredNum:7,
listbyLabel:"Познати%20велики%20песници",
feathumbSize:150,
interval:1000,
autoplay:false,
featuredID:"#featuredbwidget"
});
featuredbwidget({
listURL:"",/*ostaviti  prazno*/
featuredNum:7,
listbyLabel:"Данашњи%20песници",
feathumbSize:150,
interval:1000,
autoplay:false,
featuredID:"#featuredbwidget1"
});
function featuredbwidget(a) {
    (function(e) {
        var h = {
            listURL: "",
            featuredNum: 3,
            featuredID: "",
            feathumbSize: 300,
            interval: 5000,
            autoplay: false,
            loadingFeatured: "nextfeatured",
            pBlank: "http://ift.tt/1UcBnsV",
            byMonth: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            listbyLabel: false
        };
        h = e.extend({}, h, a);
        var g = e(h.featuredID);
        var d = h.featuredNum * 200;
        g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');
        var f = function(w) {
            var q, k, m, u, x, p, t, v, r, l = "",
                s = w.feed.entry;
            for (var o = 0; o < s.length; o++) {
                for (var n = 0; n < s[o].link.length; n++) {
                    if (s[o].link[n].rel == "alternate") {
                        q = s[o].link[n].href;
                        break
                    }
                }
                if ("media$thumbnail" in s[o]) {
                    u = s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + h.feathumbSize + "-c")
                } else {
                    u = h.pBlank.replace(/\/s[0-9]+(\-c|\/)/, "/s" + h.feathumbSize + "$1")
                }
                k = s[o].title.$t;
                r = s[o].published.$t.substring(0, 10);
                m = s[o].author[0].name.$t;
                x = r.substring(0, 4);
                p = r.substring(5, 7);
                t = r.substring(8, 10);
                v = h.byMonth[parseInt(p, 10) - 1];
                l += '<li><a href="' + q + '"><div class="featuredbg"></div><img class="featuredthumb" src="' + u + '"/><h5>' + k + '</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">' + t + '</span> <span class="fmonth">' + v + '</span> <span class="fyear">' + x + '</span></span> - <span class="fauthor">' + m + "</span></div></li>"
            }
            e("ul", g).append(l).addClass(h.loadingFeatured)
        };
        var c = function() {
            e(h.featuredID + " .feat-next").click()
        };
        var b = function() {
            e.get((h.listURL === "" ? window.location.protocol + "//" + window.location.host : h.listURL) + "/feeds/posts/summary" + (h.listbyLabel === false ? "" : "/-/" + h.listbyLabel) + "?max-results=" + h.featuredNum + "&orderby=published&alt=json-in-script", f, "jsonp");
            setTimeout(function() {
                e(h.featuredID + " .feat-prev").click(function() {
                    e(h.featuredID + " .featslider li:first").before(e(h.featuredID + " .featslider li:last"));
                    return false
                });
                e(h.featuredID + " .feat-next").click(function() {
                    e(h.featuredID + " .featslider li:last").after(e(h.featuredID + " .featslider li:first"));
                    return false
                });
                if (h.autoplay) {
                    var i = h.interval;
                    var j = setInterval(c, i);
                    e(h.featuredID + " .featslider li:first").before(e(h.featuredID + " .featslider li:last"));
                    e(h.featuredID + " .featslider").hover(function() {
                        clearInterval(j)
                    }, function() {
                        j = setInterval(c, i)
                    })
                }
                e("ul", g).removeClass(h.loadingFeatured)
            }, d)
        };
        e(document).ready(b)
    })(jQuery)
};
//]]>
</script>

Does anybody have any idea how to acomplish this? Probably need to use function Math.random(); and to make some foor loop to be sure that random values do not get duplicated. Thanks in advance this is very important for me to acomplish this task




Aucun commentaire:

Enregistrer un commentaire