5/18/2018

settings_overscan print announcement
أهلا أصدقائي .. في هذا البرنامج التعليمي سنكتشف  مكتبة OwlCarousel.js  والتي هي عبارة عن مكوّن إضافة   jQuery مساعد مثل مكتبات modernizr و bootstrap و niceScroll.js  التي سبق شرحها وغيرها من المكتبات المميزة الأخرى التى سنشرحها مستقبلا..الغرض من هذه المكتبة الرائعة حقن عنصر الإنزلاق في الأدوات والإضافات المراد تهيئتها أو إظهارها على شكل سلايدر شو  متحرك أي أن هذه المكتبة  تتيح لك إنشاء شريط تمرير دائري رائع الاستجابة.
الإصدار الذي نعرضه عليكم 1.3.3 وهو المفضل عندي شخصيا لسبب أنه غير متعارض مع أغلب السكريبتات.. بالعلم أن الإصدار 2.x.x لا يعتبر متوافقًا مع الإصدار السابق1.x.x إلا أن الفكرة تظل كما هي ، ولها الكثير من القواسم المشتركة مع Owl1 ، لكن السكريبت الأساسي أعيد كتابته من الصفر.

المميز في هاته المكتبة سرعتها وطريقة تجاوبها السلسة مع كل الأجهزة أضف إمكانية تخصيص دينامكية العمل من خلال كود ترتيب المعلمات .





support / jquery.OwlCarousel   1.3.3

  • 6+IE
  • 5+Chrome
  • 4+Firefox
  • 4+Safari
  • 10+Opera
  • all Browser
  • 2.2+android
  • all touch

قبل أن نشرع في الشرح دعونا نوضح مسئلة وهي أننا في هذا الموضوع سنحاول أن نشرح طريقة التركيب لمكتبة OwlCarousel وكيفية التعديل على كود ترتيب المعلمات بإستعمال مثال وصفي بسيط لننتقل بعدها في التدوينات القادمة  للمستوى الإحترافي وذلك بتطبيق الشرح على إضافات حيوية كمستعرض الاقسام والسلايدر الرئيسي ومواضيع ذات صلة ..إلى غير ذلك ..كما أنه أدعوك لزيارة الصفحة الرسمية لمكتبة OwlCarousel.js حتى تتمكن من أخذ نظرة عامة وشاملة ومنها معاينة الأمثلة من هنا

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب



لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية

  • قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود.css التالي ..

  • 
    /*=====================================
    = OwlCarousel css
    =====================================*/
    /*-----owl buttons------*/
    .owl-carousel .owl-controls{margin-top:0;text-align:center;}
    .owl-controls{-webkit-tap-highlight-color:rgba(0,0,0,0);}
    .owl-page,.owl-controls .owl-buttons div{cursor:pointer;}
    .owl-carousel .owl-controls .owl-buttons{position:static;margin:0;padding:0;height:0;width:100%;z-index:9;}
    .owl-carousel .owl-controls .owl-buttons div.owl-prev{right:0;}
    .owl-carousel .owl-controls .owl-buttons div.owl-next{left:0;}
    .owl-carousel .owl-controls .owl-buttons div{position:absolute;margin:0;padding:0;top:50%;z-index:9;display:inline-block;font-size:17px;overflow:hidden;}
    .owl-carousel .owl-controls .owl-buttons div .fa{position:relative;width:38px;height:38px;line-height:38px;border:0;background-color:#f79029;color:#FFF;font-size:17px;text-align:center;}
    /*----owl pagination-----*/
    .owl-carousel .owl-controls .owl-pagination {pointer-events: none;margin: 10px;right: 50%;display: inline-flex;display: -webkit-inline-flex;justify-content: center;align-items: center;bottom: 10px;z-index: 20;padding: 2px 15px;}
    .owl-carousel .owl-controls .owl-pagination .owl-page{pointer-events:auto;position:relative;display:inline-block;}
    .owl-carousel .owl-controls .owl-pagination .owl-page span{pointer-events:auto;background-color:#ffffff;opacity:1;width:10px;height:10px;margin:3px;display:inline-block;float:right;}
    .owl-carousel .owl-controls .owl-pagination .owl-page.active span{background-color:#f79029;}
    /*-----shah content------*/
    .owl-carousel .owl-controls{margin-top:0;}
    .owl-carousel{display:none;}
    .owl-carousel,.owl-carousel .owl-wrapper,.owl-carousel .owl-wrapper-outer{position:relative;overflow:hidden;width:100%;}
    .owl-carousel .owl-wrapper,.owl-carousel .owl-item{backface-visibility:hidden;}
    .owl-carousel .owl-item{float:right;}
    /*----stat [ opacity ] 0.8----*/
    .owl-carousel .owl-controls .owl-buttons div .fa:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.8)";filter:alpha(opacity=0.8);
    opacity:0.8;}
    /*  Owl Carousel CSS3 Transitions */
    .owl-origin{-webkit-perspective:1200px;-webkit-perspective-origin-x:50%;-webkit-perspective-origin-y:50%;-moz-perspective:1200px;-moz-perspective-origin-x:50%;-moz-perspective-origin-y:50%;perspective:1200px}.owl-fade-out{z-index:10;-webkit-animation:fadeOut .7s both ease;-moz-animation:fadeOut .7s both ease;animation:fadeOut .7s both ease}.owl-fade-in{-webkit-animation:fadeIn .7s both ease;-moz-animation:fadeIn .7s both ease;animation:fadeIn .7s both ease}.owl-backSlide-out{-webkit-animation:backSlideOut 1s both ease;-moz-animation:backSlideOut 1s both ease;animation:backSlideOut 1s both ease}.owl-backSlide-in{-webkit-animation:backSlideIn 1s both ease;-moz-animation:backSlideIn 1s both ease;animation:backSlideIn 1s both ease}.owl-goDown-out{-webkit-animation:scaleToFade .7s ease both;-moz-animation:scaleToFade .7s ease both;animation:scaleToFade .7s ease both}.owl-goDown-in{-webkit-animation:goDown .6s ease both;-moz-animation:goDown .6s ease both;animation:goDown .6s ease both}.owl-fadeUp-in{-webkit-animation:scaleUpFrom .5s ease both;-moz-animation:scaleUpFrom .5s ease both;animation:scaleUpFrom .5s ease both}.owl-fadeUp-out{-webkit-animation:scaleUpTo .5s ease both;-moz-animation:scaleUpTo .5s ease both;animation:scaleUpTo .5s ease both}@-webkit-keyframes empty{0{opacity:1}}@-moz-keyframes empty{0{opacity:1}}@keyframes empty{0{opacity:1}}@-webkit-keyframes fadeIn{0{opacity:0}100%{opacity:1}}@-moz-keyframes fadeIn{0{opacity:0}100%{opacity:1}}@keyframes fadeIn{0{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeOut{0{opacity:1}100%{opacity:0}}@-moz-keyframes fadeOut{0{opacity:1}100%{opacity:0}}@keyframes fadeOut{0{opacity:1}100%{opacity:0}}@-webkit-keyframes backSlideOut{25%{opacity:.5;-webkit-transform:translateZ(-500px)}75%{opacity:.5;-webkit-transform:translateZ(-500px) translateX(-200%)}100%{opacity:.5;-webkit-transform:translateZ(-500px) translateX(-200%)}}@-moz-keyframes backSlideOut{25%{opacity:.5;-moz-transform:translateZ(-500px)}75%{opacity:.5;-moz-transform:translateZ(-500px) translateX(-200%)}100%{opacity:.5;-moz-transform:translateZ(-500px) translateX(-200%)}}@keyframes backSlideOut{25%{opacity:.5;transform:translateZ(-500px)}75%{opacity:.5;transform:translateZ(-500px) translateX(-200%)}100%{opacity:.5;transform:translateZ(-500px) translateX(-200%)}}@-webkit-keyframes backSlideIn{0,25%{opacity:.5;-webkit-transform:translateZ(-500px) translateX(200%)}75%{opacity:.5;-webkit-transform:translateZ(-500px)}100%{opacity:1;-webkit-transform:translateZ(0) translateX(0)}}@-moz-keyframes backSlideIn{0,25%{opacity:.5;-moz-transform:translateZ(-500px) translateX(200%)}75%{opacity:.5;-moz-transform:translateZ(-500px)}100%{opacity:1;-moz-transform:translateZ(0) translateX(0)}}@keyframes backSlideIn{0,25%{opacity:.5;transform:translateZ(-500px) translateX(200%)}75%{opacity:.5;transform:translateZ(-500px)}100%{opacity:1;transform:translateZ(0) translateX(0)}}@-webkit-keyframes scaleToFade{to{opacity:0;-webkit-transform:scale(.8)}}@-moz-keyframes scaleToFade{to{opacity:0;-moz-transform:scale(.8)}}@keyframes scaleToFade{to{opacity:0;transform:scale(.8)}}@-webkit-keyframes goDown{from{-webkit-transform:translateY(-100%)}}@-moz-keyframes goDown{from{-moz-transform:translateY(-100%)}}@keyframes goDown{from{transform:translateY(-100%)}}@-webkit-keyframes scaleUpFrom{from{opacity:0;-webkit-transform:scale(1.5)}}@-moz-keyframes scaleUpFrom{from{opacity:0;-moz-transform:scale(1.5)}}@keyframes scaleUpFrom{from{opacity:0;transform:scale(1.5)}}@-webkit-keyframes scaleUpTo{to{opacity:0;-webkit-transform:scale(1.5)}}@-moz-keyframes scaleUpTo{to{opacity:0;-moz-transform:scale(1.5)}}@keyframes scaleUpTo{to{opacity:0;transform:scale(1.5)}}
    

  • قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js التالي ..

  • 
        <script type='text/javascript'>
           /*<![CDATA[*/
         /*  
          *  jQuery OwlCarousel v1.3.3
          */
          "function"!==typeof Object.create&&(Object.create=function(f){function g(){}g.prototype=f;return new g});
    (function(f,g,k){var l={init:function(a,b){this.$elem=f(b);this.options=f.extend({},f.fn.owlCarousel.options,this.$elem.data(),a);this.userOptions=a;this.loadContent()},loadContent:function(){function a(a){var d,e="";if("function"===typeof b.options.jsonSuccess)b.options.jsonSuccess.apply(this,[a]);else{for(d in a.owl)a.owl.hasOwnProperty(d)&&(e+=a.owl[d].item);b.$elem.html(e)}b.logIn()}var b=this,e;"function"===typeof b.options.beforeInit&&b.options.beforeInit.apply(this,[b.$elem]);"string"===typeof b.options.jsonPath?
    (e=b.options.jsonPath,f.getJSON(e,a)):b.logIn()},logIn:function(){this.$elem.data("owl-originalStyles",this.$elem.attr("style"));this.$elem.data("owl-originalClasses",this.$elem.attr("class"));this.$elem.css({opacity:0});this.orignalItems=this.options.items;this.checkBrowser();this.wrapperWidth=0;this.checkVisible=null;this.setVars()},setVars:function(){if(0===this.$elem.children().length)return!1;this.baseClass();this.eventTypes();this.$userItems=this.$elem.children();this.itemsAmount=this.$userItems.length;
    this.wrapItems();this.$owlItems=this.$elem.find(".owl-item");this.$owlWrapper=this.$elem.find(".owl-wrapper");this.playDirection="next";this.prevItem=0;this.prevArr=[0];this.currentItem=0;this.customEvents();this.onStartup()},onStartup:function(){this.updateItems();this.calculateAll();this.buildControls();this.updateControls();this.response();this.moveEvents();this.stopOnHover();this.owlStatus();!1!==this.options.transitionStyle&&this.transitionTypes(this.options.transitionStyle);!0===this.options.autoPlay&&
    (this.options.autoPlay=5E3);this.play();this.$elem.find(".owl-wrapper").css("display","block");this.$elem.is(":visible")?this.$elem.css("opacity",1):this.watchVisibility();this.onstartup=!1;this.eachMoveUpdate();"function"===typeof this.options.afterInit&&this.options.afterInit.apply(this,[this.$elem])},eachMoveUpdate:function(){!0===this.options.lazyLoad&&this.lazyLoad();!0===this.options.autoHeight&&this.autoHeight();this.onVisibleItems();"function"===typeof this.options.afterAction&&this.options.afterAction.apply(this,
    [this.$elem])},updateVars:function(){"function"===typeof this.options.beforeUpdate&&this.options.beforeUpdate.apply(this,[this.$elem]);this.watchVisibility();this.updateItems();this.calculateAll();this.updatePosition();this.updateControls();this.eachMoveUpdate();"function"===typeof this.options.afterUpdate&&this.options.afterUpdate.apply(this,[this.$elem])},reload:function(){var a=this;g.setTimeout(function(){a.updateVars()},0)},watchVisibility:function(){var a=this;if(!1===a.$elem.is(":visible"))a.$elem.css({opacity:0}),
    g.clearInterval(a.autoPlayInterval),g.clearInterval(a.checkVisible);else return!1;a.checkVisible=g.setInterval(function(){a.$elem.is(":visible")&&(a.reload(),a.$elem.animate({opacity:1},200),g.clearInterval(a.checkVisible))},500)},wrapItems:function(){this.$userItems.wrapAll('<div class="owl-wrapper">').wrap('<div class="owl-item"></div>');this.$elem.find(".owl-wrapper").wrap('<div class="owl-wrapper-outer">');this.wrapperOuter=this.$elem.find(".owl-wrapper-outer");this.$elem.css("display","block")},
    baseClass:function(){var a=this.$elem.hasClass(this.options.baseClass),b=this.$elem.hasClass(this.options.theme);a||this.$elem.addClass(this.options.baseClass);b||this.$elem.addClass(this.options.theme)},updateItems:function(){var a,b;if(!1===this.options.responsive)return!1;if(!0===this.options.singleItem)return this.options.items=this.orignalItems=1,this.options.itemsCustom=!1,this.options.itemsDesktop=!1,this.options.itemsDesktopSmall=!1,this.options.itemsTablet=!1,this.options.itemsTabletSmall=
    !1,this.options.itemsMobile=!1;a=f(this.options.responsiveBaseWidth).width();a>(this.options.itemsDesktop[0]||this.orignalItems)&&(this.options.items=this.orignalItems);if(!1!==this.options.itemsCustom)for(this.options.itemsCustom.sort(function(a,b){return a[0]-b[0]}),b=0;b<this.options.itemsCustom.length;b+=1)this.options.itemsCustom[b][0]<=a&&(this.options.items=this.options.itemsCustom[b][1]);else a<=this.options.itemsDesktop[0]&&!1!==this.options.itemsDesktop&&(this.options.items=this.options.itemsDesktop[1]),
    a<=this.options.itemsDesktopSmall[0]&&!1!==this.options.itemsDesktopSmall&&(this.options.items=this.options.itemsDesktopSmall[1]),a<=this.options.itemsTablet[0]&&!1!==this.options.itemsTablet&&(this.options.items=this.options.itemsTablet[1]),a<=this.options.itemsTabletSmall[0]&&!1!==this.options.itemsTabletSmall&&(this.options.items=this.options.itemsTabletSmall[1]),a<=this.options.itemsMobile[0]&&!1!==this.options.itemsMobile&&(this.options.items=this.options.itemsMobile[1]);this.options.items>this.itemsAmount&&
    !0===this.options.itemsScaleUp&&(this.options.items=this.itemsAmount)},response:function(){var a=this,b,e;if(!0!==a.options.responsive)return!1;e=f(g).width();a.resizer=function(){f(g).width()!==e&&(!1!==a.options.autoPlay&&g.clearInterval(a.autoPlayInterval),g.clearTimeout(b),b=g.setTimeout(function(){e=f(g).width();a.updateVars()},a.options.responsiveRefreshRate))};f(g).resize(a.resizer)},updatePosition:function(){this.jumpTo(this.currentItem);!1!==this.options.autoPlay&&this.checkAp()},appendItemsSizes:function(){var a=
    this,b=0,e=a.itemsAmount-a.options.items;a.$owlItems.each(function(c){var d=f(this);d.css({width:a.itemWidth}).data("owl-item",Number(c));if(0===c%a.options.items||c===e)c>e||(b+=1);d.data("owl-roundPages",b)})},appendWrapperSizes:function(){this.$owlWrapper.css({width:this.$owlItems.length*this.itemWidth*2,left:0});this.appendItemsSizes()},calculateAll:function(){this.calculateWidth();this.appendWrapperSizes();this.loops();this.max()},calculateWidth:function(){this.itemWidth=Math.round(this.$elem.width()/
    this.options.items)},max:function(){var a=-1*(this.itemsAmount*this.itemWidth-this.options.items*this.itemWidth);this.options.items>this.itemsAmount?this.maximumPixels=a=this.maximumItem=0:(this.maximumItem=this.itemsAmount-this.options.items,this.maximumPixels=a);return a},min:function(){return 0},loops:function(){var a=0,b=0,e,c;this.positionsInArray=[0];this.pagesInArray=[];for(e=0;e<this.itemsAmount;e+=1)b+=this.itemWidth,this.positionsInArray.push(-b),!0===this.options.scrollPerPage&&(c=f(this.$owlItems[e]),
    c=c.data("owl-roundPages"),c!==a&&(this.pagesInArray[a]=this.positionsInArray[e],a=c))},buildControls:function(){if(!0===this.options.navigation||!0===this.options.pagination)this.owlControls=f('<div class="owl-controls"/>').toggleClass("clickable",!this.browser.isTouch).appendTo(this.$elem);!0===this.options.pagination&&this.buildPagination();!0===this.options.navigation&&this.buildButtons()},buildButtons:function(){var a=this,b=f('<div class="owl-buttons"/>');a.owlControls.append(b);a.buttonPrev=
    f("<div/>",{"class":"owl-prev",html:a.options.navigationText[0]||""});a.buttonNext=f("<div/>",{"class":"owl-next",html:a.options.navigationText[1]||""});b.append(a.buttonPrev).append(a.buttonNext);b.on("touchstart.owlControls mousedown.owlControls",'div[class^="owl"]',function(a){a.preventDefault()});b.on("touchend.owlControls mouseup.owlControls",'div[class^="owl"]',function(b){b.preventDefault();f(this).hasClass("owl-next")?a.next():a.prev()})},buildPagination:function(){var a=this;a.paginationWrapper=
    f('<div class="owl-pagination"/>');a.owlControls.append(a.paginationWrapper);a.paginationWrapper.on("touchend.owlControls mouseup.owlControls",".owl-page",function(b){b.preventDefault();Number(f(this).data("owl-page"))!==a.currentItem&&a.goTo(Number(f(this).data("owl-page")),!0)})},updatePagination:function(){var a,b,e,c,d,g;if(!1===this.options.pagination)return!1;this.paginationWrapper.html("");a=0;b=this.itemsAmount-this.itemsAmount%this.options.items;for(c=0;c<this.itemsAmount;c+=1)0===c%this.options.items&&
    (a+=1,b===c&&(e=this.itemsAmount-this.options.items),d=f("<div/>",{"class":"owl-page"}),g=f("<span></span>",{text:!0===this.options.paginationNumbers?a:"","class":!0===this.options.paginationNumbers?"owl-numbers":""}),d.append(g),d.data("owl-page",b===c?e:c),d.data("owl-roundPages",a),this.paginationWrapper.append(d));this.checkPagination()},checkPagination:function(){var a=this;if(!1===a.options.pagination)return!1;a.paginationWrapper.find(".owl-page").each(function(){f(this).data("owl-roundPages")===
    f(a.$owlItems[a.currentItem]).data("owl-roundPages")&&(a.paginationWrapper.find(".owl-page").removeClass("active"),f(this).addClass("active"))})},checkNavigation:function(){if(!1===this.options.navigation)return!1;!1===this.options.rewindNav&&(0===this.currentItem&&0===this.maximumItem?(this.buttonPrev.addClass("disabled"),this.buttonNext.addClass("disabled")):0===this.currentItem&&0!==this.maximumItem?(this.buttonPrev.addClass("disabled"),this.buttonNext.removeClass("disabled")):this.currentItem===
    this.maximumItem?(this.buttonPrev.removeClass("disabled"),this.buttonNext.addClass("disabled")):0!==this.currentItem&&this.currentItem!==this.maximumItem&&(this.buttonPrev.removeClass("disabled"),this.buttonNext.removeClass("disabled")))},updateControls:function(){this.updatePagination();this.checkNavigation();this.owlControls&&(this.options.items>=this.itemsAmount?this.owlControls.hide():this.owlControls.show())},destroyControls:function(){this.owlControls&&this.owlControls.remove()},next:function(a){if(this.isTransition)return!1;
    this.currentItem+=!0===this.options.scrollPerPage?this.options.items:1;if(this.currentItem>this.maximumItem+(!0===this.options.scrollPerPage?this.options.items-1:0))if(!0===this.options.rewindNav)this.currentItem=0,a="rewind";else return this.currentItem=this.maximumItem,!1;this.goTo(this.currentItem,a)},prev:function(a){if(this.isTransition)return!1;this.currentItem=!0===this.options.scrollPerPage&&0<this.currentItem&&this.currentItem<this.options.items?0:this.currentItem-(!0===this.options.scrollPerPage?
    this.options.items:1);if(0>this.currentItem)if(!0===this.options.rewindNav)this.currentItem=this.maximumItem,a="rewind";else return this.currentItem=0,!1;this.goTo(this.currentItem,a)},goTo:function(a,b,e){var c=this;if(c.isTransition)return!1;"function"===typeof c.options.beforeMove&&c.options.beforeMove.apply(this,[c.$elem]);a>=c.maximumItem?a=c.maximumItem:0>=a&&(a=0);c.currentItem=c.owl.currentItem=a;if(!1!==c.options.transitionStyle&&"drag"!==e&&1===c.options.items&&!0===c.browser.support3d)return c.swapSpeed(0),
    !0===c.browser.support3d?c.transition3d(c.positionsInArray[a]):c.css2slide(c.positionsInArray[a],1),c.afterGo(),c.singleItemTransition(),!1;a=c.positionsInArray[a];!0===c.browser.support3d?(c.isCss3Finish=!1,!0===b?(c.swapSpeed("paginationSpeed"),g.setTimeout(function(){c.isCss3Finish=!0},c.options.paginationSpeed)):"rewind"===b?(c.swapSpeed(c.options.rewindSpeed),g.setTimeout(function(){c.isCss3Finish=!0},c.options.rewindSpeed)):(c.swapSpeed("slideSpeed"),g.setTimeout(function(){c.isCss3Finish=!0},
    c.options.slideSpeed)),c.transition3d(a)):!0===b?c.css2slide(a,c.options.paginationSpeed):"rewind"===b?c.css2slide(a,c.options.rewindSpeed):c.css2slide(a,c.options.slideSpeed);c.afterGo()},jumpTo:function(a){"function"===typeof this.options.beforeMove&&this.options.beforeMove.apply(this,[this.$elem]);a>=this.maximumItem||-1===a?a=this.maximumItem:0>=a&&(a=0);this.swapSpeed(0);!0===this.browser.support3d?this.transition3d(this.positionsInArray[a]):this.css2slide(this.positionsInArray[a],1);this.currentItem=
    this.owl.currentItem=a;this.afterGo()},afterGo:function(){this.prevArr.push(this.currentItem);this.prevItem=this.owl.prevItem=this.prevArr[this.prevArr.length-2];this.prevArr.shift(0);this.prevItem!==this.currentItem&&(this.checkPagination(),this.checkNavigation(),this.eachMoveUpdate(),!1!==this.options.autoPlay&&this.checkAp());"function"===typeof this.options.afterMove&&this.prevItem!==this.currentItem&&this.options.afterMove.apply(this,[this.$elem])},stop:function(){this.apStatus="stop";g.clearInterval(this.autoPlayInterval)},
    checkAp:function(){"stop"!==this.apStatus&&this.play()},play:function(){var a=this;a.apStatus="play";if(!1===a.options.autoPlay)return!1;g.clearInterval(a.autoPlayInterval);a.autoPlayInterval=g.setInterval(function(){a.next(!0)},a.options.autoPlay)},swapSpeed:function(a){"slideSpeed"===a?this.$owlWrapper.css(this.addCssSpeed(this.options.slideSpeed)):"paginationSpeed"===a?this.$owlWrapper.css(this.addCssSpeed(this.options.paginationSpeed)):"string"!==typeof a&&this.$owlWrapper.css(this.addCssSpeed(a))},
    addCssSpeed:function(a){return{"-webkit-transition":"all "+a+"ms ease","-moz-transition":"all "+a+"ms ease","-o-transition":"all "+a+"ms ease",transition:"all "+a+"ms ease"}},removeTransition:function(){return{"-webkit-transition":"","-moz-transition":"","-o-transition":"",transition:""}},doTranslate:function(a){return{"-webkit-transform":"translate3d("+a+"px, 0px, 0px)","-moz-transform":"translate3d("+a+"px, 0px, 0px)","-o-transform":"translate3d("+a+"px, 0px, 0px)","-ms-transform":"translate3d("+
    a+"px, 0px, 0px)",transform:"translate3d("+a+"px, 0px,0px)"}},transition3d:function(a){this.$owlWrapper.css(this.doTranslate(a))},css2move:function(a){this.$owlWrapper.css({right:a})},css2slide:function(a,b){var e=this;e.isCssFinish=!1;e.$owlWrapper.stop(!0,!0).animate({right:a},{duration:b||e.options.slideSpeed,complete:function(){e.isCssFinish=!0}})},checkBrowser:function(){var a=k.createElement("div");a.style.cssText="  -moz-transform:translate3d(0px, 0px, 10px); -ms-transform:translate3d(0px, 0px, 10px); -o-transform:translate3d(0px, 0px, 10px); -webkit-transform:translate3d(0px, 0px, 10px); transform:translate3d(0px, 0px, 10px)";
    a=a.style.cssText.match(/translate3d\(0px, 0px, 0px\)/g);this.browser={support3d:null!==a&&1===a.length,isTouch:"ontouchstart"in g||g.navigator.msMaxTouchPoints}},moveEvents:function(){if(!1!==this.options.mouseDrag||!1!==this.options.touchDrag)this.gestures(),this.disabledEvents()},eventTypes:function(){var a=["s","e","x"];this.ev_types={};!0===this.options.mouseDrag&&!0===this.options.touchDrag?a=["touchstart.owl mousedown.owl","touchmove.owl mousemove.owl","touchend.owl touchcancel.owl mouseup.owl"]:
    !1===this.options.mouseDrag&&!0===this.options.touchDrag?a=["touchstart.owl","touchmove.owl","touchend.owl touchcancel.owl"]:!0===this.options.mouseDrag&&!1===this.options.touchDrag&&(a=["mousedown.owl","mousemove.owl","mouseup.owl"]);this.ev_types.start=a[0];this.ev_types.move=a[1];this.ev_types.end=a[2]},disabledEvents:function(){this.$elem.on("dragstart.owl",function(a){a.preventDefault()});this.$elem.on("mousedown.disableTextSelect",function(a){return f(a.target).is("input, textarea, select, option")})},
    gestures:function(){function a(a){if(void 0!==a.touches)return{x:a.touches[0].pageX,y:a.touches[0].pageY};if(void 0===a.touches){if(void 0!==a.pageX)return{x:a.pageX,y:a.pageY};if(void 0===a.pageX)return{x:a.clientX,y:a.clientY}}}function b(a){"on"===a?(f(k).on(d.ev_types.move,e),f(k).on(d.ev_types.end,c)):"off"===a&&(f(k).off(d.ev_types.move),f(k).off(d.ev_types.end))}function e(b){b=b.originalEvent||b||g.event;d.newPosX=a(b).x-h.offsetX;d.newPosY=a(b).y-h.offsetY;d.newRelativeX=d.newPosX-h.relativePos;
    "function"===typeof d.options.startDragging&&!0!==h.dragging&&0!==d.newRelativeX&&(h.dragging=!0,d.options.startDragging.apply(d,[d.$elem]));(8<d.newRelativeX||-8>d.newRelativeX)&&!0===d.browser.isTouch&&(void 0!==b.preventDefault?b.preventDefault():b.returnValue=!1,h.sliding=!0);(10<d.newPosY||-10>d.newPosY)&&!1===h.sliding&&f(k).off("touchmove.owl");d.newPosX=Math.max(Math.min(d.newPosX,d.newRelativeX/5),d.maximumPixels+d.newRelativeX/5);!0===d.browser.support3d?d.transition3d(d.newPosX):d.css2move(d.newPosX)}
    function c(a){a=a.originalEvent||a||g.event;var c;a.target=a.target||a.srcElement;h.dragging=!1;!0!==d.browser.isTouch&&d.$owlWrapper.removeClass("grabbing");d.dragDirection=0>d.newRelativeX?d.owl.dragDirection="left":d.owl.dragDirection="right";0!==d.newRelativeX&&(c=d.getNewPosition(),d.goTo(c,!1,"drag"),h.targetElement===a.target&&!0!==d.browser.isTouch&&(f(a.target).on("click.disable",function(a){a.stopImmediatePropagation();a.stopPropagation();a.preventDefault();f(a.target).off("click.disable")}),
    a=f._data(a.target,"events").click,c=a.pop(),a.splice(0,0,c)));b("off")}var d=this,h={offsetX:0,offsetY:0,baseElWidth:0,relativePos:0,position:null,minSwipe:null,maxSwipe:null,sliding:null,dargging:null,targetElement:null};d.isCssFinish=!0;d.$elem.on(d.ev_types.start,".owl-wrapper",function(c){c=c.originalEvent||c||g.event;var e;if(3===c.which)return!1;if(!(d.itemsAmount<=d.options.items)){if(!1===d.isCssFinish&&!d.options.dragBeforeAnimFinish||!1===d.isCss3Finish&&!d.options.dragBeforeAnimFinish)return!1;
    !1!==d.options.autoPlay&&g.clearInterval(d.autoPlayInterval);!0===d.browser.isTouch||d.$owlWrapper.hasClass("grabbing")||d.$owlWrapper.addClass("grabbing");d.newPosX=0;d.newRelativeX=0;f(this).css(d.removeTransition());e=f(this).position();h.relativePos=e.left;h.offsetX=a(c).x-e.left;h.offsetY=a(c).y-e.top;b("on");h.sliding=!1;h.targetElement=c.target||c.srcElement}})},getNewPosition:function(){var a=this.closestItem();a>this.maximumItem?a=this.currentItem=this.maximumItem:0<=this.newPosX&&(this.currentItem=
    a=0);return a},closestItem:function(){var a=this,b=!0===a.options.scrollPerPage?a.pagesInArray:a.positionsInArray,e=a.newPosX,c=null;f.each(b,function(d,g){e-a.itemWidth/20>b[d+1]&&e-a.itemWidth/20<g&&"left"===a.moveDirection()?(c=g,a.currentItem=!0===a.options.scrollPerPage?f.inArray(c,a.positionsInArray):d):e+a.itemWidth/20<g&&e+a.itemWidth/20>(b[d+1]||b[d]-a.itemWidth)&&"right"===a.moveDirection()&&(!0===a.options.scrollPerPage?(c=b[d+1]||b[b.length-1],a.currentItem=f.inArray(c,a.positionsInArray)):
    (c=b[d+1],a.currentItem=d+1))});return a.currentItem},moveDirection:function(){var a;0>this.newRelativeX?(a="right",this.playDirection="next"):(a="left",this.playDirection="prev");return a},customEvents:function(){var a=this;a.$elem.on("owl.next",function(){a.next()});a.$elem.on("owl.prev",function(){a.prev()});a.$elem.on("owl.play",function(b,e){a.options.autoPlay=e;a.play();a.hoverStatus="play"});a.$elem.on("owl.stop",function(){a.stop();a.hoverStatus="stop"});a.$elem.on("owl.goTo",function(b,e){a.goTo(e)});
    a.$elem.on("owl.jumpTo",function(b,e){a.jumpTo(e)})},stopOnHover:function(){var a=this;!0===a.options.stopOnHover&&!0!==a.browser.isTouch&&!1!==a.options.autoPlay&&(a.$elem.on("mouseover",function(){a.stop()}),a.$elem.on("mouseout",function(){"stop"!==a.hoverStatus&&a.play()}))},lazyLoad:function(){var a,b,e,c,d;if(!1===this.options.lazyLoad)return!1;for(a=0;a<this.itemsAmount;a+=1)b=f(this.$owlItems[a]),"loaded"!==b.data("owl-loaded")&&(e=b.data("owl-item"),c=b.find(".lazyOwl"),"string"!==typeof c.data("src")?
    b.data("owl-loaded","loaded"):(void 0===b.data("owl-loaded")&&(c.hide(),b.addClass("loading").data("owl-loaded","checked")),(d=!0===this.options.lazyFollow?e>=this.currentItem:!0)&&e<this.currentItem+this.options.items&&c.length&&this.lazyPreload(b,c)))},lazyPreload:function(a,b){function e(){a.data("owl-loaded","loaded").removeClass("loading");b.removeAttr("data-src");"fade"===d.options.lazyEffect?b.fadeIn(400):b.show();"function"===typeof d.options.afterLazyLoad&&d.options.afterLazyLoad.apply(this,
    [d.$elem])}function c(){f+=1;d.completeImg(b.get(0))||!0===k?e():100>=f?g.setTimeout(c,100):e()}var d=this,f=0,k;"DIV"===b.prop("tagName")?(b.css("background-image","url("+b.data("src")+")"),k=!0):b[0].src=b.data("src");c()},autoHeight:function(){function a(){var a=f(e.$owlItems[e.currentItem]).height();e.wrapperOuter.css("height",a+"px");e.wrapperOuter.hasClass("autoHeight")||g.setTimeout(function(){e.wrapperOuter.addClass("autoHeight")},0)}function b(){d+=1;e.completeImg(c.get(0))?a():100>=d?g.setTimeout(b,
    100):e.wrapperOuter.css("height","")}var e=this,c=f(e.$owlItems[e.currentItem]).find("img"),d;void 0!==c.get(0)?(d=0,b()):a()},completeImg:function(a){return!a.complete||"undefined"!==typeof a.naturalWidth&&0===a.naturalWidth?!1:!0},onVisibleItems:function(){var a;!0===this.options.addClassActive&&this.$owlItems.removeClass("active");this.visibleItems=[];for(a=this.currentItem;a<this.currentItem+this.options.items;a+=1)this.visibleItems.push(a),!0===this.options.addClassActive&&f(this.$owlItems[a]).addClass("active");
    this.owl.visibleItems=this.visibleItems},transitionTypes:function(a){this.outClass="owl-"+a+"-out";this.inClass="owl-"+a+"-in"},singleItemTransition:function(){var a=this,b=a.outClass,e=a.inClass,c=a.$owlItems.eq(a.currentItem),d=a.$owlItems.eq(a.prevItem),f=Math.abs(a.positionsInArray[a.currentItem])+a.positionsInArray[a.prevItem],g=Math.abs(a.positionsInArray[a.currentItem])+a.itemWidth/2;a.isTransition=!0;a.$owlWrapper.addClass("owl-origin").css({"-webkit-transform-origin":g+"px","-moz-perspective-origin":g+
    "px","perspective-origin":g+"px"});d.css({position:"relative",left:f+"px"}).addClass(b).on("webkitAnimationEnd oAnimationEnd MSAnimationEnd animationend",function(){a.endPrev=!0;d.off("webkitAnimationEnd oAnimationEnd MSAnimationEnd animationend");a.clearTransStyle(d,b)});c.addClass(e).on("webkitAnimationEnd oAnimationEnd MSAnimationEnd animationend",function(){a.endCurrent=!0;c.off("webkitAnimationEnd oAnimationEnd MSAnimationEnd animationend");a.clearTransStyle(c,e)})},clearTransStyle:function(a,
    b){a.css({position:"",left:""}).removeClass(b);this.endPrev&&this.endCurrent&&(this.$owlWrapper.removeClass("owl-origin"),this.isTransition=this.endCurrent=this.endPrev=!1)},owlStatus:function(){this.owl={userOptions:this.userOptions,baseElement:this.$elem,userItems:this.$userItems,owlItems:this.$owlItems,currentItem:this.currentItem,prevItem:this.prevItem,visibleItems:this.visibleItems,isTouch:this.browser.isTouch,browser:this.browser,dragDirection:this.dragDirection}},clearEvents:function(){this.$elem.off(".owl owl mousedown.disableTextSelect");
    f(k).off(".owl owl");f(g).off("resize",this.resizer)},unWrap:function(){0!==this.$elem.children().length&&(this.$owlWrapper.unwrap(),this.$userItems.unwrap().unwrap(),this.owlControls&&this.owlControls.remove());this.clearEvents();this.$elem.attr("style",this.$elem.data("owl-originalStyles")||"").attr("class",this.$elem.data("owl-originalClasses"))},destroy:function(){this.stop();g.clearInterval(this.checkVisible);this.unWrap();this.$elem.removeData()},reinit:function(a){a=f.extend({},this.userOptions,
    a);this.unWrap();this.init(a,this.$elem)},addItem:function(a,b){var e;if(!a)return!1;if(0===this.$elem.children().length)return this.$elem.append(a),this.setVars(),!1;this.unWrap();e=void 0===b||-1===b?-1:b;e>=this.$userItems.length||-1===e?this.$userItems.eq(-1).after(a):this.$userItems.eq(e).before(a);this.setVars()},removeItem:function(a){if(0===this.$elem.children().length)return!1;a=void 0===a||-1===a?-1:a;this.unWrap();this.$userItems.eq(a).remove();this.setVars()}};f.fn.owlCarousel=function(a){return this.each(function(){if(!0===
    f(this).data("owl-init"))return!1;f(this).data("owl-init",!0);var b=Object.create(l);b.init(a,this);f.data(this,"owlCarousel",b)})};f.fn.owlCarousel.options={items:5,itemsCustom:!1,itemsDesktop:[1199,4],itemsDesktopSmall:[979,3],itemsTablet:[768,2],itemsTabletSmall:!1,itemsMobile:[479,1],singleItem:!1,itemsScaleUp:!1,slideSpeed:200,paginationSpeed:800,rewindSpeed:1E3,autoPlay:!1,stopOnHover:!1,navigation:!1,navigationText:["prev","next"],rewindNav:!0,scrollPerPage:!1,pagination:!0,paginationNumbers:!1,
    responsive:!0,responsiveRefreshRate:200,responsiveBaseWidth:g,baseClass:"owl-carousel",theme:"owl-theme",lazyLoad:!1,lazyFollow:!0,lazyEffect:"fade",autoHeight:!1,jsonPath:!1,jsonSuccess:!1,dragBeforeAnimFinish:!0,mouseDrag:!0,touchDrag:!0,addClassActive:!1,transitionStyle:!1,beforeUpdate:!1,afterUpdate:!1,beforeInit:!1,afterInit:!1,beforeMove:!1,afterMove:!1,afterAction:!1,startDragging:!1,afterLazyLoad:!1}})(jQuery,window,document);
          /*]]>*/
        </script>
    

    تستطيع تحميل السكريبت من خلال أداة التحميل في القائمة الجانبية.
  •  قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js التالي ..

  • 
    <script type='text/javascript'>
    //<![CDATA[
    //OwlCarousel jq libs
    (function(a) {
    "use strict";
    a(document).ready(function() {
    a('.owl-carousel').owlCarousel({
                      autoPlay: true,
                      stopOnHover:true, //mouse hover Stop
                      slideSpeed: 300,
                      navigation: true,
                      pagination: true,
                      items: 4,
                      loop:true,
                      itemsCustom: [
                          [0, 1],
                          [520, 2],
                          [992, 3],
                          [1200, 3],
                          [1400, 4]
                      ],
                      navigationText: ['<i class="catch fa fa-angle-right"></i>','<i class="catch fa fa-angle-left"></i>'],
    });
    })
    })(jQuery);
    //]]>
    </script> 

    الكود هو ترتيب المعلمات للميزة OwlCarousel.js أي من خلاله سنستطيع التحكم في خصائص العرض وطريقة التمرير بكل سهولة مع العلم أن هناك عدة إعدادات لايمكن حصرها نظرا للتحديثات الخاصة بالمكتبة يمكنك مراجعة ذلك من خلال زيارة الصفحة الرسمية للمكتبة OwlCarousel-js أما مانعرضه  يعتبر الإعدادات الإفتراضية للإصدار الذي سنعمل به والتي سنشرح خصائصه كالتالي ...
    التعديل على الكود
    الكود ('.owl-carousel') المحدد بهذا اللون معرف السكريبت من خلاله نتصل بوظيفة المكوّن الإضافي ..قم بالتركيز عليه لأننا نحتاجه في التطبيق العملي
    الكود autoPlay المحدد بهذا اللون يعمل على التحكم في تحرك السلايدر العلامة true تعني تشغيل والعلامة false تعني إيقاف
    الكود stopOnHover المحدد بهذا اللون يعمل على توقيف السلايدر عند مرور زر الفأرة العلامة true تعني تشغيل والعلامة false تعني إيقاف
    الكود slideSpeed المحدد بهذا اللون خاص بسرعة السلايدر في حالة التشغيل...القيمة 300 تعتبر جيدة وسلسة تستطيع الزيادة أو الإنقاص بما يناسبك
    الكود navigation المحدد بهذا اللون خاص بإظهار زر التمرير الأيمن والأيسر العلامة true تعني تشغيل والعلامة false تعني إيقاف
    الكود pagination المحدد بهذا اللون خاص بإظهار أزرار ترقيم الصفحات العلامة true تعني تشغيل والعلامة false تعني إيقاف
    الكود items المحدد بهذا اللون خاص بعدد العناصر المراد إظهارها في حالة العرض العادي للشاشة الكبيرة 4 تعني أربع مواضيع تستطيع الزيادة أو الإنقاص بشرط تعديل نفس الرقم الموجود في itemsCustom الخاص بالشاشات الأخرى.
    الكود loop المحدد بهذا اللون خاص بعقدة التمرير العلامة true تعني تشغيل والعلامة false تعني إيقاف
    الكود itemsCustom المحدد بهذا اللون خاص بالتجاوب أي عدد العناصر أو المواضيع المراد عرضها في كل شاشة جهاز على سبيل المثال القيمة 1400 تعني أبعاد الشاشة أي من جهاز laptop وصولا إلى شاشات سطح المكتب (عدد المواضيع التي يتم عرضها في هذا الإطار هي 4) نفس الفكرة بالنسبة لبقية الإعدادات.
    الكود navigationText المحدد بهذا اللون يحمل أيقونات زر التمرير الأيمن والأيسر الذي سبق شرحه

تطبيق عملي بسيط بإستخدام مكتبة OwlCarousel.js

بعد الإنتهاء من تثبيت المكتبة OwlCarousel.js في القالب لن تلاحظ أي إختلاف قد وقع إلا إذا قمنا بتغليف العناصر الخاصة بنا (img ، a ، span ، li ، div ، ) مع عنصر حاوية (div ، ul ). وذلك بالإتصال بوظيفة المكوّن الإضافي عبر المعرف  owl-carousel لتطبيق الأنماط المناسبة على سبيل المثال:

<ul class='owl-carousel'>
  <li> تدوينة رقم 1 </li>
  <li> تدوينة رقم 2 </li>
  <li> تدوينة رقم 3 </li>
  <li> تدوينة رقم 4 </li>
  <li> تدوينة رقم 5 </li>
</ul>





شرح الكود
معرف المكوّن owl-carousel المحدد بهذا اللون يقوم بإستدعاء سكريبت مكتبة OwlCarousel.js وكذلك أنماط Css التي سبق وأضفناها

الفكرة بسيطة ...لاحظ أنه كلما أضفنا  المعرف'owl-carousel' لأي حاوية أداة أو إضافة سيتم تشغيل عليها سكريبت OwlCarousel.js والجميل في الأمر أن السكريبت يعمل مع أكثر من أداة في نفس الوقت .

تشغيل كود ترتيب المعلمات للمكتبة OwlCarousel أكثر من مرة

المقصود هنا تكرار كود ترتيب المعلمات حتى نحصل على طريقة عرض مختلفة لكل أداة أو إضافة على سبيل المثال نريد عرض سلايدر رئيسي يظهر فقط تدوينة واحدة عند التمرير بينما سلايدر للتسمية [الأقسام] يعرض مثلا أربع تدوينات في بداية التمرير ..وناهيك عن الخصائص التى يمكن التفريق بينها في كل سلايدر ..أظن الفكرة واضحة لتطبيق ذلك إتبع الآتي..
  • نفس الكود المعلمات الذي أضفناه سابقا سنقوم بإستبداله بالكود التالي ..

  • 
    //OwlCarousel jq libs
    (function(a) {
    "use strict";
    a(document).ready(function() {
    a('.owl-01.owl-carousel').owlCarousel({
                      autoPlay: true,
                      stopOnHover:true, //mouse hover Stop
                      slideSpeed: 300,
                      navigation: true,
                      pagination: false,
                      items: 1,
                      loop:true,
                      itemsCustom: [
                          [0, 1],
                          [520, 1],
                          [992, 1],
                          [1200, 1],
                          [1400, 1]
                      ],
                      navigationText: ['<i class="fa fa-angle-right"></i>','<i class="fa fa-angle-left"></i>'],
    });
    a('.owl-02.owl-carousel').owlCarousel({
                      autoPlay: true,
                      stopOnHover:true, //mouse hover Stop
                      slideSpeed: 300,
                      navigation: true,
                      pagination: false,
                      items: 4,
                      loop:true,
                      itemsCustom: [
                          [0, 1],
                          [520, 2],
                          [992, 3],
                          [1200, 3],
                          [1400, 4]
                      ],
                      navigationText: ['<i class="fa fa-angle-right"></i>','<i class="fa fa-angle-left"></i>'],
    });
    })
    })(jQuery); 
    

    ملاحظة مهمة
    لاحظ أنه نفس الكود إلا أنه مكرر مرتين الجزء المحدد باللون هو الذي أضفناه الفرق بينهما في الكلاس الجديد owl-01 و owl-02 اللذان هما بجانب معرف المكوّن الرئيسى owl-carousel في الجزء الأول والثاني وكذلك لو دققت النظر ستلاحظ إختلافات متباينة في المعلمات لاحظ جيدا وركز معي في الإختلافات التي سنشرحها كالتالي ..
    شرح الكود
    الكلاس owl-01 في الجزء الأول المحدد بهذا اللون خاص بالإضافة مثلا السلايدر رئيسي سيعرض تدوينة واحدة بالنظر للعلامات items و itemsCustom الخاصة بعرض عدد المواضيع
    الكلاس owl-02 في الجزء الثاني المحدد بهذا اللون خاص بالإضافة الثانية مثلا سلايدر حسب التسمية يعرض أربع تدوينات بالنظر كذلك للعلامات

    بهذا التنسيق لكود ترتيب المعلمات للمكتبة OwlCarousel سيسهل عليك تخصيص الإضافتين أو أكثر بدون تعارض بينهما ويبقى السؤال المهم لماذا تركنا معرف المكوّن الرئيسى owl-carousel بجانب الكلاس الجديد إذا لم نعد بحاجة إليه كمعرف رئيسي؟! ببساطة تركناه حتى لانفقد أنماط Css أي الستايل الخاصة بالمكتبة..أي عند حقن المعرف في عنصر حاوية (div ، ul ) سيكون الكود  بهذا الشكل..
    الكلاس owl-01 في عنصر حاوية ul
    
    <ul class='owl-01 owl-carousel'>
      <li> تدوينة رقم 1 </li>
      <li> تدوينة رقم 2 </li>
      <li> تدوينة رقم 3 </li>
      <li> تدوينة رقم 4 </li>
      <li> تدوينة رقم 5 </li>
    </ul>
    

    الكلاس owl-02 في عنصر حاوية div
    
    <div class='owl-02 owl-carousel'>
      <div> تدوينة رقم 1 </div>
      <div> تدوينة رقم 2 </div>
      <div> تدوينة رقم 3 </div>
      <div> تدوينة رقم 4 </div>
      <div> تدوينة رقم 5 </div>
    </div>
    







ملحق هام
إلى هنا كانت هذه أهم الخطوات الأساسية عليك بمراجعة ماشرحناه بتأني وتركيز حتى تفهم كل جزئية وحتى لاتواجه صعوبة في التعامل مع التطبيقات العملية التي سنشرحها مستقبلا..وستكون التدوينة القادمة إن شاء الله تركيب سلايدر شو تلقائي بإستخدام مكتبة OwlCarousel.js  ...إذا فهمت البرنامج التعليمي تستطيع الإنتقال إلى التدوينة الدرس الثاني // تركيب سلايدر شو تلقائي featured-slider بإستخدام مكتبة OwlCarousel-js.


add_commentإرسال تعليق

  1. السلام عليكم اخى لو انا عند عنصر اسمو #more-info id واحد بس وعايز اطبق علية 2 ستايل مثلا
    opacity:0 ,
    visibility:hidden,
    كيف يكون شكل الكود وشكرا

    ردحذف
  2. فى الجافا سكريبت

    ردحذف