فيسبوك تويتر يوتيوب الموجز
إعرض جميع المقالات
جميع الحقوق محفوظة © 2012 - لـ عرب حصرى - Mohsen Abdo
404
نعتذر , لا نستطيع ايجاد الصفحة المطلوبة
طريقة تركيب افضل سلايدرشو لعرض المقالات على مدونة بلوجر بالصور تلقائيا Slider Show



نقدم لكم اليوم افضل سلايدر شو احترافى يقوم بعرض مواضيع المدونة من خلال قسم معين مع صور المواضيع تلقائيا.

تم تعديل تصميم السلايدشو ليتناسب مع جميع المستخدمين وجميع الشاشات سواء كمبيوتر او تابلت او موبايل ، والان اليكم الأكواد الخاصه بالسلايدر مع شرح بالفيديو كيفية تركيب الاكواد داخل قالب مدونة بلوجر والتعديل عليها من تنسيق المدونة.

شرح التركيب والأكواد


إبحث عن المكان المراد ظهور السلايدرشو على المدونة الخاص بك من خلال (فحص العنصر) ثم إنسخ الكلاس او اى دي لعنصر او اداة قريبة من المكان الذى تريد ظهور السلايدشو فيه ثم إذهب الى قالب المدونة وابحث عن الكود الذى قمت بنسخه.

شرح كيفية فعل ذلك


إدخل الى (لوحة مدونة بلوجر الرئيسية) ثم الى (المظهر) ثم (اضغط على السهم بجانب الزر) ثم إختر (تحرير HTML).
إدخل الى تحرير اكواد القالب ثم اضغط فى اى مكان فارغ داخل الكود ثم اضغط من لوحة المفاتيح Ctrl + F لفتح البحث داخل اكواد القالب ثم ابحث عن الكود الذى قمت بنسخه (الخاص بأى آداة قريبة للمكان المراد ظهور السلايدر فيه) ثم اضغط (إنتر) للبحث عن الكود وعند إيجاد الكود قم بالنزول أسفله (او أعلاه "على حسب المكان الذى تريده") ثم ضع أكواد  الـ HTML الخاصة بالسلايدشو التالية.

HTML

<!-- Start SliderShow -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section id='SliderShow' maxwidgets='1' showaddelement='yes'>
  <b:widget id='HTML10' locked='false' title='' type='HTML' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='content'>&lt;div class=&#39;slider-show&#39;&gt;
&lt;div class=&#39;recent-slider&#39; data-label=&#39;إسم القسم المراد عرضه داخل السلايدشو هنا&#39;/&gt;
&lt;/div&gt;&lt;/div&gt;</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
  </b:widget>
</b:section>
</b:if>
<!-- End SliderShow --> 
 

شرح كيفية فعل ذلك


إدخل الى (لوحة مدونة بلوجر الرئيسية) ثم الى (المظهر) ثم (اضغط على السهم بجانب الزر) ثم إختر (تحرير HTML).
إدخل الى تحرير اكواد القالب ثم اضغط فى اى مكان فارغ داخل الكود ثم اضغط من لوحة المفاتيح Ctrl + F لفتح البحث داخل اكواد القالب ثم اكتب الكود ]]></b:skin> ثم اضغط (إنتر) للبحث عن الكود وعند إيجاد الكود ضع فوقه (أعلاه) الأكواد الستايل التالية.

CSS

/* Start SliderShow */
.slider-show {
    padding: 0;
    margin: 0;
    background: #ffffff;
    border-radius: 3px;
    border: 1px solid #d2d2d2;
    overflow: hidden;
    margin-bottom: 14px;
}

.darkmode .slider-show {
    background: #181818;
    border: 1px solid #2a2a2a;
}

.recent-slider {
    width: 100%;
    height: 435px;
    overflow: hidden;
	margin-bottom: -55px;
}

#slider {
	width: 80%;
    height: 350px;
    padding: 0;
    margin: 0 10%;
    border-color: #ffffff;
    border-style: solid;
    border-width: 0 0 53px;
    box-shadow: 0 0 2px #d2d2d2;
    position: relative;
    overflow: hidden;
    margin-top: 14px;
}

.darkmode #slider {
    border-color: #2a2a2a;
    box-shadow: none;
}

.nivoSlider {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.nivoSlider img {
    position: relative;
    top: 0px;
    left: 0px;
    max-width: none;
    height: auto !important;
  
}

.nivo-main-image {
    display: block !important;
    position: relative !important;
    width: 100% !important;
}

.nivoSlider a {
    border: 0;
    display: block;
}

.nivoSlider a.nivo-imageLink {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    z-index: 6;
    display: none;
    background: white;
    filter: alpha(opacity=0);
    opacity: 0;
}

.nivo-slice {
    display: block;
    position: absolute;
    z-index: 5;
    height: 100%;
    top: 0;
}

.nivo-box {
    display: block;
    position: absolute;
    z-index: 5;
    overflow: hidden;
}

.nivo-box img {
    display: block;
}

.nivo-caption {
    position: absolute;
    top: -20px;
    width: 100%;
    z-index: 8;
    /* opacity: 0.8; */
    display: none;
    -moz-opacity: 0.8;
    filter: alpha(opacity=8);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0;
    margin: 0;
    text-transform: capitalize;
    line-height: 24px;
    letter-spacing: 0.3px;
    overflow: hidden;
    color: #000;
}

.nivo-caption p {
    display: none;
}

.nivo-caption a {
	display: inline-block;
}

.nivo-caption a:hover {
    text-decoration: none;
}
  
.nivo-caption a h3 {
	position: relative;
    left: 0;
    top: 5px;
    border: none;
    background-color: rgba(0, 0, 0, .9);
    color: #FFF;
    padding: 10px 10px 13px;
    font-size: 17px;
    z-index: 2;
    border-radius: 6px;
}
  
.nivo-html-caption {
    display: none;
}

.nivo-controlNav {
    position: relative;
    top: -9.5%;
    padding: 0;
    margin: 0;
    text-align: center;
}

.nivo-controlNav a {
	display: inline-block;
    background-color: #F6F6F6;
    color: #333;
    font-weight: bold;
    height: 28px;
    width: 28px;
    border-radius: 4px;
    margin: 0 2px;
    line-height: 28px;
    cursor: pointer;
    text-decoration: none;
}

.nivo-controlNav a.active {
    font-weight: bold;
    background: #009688;
	color: #fff;
}

.nivo-directionNav a {
    display: flex;
    position: absolute;
    top: 87%;
    padding: 5px 15px;
    margin: 0;
    cursor: pointer;
    text-decoration: none;
    background-color: #009688;
    color: #fff;
    border: 3px solid rgb(0 0 0 / 6%);
    font-weight: 500;
    z-index: 9;
}

.nivo-nextNav:before {
    content: "\f054";
    font-family: fontawesome;
    display: flex;
    position: relative;
    top: 4px;
    right: -8px;
    padding: 0;
    margin: 0;
    background-color: transparent;
    color: #fff;
}

.nivo-prevNav:after {
    content: "\f053";
    font-family: fontawesome;
    display: flex;
    position: relative;
    float: left;
    top: 4px;
    left: -8px;
    padding: 0;
    margin: 0;
    background-color: transparent;
    color: #fff;
}
  
.nivo-nextNav {
    float: right;
    right: 1px;
    border-radius: 4px 0 0 0;
}

.nivo-prevNav {
	float: left;
    left: 1px;
    border-radius: 0 4px 0 0;
}
/* End SliderShow */
  

شرح كيفية فعل ذلك


إدخل الى (لوحة مدونة بلوجر الرئيسية) ثم الى (المظهر) ثم (اضغط على السهم بجانب الزر) ثم إختر (تحرير HTML).
إدخل الى تحرير اكواد القالب ثم اضغط فى اى مكان فارغ داخل الكود ثم اضغط من لوحة المفاتيح Ctrl + F لفتح البحث داخل اكواد القالب ثم اكتب الكود ]]></b:skin> ثم اضغط (إنتر) للبحث عن الكود وعند إيجاد الكود قم بالنزول أسفله ثم ضع أكواد الـ JavaScript التالية.

ملحوظة: بيتم وضع السكربتين فى السكربتات الخاصة بالهيد </head> وليس فى السكربتات الخاصة بالبودى </body> اي يمكنك البحث عن </head> ثم وضعهم اسفل اغلاق الستايل ]]></b:skin>

JavaScript

<!-- Start SliderShow -->
<script>
//<![CDATA[
// SliderShow
(function(e) {
    var t = function(t, n) {
        var i = e.extend({}, e.fn.nivoSlider.defaults, n),
            r = {
                currentSlide: 0,
                currentImage: "",
                totalSlides: 0,
                running: !1, // !1 = Enable Control Buttons | !0 = Disable Control Buttons
                paused: !1,
                stop: !1, // !1 = Enable Autoplay | !0 = Disable Autoplay
                controlNavEl: !1
            },
            o = e(t);
        o.data("nivo:vars", r).addClass("nivoSlider");
        var a = o.children();
        a.each(function() {
            var t = e(this),
                n = "";
            t.is("img") || (t.is("a") && (t.addClass("nivo-imageLink"), n = t), t = t.find("img:first"));
            var i = 0 === i ? t.attr("width") : t.width(),
                o = 0 === o ? t.attr("height") : t.height();
            "" !== n && n.css("display", "none"), t.css("display", "none"), r.totalSlides++
        }), i.randomStart && (i.startSlide = Math.floor(Math.random() * r.totalSlides)), i.startSlide > 0 && (i.startSlide >= r.totalSlides && (i.startSlide = r.totalSlides - 1), r.currentSlide = i.startSlide), r.currentImage = e(a[r.currentSlide]).is("img") ? e(a[r.currentSlide]) : e(a[r.currentSlide]).find("img:first"), e(a[r.currentSlide]).is("a") && e(a[r.currentSlide]).css("display", "block");
        var s = e("<img/>").addClass("nivo-main-image");
        s.attr("src", r.currentImage.attr("src")).show(), o.append(s), e(window).resize(function() {
            o.children("img").width(o.width()), s.attr("src", r.currentImage.attr("src")), s.stop().height("auto"), e(".nivo-slice").remove(), e(".nivo-box").remove()
        }), o.append(e('<div class="nivo-caption"></div>'));
        var l = function(t) {
            var n = e(".nivo-caption", o);
            if ("" != r.currentImage.attr("title") && void 0 != r.currentImage.attr("title")) {
                var i = r.currentImage.attr("title");
                "#" == i.substr(0, 1) && (i = e(i).html()), "block" == n.css("display") ? setTimeout(function() {
                    n.html(i)
                }, t.animSpeed) : (n.html(i), n.stop().fadeIn(t.animSpeed))
            } else n.stop().fadeOut(t.animSpeed)
        };
        l(i);
        var c = 0;
        if (!i.manualAdvance && a.length > 1 && (c = setInterval(function() {
                f(o, a, i, !1)
            }, i.pauseTime)), i.directionNav && (o.append('<div class="nivo-directionNav"><a class="nivo-prevNav">' + i.prevText + '</a><a class="nivo-nextNav">' + i.nextText + "</a></div>"), e(o).on("click", "a.nivo-prevNav", function() {
                return r.running ? !1 : (clearInterval(c), c = "", r.currentSlide -= 2, f(o, a, i, "prev"), void 0)
            }), e(o).on("click", "a.nivo-nextNav", function() {
                return r.running ? !1 : (clearInterval(c), c = "", f(o, a, i, "next"), void 0)
            })), i.controlNav) {
            r.controlNavEl = e('<div class="nivo-controlNav"></div>'), o.after(r.controlNavEl);
            for (var u = 0; a.length > u; u++)
                if (i.controlNavThumbs) {
                    r.controlNavEl.addClass("nivo-thumbs-enabled");
                    var d = a.eq(u);
                    d.is("img") || (d = d.find("img:first")), d.attr("data-thumb") && r.controlNavEl.append('<a class="nivo-control" rel="' + u + '"><img src="' + d.attr("data-thumb") + '" alt="" /></a>')
                } else r.controlNavEl.append('<a class="nivo-control" rel="' + u + '">' + (u + 1) + "</a>");
            e("a:eq(" + r.currentSlide + ")", r.controlNavEl).addClass("active"), e("a", r.controlNavEl).bind("click", function() {
                return r.running ? !1 : e(this).hasClass("active") ? !1 : (clearInterval(c), c = "", s.attr("src", r.currentImage.attr("src")), r.currentSlide = e(this).attr("rel") - 1, f(o, a, i, "control"), void 0)
            })
        }
        i.pauseOnHover && o.hover(function() {
            r.paused = !0, clearInterval(c), c = ""
        }, function() {
            r.paused = !1, "" !== c || i.manualAdvance || (c = setInterval(function() {
                f(o, a, i, !1)
            }, i.pauseTime))
        }), o.bind("nivo:animFinished", function() {
            s.attr("src", r.currentImage.attr("src")), r.running = !1, e(a).each(function() {
                e(this).is("a") && e(this).css("display", "none")
            }), e(a[r.currentSlide]).is("a") && e(a[r.currentSlide]).css("display", "block"), "" !== c || r.paused || i.manualAdvance || (c = setInterval(function() {
                f(o, a, i, !1)
            }, i.pauseTime)), i.afterChange.call(this)
        });
        var h = function(t, n, i) {
                e(i.currentImage).parent().is("a") && e(i.currentImage).parent().css("display", "block"), e('img[src="' + i.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility", "hidden").show();
                for (var r = e('img[src="' + i.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").parent().is("a") ? e('img[src="' + i.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").parent().height() : e('img[src="' + i.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").height(), o = 0; n.slices > o; o++) {
                    var a = Math.round(t.width() / n.slices);
                    o === n.slices - 1 ? t.append(e('<div class="nivo-slice" name="' + o + '"><img src="' + i.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block !important; top:0; left:-" + (a + o * a - a) + 'px;" /></div>').css({
                        left: a * o + "px",
                        width: t.width() - a * o + "px",
                        height: r + "px",
                        opacity: "0",
                        overflow: "hidden"
                    })) : t.append(e('<div class="nivo-slice" name="' + o + '"><img src="' + i.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block !important; top:0; left:-" + (a + o * a - a) + 'px;" /></div>').css({
                        left: a * o + "px",
                        width: a + "px",
                        height: r + "px",
                        opacity: "0",
                        overflow: "hidden"
                    }))
                }
                e(".nivo-slice", t).height(r), s.stop().animate({
                    height: e(i.currentImage).height()
                }, n.animSpeed)
            },
            p = function(t, n, i) {
                e(i.currentImage).parent().is("a") && e(i.currentImage).parent().css("display", "block"), e('img[src="' + i.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility", "hidden").show();
                for (var r = Math.round(t.width() / n.boxCols), o = Math.round(e('img[src="' + i.currentImage.attr("src") + '"]', t).not(".nivo-main-image,.nivo-control img").height() / n.boxRows), a = 0; n.boxRows > a; a++)
                    for (var l = 0; n.boxCols > l; l++) l === n.boxCols - 1 ? (t.append(e('<div class="nivo-box" name="' + l + '" rel="' + a + '"><img src="' + i.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block; top:-" + o * a + "px; left:-" + r * l + 'px;" /></div>').css({
                        opacity: 0,
                        left: r * l + "px",
                        top: o * a + "px",
                        width: t.width() - r * l + "px"
                    })), e('.nivo-box[name="' + l + '"]', t).height(e('.nivo-box[name="' + l + '"] img', t).height() + "px")) : (t.append(e('<div class="nivo-box" name="' + l + '" rel="' + a + '"><img src="' + i.currentImage.attr("src") + '" style="position:absolute; width:' + t.width() + "px; height:auto; display:block; top:-" + o * a + "px; left:-" + r * l + 'px;" /></div>').css({
                        opacity: 0,
                        left: r * l + "px",
                        top: o * a + "px",
                        width: r + "px"
                    })), e('.nivo-box[name="' + l + '"]', t).height(e('.nivo-box[name="' + l + '"] img', t).height() + "px"));
                s.stop().animate({
                    height: e(i.currentImage).height()
                }, n.animSpeed)
            },
            f = function(t, n, i, r) {
                var o = t.data("nivo:vars");
                if (o && o.currentSlide === o.totalSlides - 1 && i.lastSlide.call(this), (!o || o.stop) && !r) return !1;
                i.beforeChange.call(this), r ? ("prev" === r && s.attr("src", o.currentImage.attr("src")), "next" === r && s.attr("src", o.currentImage.attr("src"))) : s.attr("src", o.currentImage.attr("src")), o.currentSlide++, o.currentSlide === o.totalSlides && (o.currentSlide = 0, i.slideshowEnd.call(this)), 0 > o.currentSlide && (o.currentSlide = o.totalSlides - 1), o.currentImage = e(n[o.currentSlide]).is("img") ? e(n[o.currentSlide]) : e(n[o.currentSlide]).find("img:first"), i.controlNav && (e("a", o.controlNavEl).removeClass("active"), e("a:eq(" + o.currentSlide + ")", o.controlNavEl).addClass("active")), l(i), e(".nivo-slice", t).remove(), e(".nivo-box", t).remove();
                var a = i.effect,
                    c = "";
                "random" === i.effect && (c = ["sliceDownRight", "sliceDownLeft", "sliceUpRight", "sliceUpLeft", "sliceUpDown", "sliceUpDownLeft", "fold", "fade", "boxRandom", "boxRain", "boxRainReverse", "boxRainGrow", "boxRainGrowReverse"], a = c[Math.floor(Math.random() * (c.length + 1))], void 0 === a && (a = "fade")), -1 !== i.effect.indexOf(",") && (c = i.effect.split(","), a = c[Math.floor(Math.random() * c.length)], void 0 === a && (a = "fade")), o.currentImage.attr("data-transition") && (a = o.currentImage.attr("data-transition")), o.running = !0;
                var u = 0,
                    d = 0,
                    f = "",
                    m = "",
                    v = "",
                    b = "";
                if ("sliceDown" === a || "sliceDownRight" === a || "sliceDownLeft" === a) h(t, i, o), u = 0, d = 0, f = e(".nivo-slice", t), "sliceDownLeft" === a && (f = e(".nivo-slice", t)._reverse()), f.each(function() {
                    var n = e(this);
                    n.css({
                        top: "0px"
                    }), d === i.slices - 1 ? setTimeout(function() {
                        n.animate({
                            opacity: "1.0"
                        }, i.animSpeed, "", function() {
                            t.trigger("nivo:animFinished")
                        })
                    }, 100 + u) : setTimeout(function() {
                        n.animate({
                            opacity: "1.0"
                        }, i.animSpeed)
                    }, 100 + u), u += 50, d++
                });
                else if ("sliceUp" === a || "sliceUpRight" === a || "sliceUpLeft" === a) h(t, i, o), u = 0, d = 0, f = e(".nivo-slice", t), "sliceUpLeft" === a && (f = e(".nivo-slice", t)._reverse()), f.each(function() {
                    var n = e(this);
                    n.css({
                        bottom: "0px"
                    }), d === i.slices - 1 ? setTimeout(function() {
                        n.animate({
                            opacity: "1.0"
                        }, i.animSpeed, "", function() {
                            t.trigger("nivo:animFinished")
                        })
                    }, 100 + u) : setTimeout(function() {
                        n.animate({
                            opacity: "1.0"
                        }, i.animSpeed)
                    }, 100 + u), u += 50, d++
                });
                else if ("sliceUpDown" === a || "sliceUpDownRight" === a || "sliceUpDownLeft" === a) {
                    h(t, i, o), u = 0, d = 0;
                    var y = 0;
                    f = e(".nivo-slice", t), "sliceUpDownLeft" === a && (f = e(".nivo-slice", t)._reverse()), f.each(function() {
                        var n = e(this);
                        0 === d ? (n.css("top", "0px"), d++) : (n.css("bottom", "0px"), d = 0), y === i.slices - 1 ? setTimeout(function() {
                            n.animate({
                                opacity: "1.0"
                            }, i.animSpeed, "", function() {
                                t.trigger("nivo:animFinished")
                            })
                        }, 100 + u) : setTimeout(function() {
                            n.animate({
                                opacity: "1.0"
                            }, i.animSpeed)
                        }, 100 + u), u += 50, y++
                    })
                } else if ("fold" === a) h(t, i, o), u = 0, d = 0, e(".nivo-slice", t).each(function() {
                    var n = e(this),
                        r = n.width();
                    n.css({
                        top: "0px",
                        width: "0px"
                    }), d === i.slices - 1 ? setTimeout(function() {
                        n.animate({
                            width: r,
                            opacity: "1.0"
                        }, i.animSpeed, "", function() {
                            t.trigger("nivo:animFinished")
                        })
                    }, 100 + u) : setTimeout(function() {
                        n.animate({
                            width: r,
                            opacity: "1.0"
                        }, i.animSpeed)
                    }, 100 + u), u += 50, d++
                });
                else if ("fade" === a) h(t, i, o), m = e(".nivo-slice:first", t), m.css({
                    width: t.width() + "px"
                }), m.animate({
                    opacity: "1.0"
                }, 2 * i.animSpeed, "", function() {
                    t.trigger("nivo:animFinished")
                });
                else if ("slideInRight" === a) h(t, i, o), m = e(".nivo-slice:first", t), m.css({
                    width: "0px",
                    opacity: "1"
                }), m.animate({
                    width: t.width() + "px"
                }, 2 * i.animSpeed, "", function() {
                    t.trigger("nivo:animFinished")
                });
                else if ("slideInLeft" === a) h(t, i, o), m = e(".nivo-slice:first", t), m.css({
                    width: "0px",
                    opacity: "1",
                    left: "",
                    right: "0px"
                }), m.animate({
                    width: t.width() + "px"
                }, 2 * i.animSpeed, "", function() {
                    m.css({
                        left: "0px",
                        right: ""
                    }), t.trigger("nivo:animFinished")
                });
                else if ("boxRandom" === a) p(t, i, o), v = i.boxCols * i.boxRows, d = 0, u = 0, b = g(e(".nivo-box", t)), b.each(function() {
                    var n = e(this);
                    d === v - 1 ? setTimeout(function() {
                        n.animate({
                            opacity: "1"
                        }, i.animSpeed, "", function() {
                            t.trigger("nivo:animFinished")
                        })
                    }, 100 + u) : setTimeout(function() {
                        n.animate({
                            opacity: "1"
                        }, i.animSpeed)
                    }, 100 + u), u += 20, d++
                });
                else if ("boxRain" === a || "boxRainReverse" === a || "boxRainGrow" === a || "boxRainGrowReverse" === a) {
                    p(t, i, o), v = i.boxCols * i.boxRows, d = 0, u = 0;
                    var x = 0,
                        w = 0,
                        k = [];
                    k[x] = [], b = e(".nivo-box", t), ("boxRainReverse" === a || "boxRainGrowReverse" === a) && (b = e(".nivo-box", t)._reverse()), b.each(function() {
                        k[x][w] = e(this), w++, w === i.boxCols && (x++, w = 0, k[x] = [])
                    });
                    for (var C = 0; 2 * i.boxCols > C; C++) {
                        for (var _ = C, T = 0; i.boxRows > T; T++) _ >= 0 && i.boxCols > _ && (function(n, r, o, s, l) {
                            var c = e(k[n][r]),
                                u = c.width(),
                                d = c.height();
                            ("boxRainGrow" === a || "boxRainGrowReverse" === a) && c.width(0).height(0), s === l - 1 ? setTimeout(function() {
                                c.animate({
                                    opacity: "1",
                                    width: u,
                                    height: d
                                }, i.animSpeed / 1.3, "", function() {
                                    t.trigger("nivo:animFinished")
                                })
                            }, 100 + o) : setTimeout(function() {
                                c.animate({
                                    opacity: "1",
                                    width: u,
                                    height: d
                                }, i.animSpeed / 1.3)
                            }, 100 + o)
                        }(T, _, u, d, v), d++), _--;
                        u += 100
                    }
                }
            },
            g = function(e) {
                for (var t, n, i = e.length; i; t = parseInt(Math.random() * i, 10), n = e[--i], e[i] = e[t], e[t] = n);
                return e
            },
            m = function(e) {
                this.console && console.log !== void 0 && console.log(e)
            };
        return this.stop = function() {
            e(t).data("nivo:vars").stop || (e(t).data("nivo:vars").stop = !0, m("Stop Slider"))
        }, this.start = function() {
            e(t).data("nivo:vars").stop && (e(t).data("nivo:vars").stop = !1, m("Start Slider"))
        }, i.afterLoad.call(this), this
    };
    e.fn.nivoSlider = function(n) {
        return this.each(function() {
            var i = e(this);
            if (i.data("nivoslider")) return i.data("nivoslider");
            var r = new t(this, n);
            i.data("nivoslider", r)
        })
    }, e.fn.nivoSlider.defaults = {
        effect: "random",
        slices: 15,
        boxCols: 8,
        boxRows: 4,
        animSpeed: 500,
        pauseTime: 3e3,
        startSlide: 0,
        directionNav: !0,
        controlNav: !0,
        controlNavThumbs: !1,
        pauseOnHover: !0,
        manualAdvance: !1,
        prevText: "السابق",
        nextText: "التالى",
        randomStart: !1,
        beforeChange: function() {},
        afterChange: function() {},
        slideshowEnd: function() {},
        lastSlide: function() {},
        afterLoad: function() {}
    }, e.fn._reverse = [].reverse
})(jQuery);
// End Nivo Slider jQuery Script
// SliderShow
/*]]>*/
</script>
<!-- End SliderShow -->
  
<!-- Start SliderShow -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
<script>
//<![CDATA[
// SliderShow
// Start Nivo Slider Script Control
$(function() {
    $(".recent-slider").each(function() {
        $(this).append("<div id=\"slider\"></div>");
        var a = $(this).attr("data-label"),
            f = $(this);
        $.ajax({
            type: "GET",
            url: "/feeds/posts/summary/-/" + a + "?max-results=" + 5 + "&alt=json-in-script", // Number Of Posts Shown
            async: !0,
            contentType: "application/json",
            dataType: "jsonp",
            success: function(g) {
                for (var j = 0; j < g.feed.entry.length; j++) {
                    for (var k = g.feed.entry[j], m = 0; m < k.link.length; m++)
                        if ("alternate" == k.link[m].rel) {
                            var q = k.link[m].href;
                            break
                        } try {
                        var t = k.media$thumbnail.url.replace('s72', 's300')
                    } catch (y) {
                        var t = "https://lh3.googleusercontent.com/24RAodFW8xxgzHpVBAthJHsf_szjRoa3-KzlAEdFgB6X6A5Gmlm-nCvt5nRkE95T52PmHSE4Mf5wvNGoRUgIXjjHi4PjiucY3RimpoVdiTPKQN5Jdj2n9-9bW0wUSzQcirYstqGO8Unv5v7RMU5JD_Q-lEuBgtUfXEmHxOs6ENvJBanzORTRCVXwSzYNRJxijualu8mHhR5S6DG8l4CIo6uADoudrzXGsz7oszRXccZK_FbasxG5xJ9O0mtPuIVavRO8Or89er61NiJIctiUWV0YqtMMOqK214VSjs8-lAx_7LmkneNOrkP7NdXvGTK0fxHgRBiHL7Tm2weLM33LjyMEzY4ygL68Hx81iJK4D-YRmUa8NJhpEKs8q93jgjwJ3ZrgDSzn2pKI-y3c5VWrYf-H38_lWOIMf7uuTOzKUOqoQYZLN8bhFYVyB4bLUwfX0gDtTT38QsV6MILDBQZl6gHQrHt1C8Lpp9EZ0x-1Vl2r2HeKlXS60iuRKZdfSWZNbibE2y9GCfdbBzRUGa-G3GRkQstDu2UBtNOo6WHZ4GI=w600-h250-no"
                    }
                    var v = k.title.$t.substr(0, 55) + "...", // Title Number Of Characters
                        w = k.summary.$t.substr(0, 65) + "..."; // Description Number Of Characters
                    f.find("#slider").append("<a href=\"" + q + "\"><img src=\"" + t + "\" title=\"<a href='" + q + "'><h3>" + v + "</h3></a><p>" + w + "</p>\"/></a>")
                }
                $("#slider").nivoSlider({
                    effect: "slideInRight",
                  
                    /*
                    To Change The Effect Choose One Of The
                    sliceDown
                    sliceDownLeft
                    sliceUp
                    sliceUpLeft
                    sliceUpDown
                    sliceUpDownLeft
                    fold
                    fade
                    random
                    slideInRight
                    slideInLeft
                    boxRandom
                    boxRain
                    boxRainReverse
                    boxRainGrow
                    boxRainGrowReverse
                    */

                    pauseTime: 5e3
                })
            }
        })
    })
$.noConflict();
});
// End Nivo Slider Script Control
// SliderShow
/*]]>*/
</script>
<!-- End SliderShow -->
 

الشرح فيديو




المنشورات ذات الصلة

هناك 3 تعليقات:

جدول التنقل بين محتوى المقال
    جميع الحقوق محفوظة © 2012 - لـ عرب حصرى
    تصميم وتطوير من الـ بواسطة Mohsen Abdo