Image effects

Leseenheid

Moeilijkheidsgraad

5

Op het net zijn er talrijke voorbeelden beschikbaar van effecten toegepast op afbeeldingen, menus, ....  Op http://tympanus.net/Tutorials/OriginalHoverEffects/index.html kan je daar enkele voorbeelden van zien. Surf maar eens op hun site om andere effecten te ontdekken. Het is belangrijk om te controleren dat de effecten multibrowser zijn. Zeker in combinatie met javascript is dit niet altijd zo.

De image effecten beginnen sterk aan belang te winnen, omdat ze een mooie presentatie geven van afbeeldingen. Webshops maken er ook meer en meer gebruik van. De manier om dit te implementeren is nagenoeg dezelfde voor elk effect. Vandaar dat ik met één uitgewerkt voorbeeld een gans gamma voor je open. Ik merk wel op dat dit een niveau 5 is qua moeilijkheid.

We gaan een foto overzicht maken met een view:

die per foto een effect vertoont. Je ziet bij hoveren de titel, een stukje uit de body en een knop om naar de inhoud te gaan.

Live Demo

Je kunt op hun site ook een demo zien en de bijhorende code met bestanden downloaden. Waarvoor dank.

Als je nu op een indexpagina klikt zie je lokaal al dat het werkt. Test dit uit. Hoe ga je dit nu online zetten?

1e methode: het klakkeloos overnemen van de code

Daarvoor zouden we moeten we de mappen uploaden naar onze sitesmap. We maken dan een basic page pagina aan, waar we php als tekstmodus nemen. Deze mogelijkheid moet eerst als kernmodule geactiveerd worden.

Daarna moet je alle links in je pagina naar de betrokken mappen verleggen. Ik heb dit bvb uitgewerkt voor een soort 3D effect (jammer genoeg niet goed werkzaam in IE): http://drupalsnelcursus.be/demo/javascript/3D

Je begrijpt echter dat dit er hier geen integratie is in Drupal. Er zijn geen velden, geen inhoudtypes,...Stel je voor dat je bvb een webshop hebt, waar je voor elk artikel een nieuwe pagina zou moeten maken...

2e methode: integratie in Drupal

We maken een inhoudstype aan met een zestal nodes, telkens met een foto. Je kunt gebruik maken van de images die meegeleverd werden uit de download. Daarna gaan we een view maken om deze foto's te tonen.

De lees meer tekst heb ik vervangen door een afbeelding met een link. ik heb een figuurtje vna het net gehaald.

<img alt="" src="/demo/sites/default/files/more_icon.png" style="left:45%;height:34px; width:34px" />

Je krijgt dit voorbeeld als resultaat:

We kopiëren nu de CSS (hier is er geen javascript) naar de CSS injector en passen dit toe op onze view. Ik heb hier en daar al iets gewijzigd omdat ik het mooier vond... De CSS die ik gebruik staat hier onder.

.links_uitlijnen{
display:block;
float:left;
}

.view {
    /*width: 300px;*/
    height: 200px;
    /*margin: 10px;*/
    margin: 10px 5px 10px 5px;
    float: left;
    /*border: 10px solid #fff;*/
    /*overflow: hidden;*/
    position: relative;
    text-align: center;
    /*box-shadow: 1px 1px 2px #e6e6e6;*/
    cursor: default;
    /*background: #fff url(../images/bgimg.jpg) no-repeat center center*/
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}

.view-first img {
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(219,127,8, 0.7);
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.view-first:hover img {
    transform: scale(1.1);
}
.view-first:hover .mask {
    opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
    transition-delay: 0.2s;
}
.site-footer{
display:none;
}

Je zult zien dat er nog niet gebeurt. Logisch de CSS is wel al aanwezig, maar de classes zijn nog niet toegekend.

Om te zien wat er aan wat meot gekoppeld worden kijken we aandachtig naar de code die in de index.html pagina wordt getoond:

We zien dat er een class view en view-first rond elke figuur staat en dat de tekst de klasse mask toegekend krijgt. OK. Hoe pas je dit nu toe op je Drupal view? Wel omdat je in een view de inhoud kunt herschrijven, kom je in een codeveld terecht, waar je gelukkig ook nog de tokens kunt gebruiken. Herschrijf het laatste veld. Je kunt niet herschrijven met een veld dat lager staat. Vergelijk eens onderstaande print met bovenstaande print. Zie je hoe ik de structuur behoud?

Tenslotte moeten we ook nog bij de instellingen van de onopgemaakte lijst, de klasse toekennen. Blijkbaar is de container (waar de figuren in zitten) ook van belang.

Views bieden dus de mogelijkheid om door te herschrijven een combinatie te maken van Drupal, met zijn flexibele instellingen, en de stugge HTMLcodes die verwijzen naar de classes.

Om hetzelfde bij nodes te doen is andere koek. Bij nodes kan je wel classes toekennen bij de weergave met de field formatter class module. Zeker het proberen waard, maar dit laat ik het aan jullie over...Ik vrees dat geneste divs niet echt tot de Drupal flexibiliteit horen.

Oefening:

ga naar http://css3.bradshawenterprises.com/flip/

en maak dat er bij het hoveren een andere foto verschijnt. Deze overgang gaat via een mooi transform effect. Je ziet de foto draaien. Deze toepassing kan gebruikt worden in webshops waar je vóór- en achterkant van kleding kunt tonen. Je kunt ook tekst laten verschijnen ipv een foto.