Integreer geanimeerde GIF's zoals Facebook met jqGifPreview

Twitter en Facebook hebben veel mensen geanimeerde GIF's delen dagelijks. Als deze allemaal automatisch worden afgespeeld, kunnen ze gruwelijk zijn in een feed.

Beide netwerken gaan hier omheen met een click-to-preview-functie voor alle GIF's. Hiermee kan de gebruiker kiezen welke animaties ze willen zien door te kiezen wanneer de animatie moet worden gestart / gestopt.

Met de jqGifPreview-plug-in, u kunt dezelfde functionaliteit naar uw website brengen.

Deze gratis jQuery-plug-in werkt op alle GIF's op de pagina, of kan specifiek richten op elke gewenste. Het is een fantastische bron, maar het duurt even voordat je het hebt ingesteld.

Een onderbroken GIF is eigenlijk gewoon één frame van de animatie, weergegeven op de pagina.

Helaas is deze plug-in doet niet trek automatisch een statische foto uit de GIF voor jou. Maar u kunt dit bereiken met behulp van PHP of een andere back-endtaal, dus met een beetje code kan dit worden geautomatiseerd.

Deze plug-in gebruikt een data- * attribuut sla de GIF-afbeeldingslocatie op. Zodra de gebruiker op de afbeelding klikt, wordt deze automatisch in de src kenmerk van de afbeelding en worden weergegeven op het scherm.

Eenvoudig, effectief en zeker een net effect! Het enige dat u nodig hebt, zijn de CSS / JS-bestanden voor deze plug-in die u kunt gebruiken trek direct van GitHub. En natuurlijk zal je dat doen heb een kopie van jQuery nodig, te.

Van daaruit stelt u uw afbeelding zo in:

De belangrijkste src attribuut zou moeten bevatten de statische afbeelding. Je kunt een script maken om het te genereren, of je kunt handmatig een statische opname voor elke GIF bewerken en uploaden.

De data-gif attribuut bevat de echte geanimeerde GIF en ze wisselen van klik als jij richten op de hoofdbeeldklasse (in dit geval is het dat .myImg). Nu is alles wat je nodig hebt één regel jQuery om alles te laten werken:

 $ ( "MyImg.") JqGifPreview (.); 

Absoluut, een van de coolste jQuery-plug-ins die ik deze maand heb gezien en die vrij eenvoudig is in te stellen.

Je kunt meer leren door de GitHub-pagina en er is ook een live demovoorbeeld gehost op de website van de ontwikkelaar.