Nove switcher per passare da griglia a lista utilizzando CSS e Jquery

In parecchi siti di e-commerce e di annunci classificati potreste esservi imbattuti in pagine dei risultati che consentono di visualizzare i prodotti con i due differenti layout griglia e lista, cliccando su dei pulsanti per passare da una visualizzazione all’altra. Di seguito troverete i nove migliori switcher gratuiti per passare da griglia a lista utilizzando CSS e Jquery, che sicuramente troverete utile integrare nei vostri progetti e-commerce e no.

1. Switch della visualizzazione

view-mode-switch

Demo & Download Gratuito

Don’t you ever tried Codrops in your site? Yes, really its one of a best choosable tutorial with a simple view mode. Just want to say that the layout was defined by a view class that can be applied in the main wrapper.

2. Griglia/Lista con filtro per la categoria Jquery

jquery-grid-view-filter-cookie

Demo & Download Gratuito

This is such an great tutorial that can add category filter and switching the layout based on cookie to know the browser to remember the choice of the user.

3. Griglia/Lista con switcher jquery

grid-list-view-switcher

Demo & Download Gratuito

Simple basic CSS and Jquery switcher changes the layout from display lists to smaller grids.

4. Visualizzazione  griglia/lista con bootstrap

list-grid-bootstrap

Demo & Download Gratuito

The snippet is for Bootstrap version 3 and be sure that you are upgraded your Bootstrap version to 3 or more.  A decent List/Gird button which will take your site to look like a standard layout.

5. Toggle visualizzazione griglia/lista

Toggle grid list view

Demo & Download Gratuito

I love the functionality of this switcher because there is only one single button switches both to List/Grid view. This works like a toggle button using SCSS functionality.

6. Switcher griglia/lista con transizione in dissolvenza usando Jquery

list-grid-switch

Demo & Download Gratuito

It uses fade in/out transitions while switching over List/Grid button to display product/archives page using Jquery and CSS.

7. Switch visualizzazione lista/griglia con Jquery

list-grid-view-jquery

Demo & Download Gratuito

A simple design and simple effect List/Grid view used for very basic understanding.

8. Semplice visualizzazione griglia/lista

grid list view simple

Demo & Download Gratuito

This is also same as #9

9. Codice per switcher griglia/lista

gird-list-view-code

Demo & Download Gratuito



Lascia un commento