Tabsv.1.0.3

Default

Por defecto los tabs estan alineados a la izquierda, para centrarlo usar la clase center de esta manera class="tabs center"

Item 1

Item 2

Item 3


  <ul data-tabs class="tabs center">
    <li><a data-tab href="#item1" class="active">Item 1</a></li>
    <li><a data-tab href="#item2">Item 2</a></li>
    <li><a data-tab href="#item3">Item 3</a></li>
  </ul>

  <div data-tabs-content>
    <div data-tabs-pane class="tabs-content active" id="item1">
      <p>Item 1</p>
    </div>
    <div data-tabs-pane class="tabs-content" id="item2">
      <p>Item 2</p>
    </div>
    <div data-tabs-pane class="tabs-content" id="item3">
      <p>Item 3</p>
    </div>
  </div>

Icons

Para agregarle iconos, usar la clase icons de esta manera: class="tabs icons", el tab con iconos es especial para dispositivos móviles o tablet.

Item 1

Item 2

Item 3


  <ul data-tabs class="tabs icons">
    <li><a data-tab href="#item1_2" class="active"><i class="icon-class"></i>Item 1</a></li>
    <li><a data-tab href="#item2_2"><i class="icon-class"></i>Item 2</a></li>
    <li><a data-tab href="#item3_2"><i class="icon-class"></i>Item 3</a></li>
  </ul>

  <div data-tabs-content>
    <div data-tabs-pane class="tabs-content active" id="item1_2">
      <p>Item 1</p>
    </div>
    <div data-tabs-pane class="tabs-content" id="item2_2">
      <p>Item 2</p>
    </div>
    <div data-tabs-pane class="tabs-content" id="item3_2">
      <p>Item 3</p>
    </div>
  </div>

Para iniciarlizar los tabs necesario la siguiente linea javascript.


  $( document ).ready(function() {

  tabby.init();

  });

Collapsev.1.0.3


  <ul class="collapse">
    <li>
      <div class="header"><i class="icon-class"></i>Title</div>
      <div class="content"><span>Text conent</span></div>
    </li>
    <li>
      <div class="header"><i class="icon-class"></i>Title</div>
      <div class="content"><span>Text conent</span></div>
    </li>
    <li>
      <div class="header"><i class="icon-class"></i>Title</div>
      <div class="content"><span>Text conent</span></div>
    </li>
  </ul>

Para iniciarlizarlo es necesario la siguiente linea javascript.


  $( document ).ready(function() {

      $('.collapse').collapse();

  });

Tooltipsv.1.0.3


  <button title="I'm a tooltip left" data-position="left" class="btn tooltip">
    Left
  </button>

  <button title="I'm a tooltip top" data-position="top" class="btn tooltip">
    Top
  </button>

  <button title="I'm a tooltip bottom" data-position="bottom" class="btn tooltip" >
    Bottom
  </button>

  <button title="I'm a tooltip right" data-position="right" class="btn tooltip">
    Right
  </button>

Para inicializar los Tooltip usar la siguiente linea de javascript:


  $( document ).ready(function() {

    new Tooltip('.tooltip');

  });

Parallax effectv.1.0.3

Por defecto min-height: 400px;

Via data-attributes

Para añadir fácilmente un efecto de parallax detrás de un elemento, añada data-parallax="scroll" al elemento que desea utilizar, y especifique una imagen con data-image-src="image.jpg"


  <div class="parallax" data-parallax="scroll" data-image-src="image.jpg"></div>

Via JavaScript

Para llamar al complemento de parallax manualmente, simplemente seleccione el elemento de destino con jQuery y haga lo siguiente:


  $( document ).ready(function() {

    $('.parallax').parallax({imageSrc: 'image.jpg'});

  });

Lo que hace parallax es crear un elemento de posición fija para cada imagen de parallax al inicio del cuerpo del documento. Este elemento de espejo se sentará detrás de los otros elementos y coincidirá con la posición y las dimensiones de su objeto de destino.

Modalv.1.0.2


  <!-- Open modal -->
  <button type="button" class="btn blue" id="open">Open Modal</button>
  <!-- End open modal -->

  <div class="modal" id="modal1">
    <div class="header">
      <span>Titulo del modal</span>
    </div>
    <div class="body">
      <p>Este es el body del modal</p>
    </div>
    <div class="footer">
      <button class="btn" type="button">Accion</button>
    </div>
  </div>

  $( document ).ready(function() {

      // Initialize modal
      $("#modal1").easyModal();

      // Open modal
      $('#open').click(function(e){
      	$('#modal1').trigger('openModal');
      	e.preventDefault();
      });

  });

  // Close option
  $(selector).trigger('closeModal');

Options


  $( document ).ready(function() {

  	$(selector).easyModal({
  		overlayClose: false,
  		onOpen: function(myModal){
  			alert('Open');
  		}
  	 });

  });

  $( document ).ready(function() {

  	$(selector).easyModal({
  		overlay : 0.4,
  		onClose: function(myModal){
  			alert('Open');
  		}
  	 });

  });

Side barv.1.0.1

Pincha en el boton para ver el ejemplo del sideBar

Es necesario colocar class="toggle-sidebar" al boton o el link que iniciará el sideBar


  <!-- Toggle sidebar -->
    <a class="btn icon toggle-sidebar"><i class="icon-menu"></i></a>
  <!-- End toggle sidebar -->

  <div class="side_bar">
    <ul>
      <li>
        <div class="userBox">
          <a href="#!">
          <img src="image.jpg" alt="">
          </a>
          <span>User name</span>
          <span>email@email.com</span>
        </div>
      </li>
      <li><a class="active" href="#!">Link</a></li>
      <li><a href="#!">Link</a></li>
      <li><a href="#!">Link</a></li>
      <li>
        <div class="divider"></div>
      </li>

      <!-- Collapse sideBar -->
      <ul class="collapse">
        <li>
          <div class="header"><i class="icon-arrow_drop_down right"></i>Collapse sideBar</div>
          <div class="content"><span>Text conent</span></div>
        </li>
      </ul>
      <!-- End collapse sideBar -->

      <li><a href="#!">About</a></li>
      <li><a href="#!">Contact</a></li>
      <li><a class="subheader">Icons</a></li>
      <li><a href="#!"><i class="icon-class"></i>Icon</a></li>

      <!-- Icons right -->
      <li><a href="#!"><i class="icon-class right"></i>Icon</a></li>
    </ul>
  </div>

  $( document ).ready(function() {

      $( ".side_bar" ).Sidebar( {
          selectors: {
              trigger: ".toggle-sidebar"
          }
      });

      // Initialize collapse on the sidebar
      $('.collapse').collapse();

  });

Jquery Asynchronous Image Loader (JAIL)

Jail es un plugin de jQuery para la cargar de imagenes asincronas, esto hace la carga inicial de la página mas rápida.

Las imágenes se descargan cuando son visibles o cuando se hacen visibles dentro de la ventana (área que se ve en su navegador). Las imágenes pueden ser cargados después de un evento se activa (tales como click, mouseover, y scroll) o después de un retardo especificado. Es recomendable llamar la jail() después de que el DOM se ha construido (document ready).

Getting Started

En primer lugar, este plugin se requiere hacer algunos cambios HTML. El atributo data-src (atributo de datos HTML5) debe contener la ubicación de la imagen, en lugar del atributo src debe contener un marcador de posición como una pequeña imagen (por ejemplo, de 1x1 píxeles). Además, sugeriría añadir un bloque noscript de manera que en caso de que el usuario no tiene habilitado JavaScript, las imágenes se mostrarán (mejora progresiva).

En la carpeta raíz de Fresh CSS se encuentra la imagen (1x1 píxeles) para el artributo data-src con el nombre de blank.gif


  <img class="lazy" src="blank.gif" data-src="image.jpg"/>
  <noscript>
  	<img src="image.jpg"/>
  </noscript>

En un escenario básico, sólo tiene que llamar a la funcion jail() en las imagenes que desea cargar asincronamente.


  $( document ).ready(function() {

  	$('img.lazy').jail();

  });

Las imágenes en el viewport se cargan inmediatamente después de que el DOM está listo. Las otras imagenes se hacen visibles después que el usuario se desplaza hacia abajo).

Se pueden agregar opciones de configuración adicionales, para consultarlas lea la documentación oficial de Jail.js en github

Owl.Carousel

Los carruseles son útiles para mostrar productos o imagenes en una web, entre otros usos. En Fresh CSS se integró la libreria de codigo abierto Owl Carousel 2

En los siguientes ejemplos se demuestra su uso, para mas opciones consultar la documentación oficial en el link anterior.

Basic


  <div class="owl-carousel owl-theme" id="basic">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    ...
  </div>

  $( document ).ready(function() {

    $('#basic').owlCarousel({
        loop:true,
        margin:10,
        merge:true,
        items:5,
        responsive:{
          678:{
              mergeFit:true
          },
          1000:{
              mergeFit:false
          }
        }
    });

  });

lazyLoad

El uso del lazyLoad en el carousel es útil para cargar las imagenes asincronamente, una gran ventaja si no se quiere perjudicar la carga incial del sitio.


  <div class="owl-carousel owl-theme" id="lazyLoad">
    <img class="owl-lazy" data-src="https://placehold.it/350x300&text=1" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x300&text=2" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x300&text=3" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x300&text=4" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x300&text=5" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x300&text=6" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x300&text=7" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x300&text=8" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x300&text=9" alt="">
    ...
  </div>

  $( document ).ready(function() {

    $('#lazyLoad').owlCarousel({
      items:4,
      lazyLoad:true,
      loop:true,
      margin:10,
      responsive:{
        0:{
            items:2
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
      }
    });

  });

Slider


  <div class="owl-carousel owl-theme" id="slider">
    <img class="owl-lazy" data-src="http://lorempixel.com/1000/200/food/1" alt="">
    <img class="owl-lazy" data-src="http://lorempixel.com/1000/200/food/2" alt="">
    <img class="owl-lazy" data-src="http://lorempixel.com/1000/200/food/3" alt="">
    <img class="owl-lazy" data-src="http://lorempixel.com/1000/200/food/4" alt="">
  </div>

  $( document ).ready(function() {

    $('#slider').owlCarousel({
      items:1,
      lazyLoad:true,
      dots:true,
      autoplay:true,
      autoplayHoverPause:true,
      loop:true
    });

  });