Brugebar jQuery plugins

Heldigvis er meget lavet af andre i forvejen ...

Der findes tusindevis af gode jQuery plugins som nemt kan benyttes.
Her er min egen liste, over dem jeg til daglig benytter, og har fundet stabile nok, til at kunne blive brugt på de hjemmesider vi koder på www.hjemmesider.dk.

FitVids.js

FitVids.js til Responsive webdesign med video

FitVids et nemt og meget virksomt jQuery plugin når der arbejdes med responsive wendesign og video.

http://fitvidsjs.com/

$('.container').fitVids();

Selectyze

Selectyze - Når select lister skal styles

Webdesignere kender sjældent forskel på en almindelig drop-down-menu og en select liste. Her er Selectyze en mulighed, for at kunne style select listen med CSS, præcis som webdesignet kræver det.
Dette lille jQuery plugin skjuler den oprindelige select liste, og laver en ny <ul> <li> ..... </li></ul> som vi CSS mennesker elsker at arbejde med.

http://www.myjqueryplugins.com/jquery-plugin/selectyze
https://github.com/alpixel/Selectyze

bxSlider

bxSlider - alt der skal slides

Vis først slider når alle slides / billeder er loaded. Dette giver en pænere hjemmeside hvor slideren ikke "flimre" mens den loader alle billeder.
Skjul slider med css

ul.slider {display: none;}

... og vises den igen med .show() i din jQuery.

jQuery(document).ready(function($) {

jQuery('.bxslider').show().bxSlider({
auto: true,
....
});

}

Der findes rigtig mange slider plugin. Et af dem jeg synes aller mest om er bxSlider, som kan tilpasses til næsten enhvert formål.
En af de helt store fordele er, at det kan arbejde responsive, så slideren tilpasser fint efter skærmstørrelsen.
(læs evt mere omkring responsive webdesign her)

http://bxslider.com/

NB! Google Chrome har et lille problem!

Google Chrome har et lille problem med BxSlider. Andre HTML elementer på siden kan rykke nogle få pixel frem og tilbage i takt med slider-elementerne. Løsning er at tilføje følgende til CSS filen

.bx-viewport {
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}

Problem med Safari browsere

Et problem i Safari browseren hvor højden ikke beregnes rigtigt, kan løses ved at tilføje: height=device-height" i <head> ... </head>

<meta name="viewport" content="width=device-width, height=device-height" >

Her er en fin metode hvor du skjuler slider indholdet, indtil alt er indlæst på siden, for ikke at ødelægge det fine webdesign mens siden indlæses:
http://hirejordansmith.com/make-bxslider-hide-slides-page-loads/

first::word

first::word

Mens vi venter på CSS selector som first::wordjQuery script

https://github.com/JeffreyWay/jquery.styleWords

Lightbox

Billedvisning i lightbox

http://lokeshdhakar.com/projects/lightbox2/

$( ".billedgalleri a").attr('data-lightbox', 'image-gallery');

Mansonery

Hvis dit responsive design skal være en smule "sexy" er Mansonry en cool funktion ;-)

http://masonry.desandro.com/

Superslides

En super fed og simpel slider som jeg har benyttet flere gange som background slider

https://github.com/nicinabox/superslides

Select options til liste

Benyttes evt. til en webshop med produktvarianter

https://github.com/o-sam-o/jquery.select2Buttons