DigiStyle Plugin

Vanaf september 2012 wordt DigiStyle niet langer ondersteund of bijgewerkt.

digistyle150x150Je kunt deze plugin gebruiken om speciale effecten aan je afbeeldingen toe te voegen (kan ook gebruikt worden voor andere elementen, zoals knoppen) door simpelweg een class aan een object toe te wijzen!

We wilden wat mooie effecten aan onze website afbeeldingen toevoegen en wilde dit "on-the-fly" in Joomla! doen. Het idee ontstond om een plugin te schrijven die dit voor ons kon doen met een paar extra leuke mogelijkheden erin verwerkt. Niet alleen een nette reflectie is geimplementeerd maar ook het maken van schaduw, afgeronde hoeken en zelfs een afbeelding animatie!

De plugin gebruikt de jQuery javascript library om de geintegreerde effecten toe te passen. Door het werk van een paar geweldige javascript programmeurs konden wij deze plugin samenstellen. Onze speciale waardering gaat dan ook uit naar:

Met een paar gemakkelijk te gebruiken parameters kun je de effecten aanpassen aan je eigen website stijl en je hoeft geen speciale bewerking codes te onthouden. Voeg je afbeelding toe in je artikelen zoals je gewend bent en vul de effect-class in die je wilt gebruiken. Op deze manier worden effecten alleen toegepast op afbeeldingen/objecten die een effect-class hebben!

En zo simpel is het! Maar omdat een afbeelding meer zegt dan woorden, hieronder een paar voorbeelden...

Reflecties

slogo_colorbgDe afbeelding links heeft de "reflex" class meegekregen. De standaard parameters zijn gebruikt voor de reflectie welke ingesteld kunnen worden bij de plugin parameters in de backend.

De reflectie hoogte is ingesteld op 0.5 en de reflectie transparantie is ingesteld op 0.2.

 


Schaduw

slogo_colorbgDe afbeelding rechts heeft het "shadow" class meegekregen. De standaard parameters zijn gebruikt voor de schaduw welke ingesteld kunnen worden bij de plugin parameters in de backend.

De Schaduw linker en rechter positie zijn ingesteld op 4(px), de Schaduw vervaging is ingesteld op 2, de Schaduw transparantie is ingesteld op 0.5 en de Schaduw kleur is ingestel op #FFFFFF (wit).

 

Puffy Effect

slogo_whitebgDe afbeelding links heeft de "puffy" class meegekregen. Dit effect is alleen zichtbaar wanneer je met de muis over de afbeelding beweegt. Als de afbeelding ingesteld is met een hyperlink (href) dan zal bij het aanklikken van de afbeelding de url gevolgd worden die is ingesteld.

De Puffy animatie duur is ingesteld op 1000 milliseconden welke gelijk is aan 1 second. Deze parameter is in te stellen bij de plugin parameters in de backend.

 

Ronde Hoeken

Het ronde hoeken effect heeft meerdere class die een variatie in hoekstijlen weer geven. De standaard parameters zijn aangepast aan deze website template en kunnen worden ingesteld in de plug parameters in de backend.

De hoek radius is ingesteld op 16, de hoek achtergrondkleur is ingesteld op #FFFFFF (wit), de hoek padding (afstand) is ingesteld op 4(px), de hoek rand grootte is ingesteld op 4(px) en de hoek rand kleur is ingesteld op #AAAAAA (licht-grijs).

De classes die gebruikt worden in de voorbeelden hieronder zijn (in de juiste volgorde van links naar rechts): flatC, roundC, roundT, roundB, roundTL en roundTR.

slogo_colorbgslogo_colorbgslogo_colorbg

slogo_colorbgslogo_colorbgslogo_colorbg

Dus, ga naar de download sectie, download de DigiStyle Plugin, installeer het in Joomla!, publiceer de plugin en begin met het toekennen van de juiste classes aan je afbeeldingen!

bcaDeze module is hetzelfde als de standaard breadcrumbs module van Joomla! 1.5/2.5 maar... met extra opties en een paar fixes.

Er zijn geavanceerde opties toegevoegd aan de breadcrumbs module: afbreken na de laatste breadcrumb, afbreken breadcrumb na x posities en voeg karakter(s) toe aan een afgebroken breadcrumb.

Lees meer...