Flexible Sliders with Views Slideshow
June 18, 2021
If you've worked with Drupal surely at some point have had the need to create a slider in your website and when looking for a module to perform this functionality we have a lot of options but what is worth learning and use? http://drupal.org/node/418616
Today I present you one of my favorites, slideshow , this module is based on the library for sliders Jquery Cycle and we use to feed our sliders with content generated from a view, which provides enough flexibility for the content that we to deploy as well as other features using some CSS and javascript we can create almost any type of slider.
Hoy les presento uno de mis favoritos, Views slideshow, este módulo está basado en la librería para sliders Jquery Cycle y nos permite alimentar nuestros sliders con contenido generado por un view, los que brinda bastante flexibilidad sobre el contenido que vamos a desplegar además de otras funcionalidades que con ayuda de algo de css y javascript podemos crear casi cualquier tipo de slider.
In this tutorial I will show how you how to develop the slider that is here .
Para esto lo primero que necesitamos hacer es instalar los módulos que vamos a necesitar:
For this the first thing that we need to do is install the modules that we need:
Views (7.x-3.0-beta3)
Views Slideshow (7.x-3.0-alpha1)
Chaos tool suite (7.x-1.0-alpha4)
Libraries (7.x-1.0)
I've already mentioned this before in the blog but I always like to do it, when developing or managing Drupal sites is a time saver, if we would have install the modules with drush we would just have to write in the terminal:
Luego de esto nos dirigimos a image styles y creamos los estilos que queremos utilizar, en nuestro caso, para este slider creamos uno con las dimensiones 940 × 464 que llamamos big_viewsslideshow_image
y otro con las dimensiones 220 × 145 que llamamos small_viewsslideshow_image, el primero para la imagen grande del slider y el segundo para las imágenes pequeñas que se van a usar como paginador del slider.
After that we have to go to to image styles and create the styles that we will use, in our case we will create an slider with 940px × 464px as dimensions and call it big_viewsslideshow_image an another one with
220px × 145px as dimensions, we will call it small_viewsslideshow_image. The first one is for the big picture of the slider and the other one are the small pictures that we will use as pagers.
After this we will add some content for our tests.
Ahora podemos proceder a crear nuestro slider, vamos a admin/structure/views/add y creamos el slide, con las siguientes opciones:
Now we can proceed to create our slider, we have to go to admin/structure/views/add and create the slide with the following options:
Show: Content of Type: Views Slider Content sorted by: Newest First
Gancho en Create a Page
Page Title: Views Slideshow Demo 1
Path: views-slideshow-demo-1
Display Format: Slideshow of Fields
Items to display: 4
Now we click "Continue and Edit",
mark the two fields to hide and also marks the "Activate Pager Slide and Pause on Hover" so that when the mouse passes over these small images of the slider main image changes.
Example:
We erase the field that it is created by default "Content: Title" and we add the following fields in the same order:
Content: Views Slideshow Image (using Image Style: views-slideshow-big)
Content: Views Slideshow Image (using Image Style: views-slideshow-big), this one we will use it as a pager, so we have to hide it.
Content: Title, we will also use this field for the pager so we also have to hide it.
Once we finish this we click over Settings from Format: Slideshow and we add in "Bottom Widgets" a "Pager" and we choose "Pager Type: Fields",
Una vez terminamos esto hacemos click sobre Settings de Format: Slideshow y Agregamos en "Bottom Widgets" un "Pager" y escojemos "Pager Type: Fields", marcamos los dos campos que escondimos y además marcamos a "Activate Slide and Pause on Pager Hover" para que cuando el mouse pase por encima de estas imágenes pequeñas la imagen principal del slider cambie.
Despues de esto nuestro slider está casi listo, ahora con css vamos a colocar las imágenes y los títulos donde deben ir.
Si miramos el html generado cada uno de estos paginadores está contenido en un div con la clase 'views-slideshow-pager-field-item', a esta clase le agregamos las siguientes propiedades en nuestro css:
drush dl views views_slideshow ctools librariesDrush will ask interactively which version of each module you would like want to install. In the same way we could enable the modules simply by typing:
drush en -y views ctools views views_slideshow libraries views_uiWe use '-y' to respond "yes" to all of the questions that drush will ask us during the installation. Otherwise, we can also go to /admin/modules and enable the modules that we need. In addition to this we will need the jQuery Cycle library for Views Slideshow Cycle to work so we go to /sites/all/libraries (if you do not have the folder, you can create) and we create the folder 'jquery.cycle', this is the folder where we will have to download jquery.cycle.min.all.js cycle.all.js or compressed version if desired. These scripts can be found in http://jquery.malsup.com/cycle/. Una vez tengamos estos módulos activados debemos proceder a crear el tipo de contenido (en admin/structure/types/add) que queremos utilizar para el slider, en este caso vamos a llamarlo 'Views Slider Content' y vamos a agregarle un campo que sea una imagen. Once we have these modules enabled we can proceed to create the content type (in admin/structure/types/add) that we will use for the slider, in this case we will call it 'Views Slider Content' and we'll add an image field.
Luego de esto nos dirigimos a image styles y creamos los estilos que queremos utilizar, en nuestro caso, para este slider creamos uno con las dimensiones 940 × 464 que llamamos big_viewsslideshow_image
y otro con las dimensiones 220 × 145 que llamamos small_viewsslideshow_image, el primero para la imagen grande del slider y el segundo para las imágenes pequeñas que se van a usar como paginador del slider.
After that we have to go to to image styles and create the styles that we will use, in our case we will create an slider with 940px × 464px as dimensions and call it big_viewsslideshow_image an another one with
220px × 145px as dimensions, we will call it small_viewsslideshow_image. The first one is for the big picture of the slider and the other one are the small pictures that we will use as pagers.
After this we will add some content for our tests.
Ahora podemos proceder a crear nuestro slider, vamos a admin/structure/views/add y creamos el slide, con las siguientes opciones:
Now we can proceed to create our slider, we have to go to admin/structure/views/add and create the slide with the following options:
Show: Content of Type: Views Slider Content sorted by: Newest First
Gancho en Create a Page
Page Title: Views Slideshow Demo 1
Path: views-slideshow-demo-1
Display Format: Slideshow of Fields
Items to display: 4
Now we click "Continue and Edit",
mark the two fields to hide and also marks the "Activate Pager Slide and Pause on Hover" so that when the mouse passes over these small images of the slider main image changes.
Example:
We erase the field that it is created by default "Content: Title" and we add the following fields in the same order:
Content: Views Slideshow Image (using Image Style: views-slideshow-big)
Content: Views Slideshow Image (using Image Style: views-slideshow-big), this one we will use it as a pager, so we have to hide it.
Content: Title, we will also use this field for the pager so we also have to hide it.
Once we finish this we click over Settings from Format: Slideshow and we add in "Bottom Widgets" a "Pager" and we choose "Pager Type: Fields",
Una vez terminamos esto hacemos click sobre Settings de Format: Slideshow y Agregamos en "Bottom Widgets" un "Pager" y escojemos "Pager Type: Fields", marcamos los dos campos que escondimos y además marcamos a "Activate Slide and Pause on Pager Hover" para que cuando el mouse pase por encima de estas imágenes pequeñas la imagen principal del slider cambie.
Despues de esto nuestro slider está casi listo, ahora con css vamos a colocar las imágenes y los títulos donde deben ir.
Si miramos el html generado cada uno de estos paginadores está contenido en un div con la clase 'views-slideshow-pager-field-item', a esta clase le agregamos las siguientes propiedades en nuestro css:
.views-slideshow-pager-field-item {
position: relative;
float: left;
margin: 20px 20px 0px 0px;
}
#views_slideshow_pager_field_item_bottom_views_slideshow_demo_1-page_3 {
margin-right: 0px;
}
Con esto logramos que en el paginador las imágenes y el título queden justo debajo de la imagen grande, ahora vamos a acomodar, estilizar y ponerle fondo al título:
.views-field-title {
text-shadow: 0 0 1px transparent;
width: 220px;
background-color: black;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
-moz-opacity: 90;
-khtml-opacity: 0.9;
opacity: 0.9;
text-align: center;
padding: 5px 0 5px 0;
position: absolute;
bottom: 20px;
color: white;
bottom: 20px;
}
Y así terminamos de construir nuestro slider. Cualquier pregunta que tengan pueden escribirla en los comentarios y con gusto los ayudo.
La próxima semana voy poner un tutorial con algunos efectos extra utilizando jquery sobre este mismo slider.
Ejemplo del slider:
http://demos.rootstack.com/views-slideshow-demo-1
Fotos que utilice en el slider:
http://www.flickr.com/photos/barbaritz/6009568786/
http://www.flickr.com/photos/the-d-man-92/6009565406/
http://www.flickr.com/photos/ell-r-brown/6009012661/
http://www.flickr.com/photos/psychoderelict/6009580604/Share