Cum puteti creea un slider elegant (tip acordeon)

Scris de Keir Mar Mai 22, 2012 9:53 pm

Cum puteti creea un slider elegant?

1. Tutorial:

Cum puteţi creea un astfel de slider?

Cum puteti creea un slider elegant (tip acordeon) Capt210

Urmaţi paşii de mai jos şi ve-ţi realiza unul!

Notă: Sageată

Acest tutorial este disponibil pentru toate versiunile de forum!
Pentru ca tutorialul să dea roade, trebuie să îl urmaţi pas cu pas!

2. Primul pas: Creaţi 2 pagini javascript

Pentru a creea paginile javascript trebuie să intraţi în:

Cum puteti creea un slider elegant (tip acordeon) Go-jum10

PA Module HTML & Javascript Gestiunea codurilor Javascript
Click pe "Creaţi un nou cod Javascript"

Prima pagină:

Alegeţi un titlu

Alegeţi poziţia: Indexul forumului

Introduceţi acest cod în zona "Cod JavaScript * :"

Cod:: /************************************************* * * project: liteAccordion - horizontal accordion plugin for jQuery * author: Nicola Hibbert * url: http://nicolahibbert.com/horizontal-accordion-jquery-plugin * demo: http://www.nicolahibbert.com/demo/liteAccordion * * Version: 1.1.3 * Copyright: (c) 2010-2011 Nicola Hibbert * /*************************************************/ (function($) { $.fn.liteAccordion = function(options) { // defaults var defaults = { containerWidth : 960, containerHeight : 320, headerWidth : 48, firstSlide : 1, onActivate : function() {}, slideSpeed : 800, slideCallback : function() {}, autoPlay : false, pauseOnHover : false, cycleSpeed : 6000, theme : 'basic', // basic, light*, dark, stitch* rounded : false, enumerateSlides : false }, // merge defaults with options in new settings object settings = $.extend({}, defaults, options), // define key variables $accordion = this, $slides = $accordion.find('li'), slideLen = $slides.length, slideWidth = settings.containerWidth - (slideLen * settings.headerWidth), $header = $slides.children('h2'), // core utility and animation methods utils = { getGroup : function(pos, index) { if (this.offsetLeft === pos.left) { return $header.slice(index + 1, slideLen).filter(function() { return this.offsetLeft === $header.index(this) * settings.headerWidth }); } else if (this.offsetLeft === pos.right) { return $header.slice(0, index + 1).filter(function() { return this.offsetLeft === slideWidth + ($header.index(this) * settings.headerWidth) }); } }, nextSlide : function(slideIndex) { var slide = slideIndex + 1 || settings.firstSlide; // get index of next slide return function() { return slide++ % slideLen; } }, play : function(slideIndex) { var getNext = utils.nextSlide((slideIndex) ? slideIndex : ''), // create closure start = function() { $header.eq(getNext()).click(); }; utils.playing = setInterval(start, settings.cycleSpeed); }, pause : function() { clearInterval(utils.playing); }, playing : 0, sentinel : false }; // set container heights, widths, theme & corner style $accordion .height(settings.containerHeight) .width(settings.containerWidth) .addClass(settings.theme) .addClass(settings.rounded && 'rounded'); // set tab width, height and selected class $header .width(settings.containerHeight) .height(settings.headerWidth) .eq(settings.firstSlide - 1).addClass('selected'); // ie if ($.browser.msie) { if ($.browser.version.substr(0,1) > { $header.css('filter', 'none'); } else if ($.browser.version.substr(0,1) < 7) { return false; } } // set initial positions for each slide $header.each(function(index) { var $this = $(this), left = index * settings.headerWidth; if (index >= settings.firstSlide) left += slideWidth; $this .css('left', left) .next() .width(slideWidth) .css({ left : left, paddingLeft : settings.headerWidth }); // add number to bottom of tab settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>'); }); // bind event handler for activating slides $header.click(function(e) { var $this = $(this), index = $header.index($this), $next = $this.next(), pos = { left : index * settings.headerWidth, right : index * settings.headerWidth + slideWidth, newPos : 0 }, $group = utils.getGroup.call(this, pos, index); // set animation direction if (this.offsetLeft === pos.left) { pos.newPos = slideWidth; } else if (this.offsetLeft === pos.right) { pos.newPos = -slideWidth; } // check if animation in progress if (!$header.is(':animated')) { // activate onclick callback with slide div as context if (e.originalEvent) { if (utils.sentinel === this) return false; settings.onActivate.call($next); utils.sentinel = this; } else { settings.onActivate.call($next); utils.sentinel = false; } // remove, then add selected class $header.removeClass('selected').filter($this).addClass('selected'); // get group of tabs & animate $group .animate({ left : '+=' + pos.newPos }, settings.slideSpeed, function() { settings.slideCallback.call($next) }) .next() .animate({ left : '+=' + pos.newPos }, settings.slideSpeed); } }); // pause on hover if (settings.pauseOnHover) { $accordion.hover(function() { utils.pause(); }, function() { utils.play($header.index($header.filter('.selected'))); }); } // start autoplay, call utils with no args = start from firstSlide settings.autoPlay && utils.play(); return $accordion; }; })(jQuery);

Şi salvaţi pagina prin apăsarea butonului "Validează"!

A doua pagină:

Alegeţi un titlu

Alegeţi poziţia: Indexul forumului

Introduceţi acest cod în zona "Cod JavaScript * :"

Cod:: $(document).ready(function(){ $('#one').liteAccordion({ onActivate : function() { this.find('figcaption').fadeOut(); }, slideCallback : function() { this.find('figcaption').fadeIn(); }, autoPlay : true, pauseOnHover : true, theme : 'dark', rounded : true, enumerateSlides : true }).find('figcaption:first').show(); });

Şi salvaţi pagina prin apăsarea butonului "Validează"!
Atenţie! Nu uitaţi să activaţi codurile javascript prin bifarea butonului "Da" de la "Activeaza gestiunea codurilor JavaScript :" A face cu ochiul

3. Pasul 3: Introduceţi codul HTML în Generalităţi

Mergeţi în PA Afişare Pagina de start Generalităţi Mesaj pe pagina de start . Alegeţi ce titlul doriţi, iar în conţinutul mesajului adăugaţi următorul cod:

Cod:: <div id="one" class="accordion"> <ol> <li> <h2><span>Slide One</span></h2> <div id="s1"></div> </li> <li> <h2><span>Slide Two</span></h2> <div id="s2"></div> </li> <li> <h2><span>Slide Three</span></h2> <div id="s3"></div> </li> <li> <h2><span>Slide Four</span></h2> <div id="s4"></div> </li> <li> <h2><span>Slide Five</span></h2> <div id="s5"></div> </li> </ol> <noscript> <p>Please enable JavaScript to get the full experience.</p> </noscript> </div>

Dvs. puteţi schimba titlurile slider-ului şi de asemenea puteţi introduceţi câte div-uri doriţi!

4. Pasul 4: Adăugaţi codul CSS:

Mergeţi în PA - Afişare - Imagini şi culori - Culori - Foaie de stil CSS şi adăugaţi următorul cod la finalul foii:

Cod:: .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 li > h2 { color: black; font-weight: normal; margin: 0; z-index: 2; 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; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; } .accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%9; left: 10%; left: 5%9; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } .accordion li > h2:hover { cursor: pointer; } .accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; } .accordion noscript p { padding: 10px; margin: 0; background: white; } /****************************************** Basic */ .basic li > h2 { background: #333; color: white; line-height: 1.8em; } .basic li > div h3 { margin: 15px 10px; } .basic li > div p { margin: 10px; font-size: 14px; } /****************************************** Dark */ .dark { 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); -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); } .dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; } .dark li > h2 span { background: #353535; color: white; } .dark li > h2 b { background: #3535359; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; } .dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); } .dark h2.selected b { background: #4343439; } .dark li > div { background: #030303; margin-left: 5px; } /*************************************** Rounded */ .rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } /***************************************** Light */ /**************************************** Stitch */ #s1 { background:url("http://url de l'image.jpg") no-repeat #030303; } #s2 { background:url("http://url de l'image.jpg") no-repeat #030303; } #s3 { background:url("http://url de l'image.jpg") no-repeat #030303; } #s4 { background:url("http://url de l'image.jpg") no-repeat #030303; } #s5 { background:url("http://url de l'image.jpg") no-repeat #030303; }

Tot ce trebuie să faceţi dvs. este să puneţi link-ul imaginii în codurile de acest gen:

Cod:: #s1 { background:url("http://url de l'image.jpg") }

Puteţi adăuga câte coduri de acest gen doriţi!
De asemenea, puteţi schimba aspectul slider-ului folosind codul CSS!

Felicitări! Dacă aţi urmat paşii corect, acum aveţi propriul index personalizat!