beta 1.0
Test
Elenco siti recensiti Segnala un errore Informazioni BLOG
Condivi su FacebookCondivi su Facebook Share on Google+Condividi su Google+ Richiedi preventivo refactory del tuo sito.Richiedi preventivo refactory del tuo sito. Metti RoadToResponsive nel tuo sitoMetti RoadToResponsive nel tuo sito
Tutti gli articoli






-

Tutorials e script

Colorbox

Vi presentiamo un plugin jQuery leggero, veloce ed altamente configurabile: Colorbox.
Deriva dal più famoso Lightbox, estendendone il potenziale con più opzioni, metodi ed eventi.
Il plugin ben si adatta ad un'ottica responsive permettendo di visualizzare le singole immagini occupando la maggior parte dello spazio disponibile a prescindere dalla dimensione dello schermo.
Come al solito, partiamo dal sito ufficiale: Colorbox.
I preliminari sono sempre i soliti: scarichiamo il pacchetto .zip e scompattiamolo nella root del nostro progetto, poi non resta che linkare lo script jquery.colorbox.js e uno dei .css predefiniti scelti tra i cinque disponibili.
Il .css potrà poi essere modificato per adattarlo al vostro progetto come preferite, ma potete cominciare a testare il plugin con uno stile di quelli forniti.
L'HTML da cui partire è piuttosto lineare. Il metodo più semplice è iniziare da un elenco di immagini linkate. Per maggiore eleganza potete elencarlo in una lista <UL>:

<div id="my-list">
  <a title="titolo img 1" href="images/image1.jpg" rel="my-gallery">
    <img src="images/image1.jpg" alt="image1" />
  </a>
  <a title="titolo img 2" href="images/image2.jpg" rel="my-gallery">
    <img src="images/image2.jpg" alt="image2" />
  </a>
  <a title="titolo img 3" href="images/image3.jpg" rel="my-gallery">
    <img src="images/image3.jpg" alt="image3" />
  </a>
</div>

Ad ogni link abbiamo assegnato una proprietà

rel

per dire a Colorbox di raggruppare tutte le immagine all'interno della stessa finestra, rendendole navigabili con le frecce.
Ora non ci resta che invocare il plugin con un paio di opzioni base:

$(document).ready(function() {
  $('#my-list').colorbox({
    rel: 'my-gallery',
    maxWidth: '80%',
    maxHeight: '80%'
  });
});

Abbiamo raggruppato la funzione all'interno di un

$(document).ready()

per maggiore sicurezza.
Il risultato è visibile immediatamente cliccando un'immagine. Colorbox si aprirà occupando al massimo l'80% dello schermo e permettendovi di navigare tra le immagini.
Sul sito dello sviluppatore potete studiare l'elenco di opzioni, metodi ed eventi disponibili, ma questa breve guida dovrebbe bastarvi per cominciare.



  Condivi su Facebook Share on Google+      Tag:  JQuery  Manuale  Guida
Mený Responsive
Tutorials e script
28/11/2013

Mený Responsive

Plugin per un menù di navigazione Responsive senza dipendenze da librerie e studiata per il touch screen.



Tag:  Css  Mený
Mený JQuery Responsive
Tutorials e script
28/11/2013

Mený JQuery Responsive

FlexNav è un plugin di utilizzo di media query e JavaScript per creare un menu multi-livello con supporto per touch, hover, e l'input da tastiera. Particolare attenzione è rivolta al touch screen.



Tag:  JQuery  Javascript  Mený
Responsive nav / mený jQuery plugin
Tutorials e script
28/11/2013

Responsive nav / mený jQuery plugin

Un responsive nav / menu jQuery plugin con le caratteristiche di: supporto per il menu multi-livello, flessibile, semplice markup, compatibilità cross-browser, tastiera accessibile, degradazione con grazia e senza JavaScript.


Tag:  JQuery  Css  Mený
The Responsive jQuery Content Slider
Tutorials e script
20/11/2013

The Responsive jQuery Content Slider

Slider di immagini che sfrutta le tecnologie JQuery e Responsive Web Design.


Tag:  JQuery  Slideshow  Css  Layout  Grafica
Slideshow con anteprima immagini
Tutorials e script
20/11/2013

Slideshow con anteprima immagini

Lo slideshow si regolerà automaticamente (responsive) e si potrà navigare tra le diapositive utilizzando il visualizzatore di miniatura o l'opzione di presentazione autoplay.



Tag:  JQuery  Slideshow  Css  Layout  Grafica
Responsive 3D Panel Layout
Tutorials e script
20/11/2013

Responsive 3D Panel Layout

Un esperimento di layout responsive, in cui organizziamo i pannelli in una struttura a griglia e con effetti 3D.



Tag:  JQuery  Slideshow  Css  Layout
Bootstrap
Tutorials e script
18/11/2013

Bootstrap

Originariamente creato dagli sviluppatori di Twitter, Bootstrap è diventato uno dei più popolari framework front-end e di progetti open source nel mondo.



Tag:  JQuery  Css  Layout a griglia  Mený
Sistema di griglia basato su CSS
Tutorials e script
18/11/2013

Sistema di griglia basato su CSS

One% CSS Grid è un sistema di griglia basato su CSS. E 'stato concepito come base per la creazione di layout web responsive facile, rapido e con il minimo sforzo.



Tag:  Css  Layout a griglia  Layout
Browser compatibile con CSS3
Tutorials e script
08/11/2013

Browser compatibile con CSS3

Verificare se il tuo browser è compatibile con CSS3.


Tag:  Manuale  Guida  Layout
Gestione del layout a griglia con javascript
Tutorials e script
01/11/2013

Gestione del layout a griglia con javascript

Masonry è una libreria JavaScript per la gestione del layout a griglia. 
Funziona mettendo gli elementi in posizione ottimale in base allo spazio disponibile verticale.



Tag:  JQuery  Css  Layout a griglia
Kwicks
Tutorials e script

Kwicks

Oggi vi presentiamo Kwicks, un plugin jQuery molto flessibile e dinamico.
Partiamo subito con il link al sito dello sviluppatore: Kwicks.


Tag:  JQuery  Javascript  Mený  Guida  Layout  Strumenti