Forum gratuit: forum de suport al utilizatorilor
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.

Cum puteti creea un slider elegant (tip acordeon)

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Cum puteti creea un slider elegant (tip acordeon)

Mesaj 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) Cap110

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!
Sageată 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-jum10PA Cum puteti creea un slider elegant (tip acordeon) Go-previous-rtl Module Cum puteti creea un slider elegant (tip acordeon) Go-previous-rtl HTML & Javascript Cum puteti creea un slider elegant (tip acordeon) Go-previous-rtl Gestiunea codurilor Javascript
Click pe "Creaţi un nou cod Javascript"


  • Prima pagină:

    Sageată Alegeţi un titlu

    Sageată Alegeţi poziţia: Indexul forumului

    Sageată 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ă:

    Sageată Alegeţi un titlu

    Sageată Alegeţi poziţia: Indexul forumului

    Sageată 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


Cum puteti creea un slider elegant (tip acordeon) Go-jum10Mergeţi în Cum puteti creea un slider elegant (tip acordeon) Go-previous-rtlPA Cum puteti creea un slider elegant (tip acordeon) Go-previous-rtl Afişare Cum puteti creea un slider elegant (tip acordeon) Go-previous-rtl Pagina de start Cum puteti creea un slider elegant (tip acordeon) Go-previous-rtl Generalităţi Cum puteti creea un slider elegant (tip acordeon) Go-previous-rtl 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! A face cu ochiul

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

Cum puteti creea un slider elegant (tip acordeon) Go-jum10Mergeţ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! Da

Keir

Keir
Membru onorific
Membru onorific

Mesaje : 6632
Varsta : 25
Localizare : Buzau
Data înscrierii : 28/12/2011
Mulțumiri : 68
Internet Explorer phpBB3

http://neotalk.wikiforum.ro/
Keir a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus


Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum