Afegir fletxes als slideshows del mòdul Views Slideshow a Drupal 7

Quan instal·lem Views Slideshow i configurem alguna vista que ens cree un slideshow en moviment amb algun efecte jQuery, veiem que sembla un poc pobre, ja que nomès mostra el text de Anterior, Pausa i Següent.

Amb aquest xicotet truc CSS podem afegir fletxes de control del slideshow fàcilment tenint un resultat com aquest:

Primer li dic al contenedor del block que he creat amb views que vull que siga amb posició relativa, aleshores al contenedor dels controls ja li puc dir que siga absolut i puc moure'l com vullga.


/* el slideshow de la portada */

.view-id-slideshowportada , #views_slideshow_cycle_main_slideshowportada-block {
position: relative;
}

#views_slideshow_controls_text_slideshowportada-block {
position: absolute;
background: transparent;;
z-index: 50;
width: 820px;
top: 50px;
}

Ara li especifique que a la clase on mostrem la paraula "Previous" o "Anterior", li ficarem la imatge esquerra.png, i a la clase on mostra "Next" o "Següent" li mostrarem la imatge dreta.png

#views_slideshow_controls_text_slideshowportada-block .views-slideshow-controls-text-previous {
display: inline-block;
width: 120px;
height: 120px;
float: left;
background: url(./images/esquerra.png) no-repeat;
font-size: 0px;
color: #444;
}

#views_slideshow_controls_text_slideshowportada-block .views-slideshow-controls-text-next {
display: inline-block;
width: 120px;
height: 120px;
z-index: 30;
float: right;
background: url(./images/dreta.png) no-repeat;
font-size: 0px;
color: #444;
}

#views_slideshow_controls_text_slideshowportada-block .views-slideshow-controls-text-previous,
#views_slideshow_controls_text_slideshowportada-block .views-slideshow-controls-text-next {
z-index: 30;
}

Ara, per a fer-ho més bonico, afegirem opacitat... de tal manera que les fletxes es veuran molt poc però si el rató passa damunt, es veuran una mica més fosques donant una bona sensació en la navegació:


#views_slideshow_controls_text_slideshowportada-block .views-slideshow-controls-text-previous, #views_slideshow_controls_text_slideshowportada-block .views-slideshow-controls-text-next {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

#views_slideshow_controls_text_slideshowportada-block .views-slideshow-controls-text-previous:hover, #views_slideshow_controls_text_slideshowportada-block .views-slideshow-controls-text-next:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}

Finalment, com que personalment no m'agradava, he ocultat la clase de pause i del play del Views Slideshow:


#views_slideshow_controls_text_slideshowportada-block .views-slideshow-controls-text-pause {
display: none;
width: 16px;
height: 16px;
background: url(yourimage-pause) no-repeat;
font-size: 1px;
color: #444;
}

#views_slideshow_cycle_main_slideshowportada-block .views_slideshow_singleframe_play {
display: none;
width: 16px;
height: 16px;
background: url(yourimage-play) no-repeat;
font-size: 1px;
color: #444;
}

Per supost, açò ho pots modificar com vullgues, afegir nous icones i/o personalitzar també la icona del Play en el centre de la teua presentació com fan algunes webs, però a mi m'gradava que nomès mostrara lo de esquerra i dreta.

Al Portal de la Comunitat de la Diputació de Castelló, ho he fet amb:


/* afegim les fletxes al Views Slideshow */
#views_slideshow_controls_text_pause_slideshowportadaviews-block {display: none; }
#views_slideshow_controls_text_previous_slideshowportadaviews-block {
position: absolute;
top: 70px;
margin-left: 20px;
z-index: 999999;
width: 150px;
height: 150px;
background: url(images/izquierda.png) no-repeat;
font-size: 0;
color: transparent;
}

#views_slideshow_controls_text_next_slideshowportadaviews-block {
position: absolute;
top: 70px;
right: 20px;
z-index: 999999;
width: 150px;
height: 150px;
background: url(images/derecha.png) no-repeat;
font-size: 0;
color: transparent;
}

I per al Drupal 6

Ací deixo el mateix truc però per al Views Slideshow a un Drupal 6:


/* Personalització Slideshow */

.view-id-slideshowportada, #views_slideshow_singleframe_main_slideshowportada-block_1 {
position: relative;
}

#views_slideshow_singleframe_controls_slideshowportada-block_1 , #views_slideshow_controls_text_slideshowportada-block {
position: absolute;
background: transparent;
z-index: 50;
width: 630px;
top: 100px;
}
#views_slideshow_singleframe_prev_slideshowportada-block_1 {
display: inline-block;
width: 50px;
height: 50px;
z-index: 80;
float: left;
background: url(./images/izquierda.png) no-repeat;
font-size: 0px;
color: #444;
}

#views_slideshow_singleframe_next_slideshowportada-block_1 {
display: inline-block;
width: 50px;
height: 50px;
z-index: 80;
float: right;
background: url(./images/derecha.png) no-repeat;
font-size: 0px;
color: #444;
}

Espere que et siga útil aquest truc per als teus Slideshows :-)

Enllaços:
Repositori de icones de fletxes: https://www.iconfinder.com/search/?q=arrow
Truc llegit a https://www.drupal.org/node/691984#comment-6543396