Yetkinforum Ilanları N°5 : Akordeon şekli ana sayfa

[Paradiz]

YetkinForum Akordeon şekli ana sayfa Bu paylaşım sayesinde akordeon şekli ana sayfa ekleyebiliceksiniz (ve modeller açık olmadan ekleyebilirsiniz !). Tüm versyonlar için geçeleridir 1. Javascript eklemek Ilk önce Javascriptleri açmamız gereklidir : Enable Javascript code management : EVET. Panneau d'Administration Mödüller HTML & Javascript Javascript codes management Yapmanız gerekenler : - Başlık : Ana sayfa - Placement : In the home page - Ve bu kodu ekleyin : Kod: $(document).ready(function() {   $("#accordeon-pa").each(function(){     $(this).liteAccordion({       autoPlay:true,       pauseOnHover:true,       rounded:true,       enumerateSlides:true,       containerWidth: 960,       containerHeight: 320     })   }); }); /*************************************************! * *  project:    liteAccordion - a horizontal accordion plugin for jQuery *  author:    Nicola Hibbert *  url:        http://nicolahibbert.com/liteaccordion-v2/ *  demo:      http://www.nicolahibbert.com/demo/liteAccordion/ * *  Version:    2.0.2 *  Copyright:  (c) 2010-2011 Nicola Hibbert *  Licence:    MIT * **************************************************/ (function(b){var a=function(g,l){var i={headerWidth:48,activateOn:"click",firstSlide:1,slideSpeed:800,onTriggerSlide:function(){},onSlideAnimComplete:function(){},autoPlay:false,pauseOnHover:false,cycleSpeed:6000,easing:"swing",theme:"basic",rounded:false,enumerateSlides:false,linkable:false},h=b.extend({},i,l),c=g.children("ol").children("li"),j=c.children(":first-child"),k=c.length,f=h.containerWidth-k*h.headerWidth,e={play:function(m){var n=d.nextSlide(m&&m);if(d.playing){return}d.playing=setInterval(function(){j.eq(n()).trigger("click.liteAccordion")},h.cycleSpeed)},stop:function(){clearInterval(d.playing);d.playing=0},next:function(){e.stop();j.eq(d.currentSlide===k-1?0:d.currentSlide+1).trigger("click.liteAccordion")},prev:function(){e.stop();j.eq(d.currentSlide-1).trigger("click.liteAccordion")},destroy:function(){e.stop();b(window).unbind(".liteAccordion");g.attr("style","").removeClass("accordion basic dark light stitch").removeData("liteAccordion").unbind(".liteAccordion").find("li > :first-child").unbind(".liteAccordion").filter(".selected").removeClass("selected").end().find("b").remove();c.removeClass("slide").children().attr("style","")},debug:function(){return{elem:g,defaults:i,settings:h,methods:e,core:d}}},d={setStyles:function(){g.width(h.containerWidth).height(h.containerHeight).addClass("accordion").addClass(h.rounded&&"rounded").addClass(h.theme);c.addClass("slide").children(":first-child").width(h.containerHeight).height(h.headerWidth).eq(h.firstSlide-1).addClass("selected");j.each(function(m){var p=b(this),o=m*h.headerWidth,n=j.first().next(),q=parseInt(n.css("marginLeft"),10)||parseInt(n.css("marginRight"),10)||0;if(m>=h.firstSlide){o+=f}p.css("left",o).next().width(f-q).css({left:o,paddingLeft:h.headerWidth});h.enumerateSlides&&p.append("<b>"+(m+1)+"</b>")})},bindEvents:function(){if(h.activateOn==="click"){j.bind("click.liteAccordion",d.triggerSlide)}else{if(h.activateOn==="mouseover"){j.bind({"mouseover.liteAccordion":d.triggerSlide,"click.liteAccordion":d.triggerSlide})}}if(h.pauseOnHover&&h.autoPlay){g.bind("mouseover.liteAccordion",function(){d.playing&&e.stop()}).bind("mouseout.liteAccordion",function(){!d.playing&&e.play(d.currentSlide)})}},linkable:function(){var m=(function(){var o=[];c.each(function(){if(b(this).attr("name")){o.push((b(this).attr("name")).toLowerCase())}});return m=o})();var n=function(p){var o;if(p.type==="load"&&!window.location.hash){return}if(p.type==="hashchange"&&d.playing){return}o=b.inArray((window.location.hash.slice(1)).toLowerCase(),m);if(o>-1&&o<m.length){j.eq(o).trigger("click.liteAccordion")}};b(window).bind({"hashchange.liteAccordion":n,"load.liteAccordion":n})},currentSlide:h.firstSlide-1,nextSlide:function(m){var n=m+1||d.currentSlide+1;return function(){return n++%k}},playing:0,animSlideGroup:function(m,o,n){var p=n?":lt("+(m+1)+")":":gt("+m+")";c.filter(p).each(function(){var r=b(this),q=c.index(r);r.children().stop(true).animate({left:(n?0:f)+q*h.headerWidth},h.slideSpeed,h.easing,function(){if(!d.slideAnimCompleteFlag){h.onSlideAnimComplete.call(o);d.slideAnimCompleteFlag=true}})})},slideAnimCompleteFlag:false,triggerSlide:function(p){var o=b(this),m=j.index(o),n=o.next();d.currentSlide=m;d.slideAnimCompleteFlag=false;j.removeClass("selected").filter(o).addClass("selected");if(p.originalEvent&&h.autoPlay){e.stop();e.play(m)}if(h.linkable&&!d.playing){window.location.hash=o.parent().attr("name")}h.onTriggerSlide.call(n);d.animSlideGroup(m,n,true);d.animSlideGroup(m,n)},ieClass:function(){var m=+(b.browser.version).charAt(0);if(m<7){e.destroy()}if(m===7||m===8){c.each(function(n){b(this).addClass("slide-"+n)})}g.addClass("ie ie"+m)},init:function(){if(b.browser.msie){d.ieClass()}d.setStyles();d.bindEvents();if(h.cycleSpeed<h.slideSpeed){h.cycleSpeed=h.slideSpeed}if(h.linkable&&"onhashchange" in window){d.linkable()}h.autoPlay&&e.play()}};d.init();return e};b.fn.liteAccordion=function(e){var d=this,c=d.data("liteAccordion");if(typeof e==="object"||!e){return d.each(function(){var f;if(c){return}f=new a(d,e);d.data("liteAccordion",f)})}else{if(typeof e==="string"&&c[e]){if(e==="debug"){return c[e].call(d)}else{c[e].call(d);return d}}}}})(jQuery); • "containerWidth: 960" : anasayfa genişligi • "containerHeight: 320" : anasayfa yüksekligi Ve gönderin. 2. HTML kodu Yönetim paneli Afiş asmak Anasayfa Genel bilgiler Anasayfa mesajı Eklemeniz gereken kod : Kod: <div id="accordeon-pa" class="accordion">     <ol>         <li>             <h2><span>Slide 1</span></h2>             <div>               <figure>                 <img class="full" src="http://i.imgur.com/SHaqP.jpg" alt="image" />               </figure>             </div>         </li>         <li>             <h2><span>Slide 2</span></h2>             <div>               <figure>                 <img class="full" src="http://i.imgur.com/v5LuU.jpg" alt="image" />               </figure>             </div>         </li>         <li>             <h2><span>Slide 3</span></h2>             <div>               <figure>                 <img class="full" src="http://i.imgur.com/VdDge.jpg" alt="image" />               </figure>             </div>         </li>         <li>             <h2><span>Slide 4</span></h2>             <div>               <figure>                 <img class="full" src="http://i.imgur.com/EwuD0.jpg" alt="image" />               </figure>             </div>         </li>         <li>             <h2><span>Slide 5</span></h2>             <div>               <figure>                 <img class="full" src="http://i.imgur.com/Wl1P6.jpg" alt="image" />               </figure>             </div>         </li>     </ol> </div> Degistirmeniz gereken yerler : • "Slide #" : basliklar • resimi degistirmek için : <img class="full" src="https://i.imgur.com/{...}.jpg" alt="image" /> bu kodu degistirmelisiniz. 3. CSS kodu Yönetim paneli Afiş asmak Resimler ve renkler Renkler CSS Stylesheet 3 Model : « Normal » : Kod: @charset 'utf-8'; /*************************************************! * *  project:    liteAccordion - a horizontal accordion plugin for jQuery *  author:    Nicola Hibbert *  url:        http://nicolahibbert.com/liteaccordion-v2/ *  demo:      http://www.nicolahibbert.com/demo/liteAccordion/ * *  Version:    2.0.2 *  Copyright:  (c) 2010-2011 Nicola Hibbert *  Licence:    MIT * **************************************************/ /****************************************** Core */ .accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif } .accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none } .accordion .slide > h2 {   color: black;     font-size: 16px;    font-weight: normal;   margin: 0;   z-index: 100;   position: absolute;   top: 0;   left: 0;   -webkit-transform: translateX(-100%) rotate(-90deg);   -webkit-transform-origin: right top;   -moz-transform: translateX(-100%) rotate(-90deg);   -moz-transform-origin: right top;   -o-transform: translateX(-100%) rotate(-90deg);   -o-transform-origin: right top;   transform: translateX(-100%) rotate(-90deg);   transform-origin: right top;   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .accordion .slide > h2 span {     display: block;     padding-right: 8%;     text-align: right;     height: 90%;     margin-top: 5px;     -moz-user-select: none;     -khtml-user-select: none;     user-select: none; } .accordion .slide > h2 b {     display: inline-block;     position: absolute;     top: 13%;     left: 10%;     text-align: center;     -webkit-transform: rotate(90deg);     -moz-transform: rotate(90deg);     -o-transform: rotate(90deg);     transform: rotate(90deg);   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } .accordion .slide > h2:hover { cursor: pointer } .accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }   /****************************************** Basic */ .accordion .slide > h2 { background: #333; color: white; line-height: 225% }   /*************************************** Rounded */ .rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px } .rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }   /******************************************** IE */ .ie .slide > h2 b { top: 42%; left: 5% } .ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }   /******************************************** FA */ .accordion figure .full { width: 100%; height: 100%; } .accordion h2 { border: none; } /* centrer l'accordéon */ .accordion { margin: auto; } « Siyah » : Kod: @charset 'utf-8'; /*************************************************! * *  project:    liteAccordion - a horizontal accordion plugin for jQuery *  author:    Nicola Hibbert *  url:        http://nicolahibbert.com/liteaccordion-v2/ *  demo:      http://www.nicolahibbert.com/demo/liteAccordion/ * *  Version:    2.0.2 *  Copyright:  (c) 2010-2011 Nicola Hibbert *  Licence:    MIT * **************************************************/ /****************************************** Core */ .accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif } .accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none } .accordion .slide > h2 {   color: black;     font-size: 16px;      font-weight: normal;   margin: 0;   z-index: 100;   position: absolute;   top: 0;   left: 0;   -webkit-transform: translateX(-100%) rotate(-90deg);   -webkit-transform-origin: right top;   -moz-transform: translateX(-100%) rotate(-90deg);   -moz-transform-origin: right top;   -o-transform: translateX(-100%) rotate(-90deg);   -o-transform-origin: right top;   transform: translateX(-100%) rotate(-90deg);   transform-origin: right top;   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .accordion .slide > h2 span {     display: block;     padding-right: 8%;     text-align: right;     height: 90%;     margin-top: 5px;     -moz-user-select: none;     -khtml-user-select: none;     user-select: none; } .accordion .slide > h2 b {     display: inline-block;     position: absolute;     top: 13%;     left: 10%;     text-align: center;     -webkit-transform: rotate(90deg);     -moz-transform: rotate(90deg);     -o-transform: rotate(90deg);     transform: rotate(90deg);   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } .accordion .slide > h2:hover { cursor: pointer } .accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white } .accordion noscript p { padding: 10px; margin: 0; background: white } /****************************************** Dark */ .accordion {     border: 9px solid #353535;     border-bottom-width: 8px;     padding: 5px 5px 6px 0;     background: #030303;     -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);     -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);     -ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);     -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);   box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); } .accordion .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% } .accordion .slide > h2 span { background: #353535; color: white } .accordion .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b } .accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {     background: #353535;     background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);     background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));     background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);     background: -o-linear-gradient(left,  #353535 0%,#555555 100%);     background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);     background: linear-gradient(left,  #353535 0%,#555555 100%);     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 ); } .accordion .slide > h2.selected b {     background: #383838;     background: -moz-linear-gradient(top,  #3a3a3a 0%, #363636 100%);     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));     background: -webkit-linear-gradient(top,  #3a3a3a 0%,#363636 100%);     background: -o-linear-gradient(top,  #3a3a3a 0%,#363636 100%);     background: -ms-linear-gradient(top,  #3a3a3a 0%,#363636 100%);     background: linear-gradient(top,  #3a3a3a 0%,#363636 100%); } .accordion .slide > div { background: #030303; margin-left: 5px } /*************************************** Rounded */ .rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px } .rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px } /******************************************** IE */ .ie .slide > h2 b { top: 42%; left: 5% } .ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top } .ie.accordion .slide > h2 b { top: 44% } .ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none } /******************************************** FA */ .accordion figure .full { width: 100%; height: 100%; } .accordion h2 { border: none; } /* centrer l'accordéon */ .accordion { margin: auto; } « Beyaz » : Kod: @charset 'utf-8'; /*************************************************! * *  project:    liteAccordion - a horizontal accordion plugin for jQuery *  author:    Nicola Hibbert *  url:        http://nicolahibbert.com/liteaccordion-v2/ *  demo:      http://www.nicolahibbert.com/demo/liteAccordion/ * *  Version:    2.0.2 *  Copyright:  (c) 2010-2011 Nicola Hibbert *  Licence:    MIT * **************************************************/ /****************************************** Core */ .accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif } .accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none } .accordion .slide > h2 {   color: black;     font-size: 16px;    font-weight: normal;   margin: 0;   z-index: 100;   position: absolute;   top: 0;   left: 0;   -webkit-transform: translateX(-100%) rotate(-90deg);   -webkit-transform-origin: right top;   -moz-transform: translateX(-100%) rotate(-90deg);   -moz-transform-origin: right top;   -o-transform: translateX(-100%) rotate(-90deg);   -o-transform-origin: right top;   transform: translateX(-100%) rotate(-90deg);   transform-origin: right top;   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .accordion .slide > h2 span {     display: block;     padding-right: 8%;     text-align: right;     height: 90%;     margin-top: 5px;     -moz-user-select: none;     -khtml-user-select: none;     user-select: none; } .accordion .slide > h2 b {     display: inline-block;     position: absolute;     top: 13%;     left: 10%;     text-align: center;     -webkit-transform: rotate(90deg);     -moz-transform: rotate(90deg);     -o-transform: rotate(90deg);     transform: rotate(90deg);   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } .accordion .slide > h2:hover { cursor: pointer } .accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white } .accordion noscript p { padding: 10px; margin: 0; background: white }   /***************************************** Light */ .accordion {     border: 9px solid white;     border-bottom-width: 8px;     padding: 5px 5px 6px 0;     background: #a0a0a0;     -webkit-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);     -moz-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);     -ms-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);      -o-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);   box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4); } .accordion .slide > h2 { background: #a0a0a0; text-shadow: 0 -1px 0 white; line-height: 265% } .accordion .slide > h2 span {     background: #fcfcfc;     background: -moz-linear-gradient(left,  #fcfcfc 0%, #ededed 100%);     background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcfcfc), color-stop(100%,#ededed));     background: -webkit-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);     background: -o-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);     background: -ms-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);     background: linear-gradient(left,  #fcfcfc 0%,#ededed 100%);     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 );     -webkit-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;     -moz-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;     -o-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;   box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;     color: #909090; } .accordion .slide > h2 b { background: #ffffff; color: #909090; text-shadow: -1px 1px 0 white } .accordion .slide > h2.selected span, .accordion .slide h2.selected span:hover, .accordion .slide > h2.selected b { background: #ffffff } .accordion .slide > div { background: #a0a0a0; margin-left: 5px }   /*************************************** Rounded */ .rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px } .rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }   /******************************************** IE */ .ie .slide > h2 b { top: 42%; left: 5% } .ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top } .ie.accordion .slide > h2 b { top: 44% } .accordion .slide > h2 span { filter: none }   /******************************************** FA */ .accordion figure .full { width: 100%; height: 100%; } .accordion h2 { border: none; } /* centrer l'accordéon */ .accordion { margin: auto; } CSS kod ekleyip, tabloyu kişisellestirebilirsiniz Umarim bu paylaşım işinize yarayacaktır !

Bu paylaşım Celina tarafından hazırlanmış ve Paradiz tarafından tercüme adilip sunulmuştur. Paylaşımların başka sitelerde yayınlanması yasaktır. © 2011 Yetkinforum.net