slideshow_v2
There is a v1 of the slide show that only works with buttons and changing the display property, for this we'll make some improvements to get a better experience.
Complete a slideshow project with specific requirements to practice and learn more.
Previously we made a version1 that only have a frame with images and two buttons, the movements were controlled with the display property and it hadn't special effects.
- The buttons.
- Needs to be hidden and make transitions effect when the mouse is over the image.
- They will show at the sides and over of the images.
- The reel of images.
- Needs to be hidden and make transitions effect.
- It'll have its own buttons.
- When the user press one of the images, the main image needs to change to be the same as the image selected.
- It should look as an infinite carousel
- The descriptional text box.
- Each image must have its own description, and the text needs to change to coincide with the one that is in the main display.
- All the images will have the same measures.
- It'll be just 7 images.
- It won't need to add more images.
- The topic will be about marvel heroes.
- The dimensions for the main images will be 720 x 300
- The thumbnails will have the dimensions: 144 x 60
- The size of the content will occupy the viewport
- The background design for the slideshow will be oxford solid color #393d42
If I develop a slideshow with this specifications, I will learn more about how to modularize a problem, also I will practice to understand more the way that javascript works.
We can divide the project in the following modules to discover the things that I need to learn or solve:
- How to do the slide effects?
+------------------+
| |
| |
| |
+------------------+
- How to dissapear and appear the buttons when the mouse is over?
- How to superimpose the buttons over the images?
- How to make a transition effect?
- What div do I need to select to apply the transition?
- How to control the images with the buttons?
+--------+ +--------+
| | | |
| / | | \ |
| / | | \ |
| \ | | / |
| \ | | / |
| | | |
+--------+ +--------+
- How to do the reel?
- How to slide and hide when the mouse isn't over?
- What div do I need to select to apply the transition?
- How to do the lazy load in the images?
- How control the images in the main frame with the reel?
+----------------------------------------+
| +----+ +----+ +----+ +----+ +--|
<--- | | | | | | | | | | | -->
| +----+ +----+ +----+ +----+ +--|
+----------------------------------------+
- How to change the content text that corresponds to each image?
- How to hide the other texts while they not be showing?
+-------------------------------------+
| Lorem Ipsum |
| ad his scripta blandit partiendo, |
| eum fastidii accumsan euripidis in, |
| eum liber hendrerit an |
+-------------------------------------+
About the The image area We can control it moving its position letting all the images in a div container.
About the buttons and thumbnails actions when the mouse is over By using transition styles property and overflow hidden in the containers, we can hide the buttons and the thumbnails to show them when the user pass the mouse over the image of the slide show, and just let visible the main frame and the text box.
The buttons will go from the sides into the center and the reel of thumbnails will go from down to up, being overlay of the image.
View when the mouse isn't over:
+-------------------------------------+
| |
| |
| |
| |
| |
| |
+-------------------------------------+
| Lorem Ipsum |
| ad his scripta blandit partiendo, |
| eum fastidii accumsan euripidis in, |
| eum liber hendrerit an |
+-------------------------------------+
View when the mouse is over:
+-------------------------------------+
| |
| / \ |
| \ / |
| |
+-+-----------------------------------+
| | | | | | | | | | |
+-------------------------------------+
| Lorem Ipsum |
| ad his scripta blandit partiendo, |
| eum fastidii accumsan euripidis in, |
| eum liber hendrerit an |
+-------------------------------------+
About the Overlaying objects: We can use the z-index and control theirs positions.
About the Reel of thumbnails: Controling their left position and applying transitions we can make the effect to look like an infinite carousel, also by using a variable that match the images we can show which is pressed.
About the Text description for each image: by using a variable (the same that we use in the reel) that match the image with the text we can show the right one.
In this version the user have 4 options to make some action in the slideshow (also one of this option have anoter 2 option within) and while the user do not click something the slide show will work alone.
+--------------------+
| Get images in an |
| array, give them |
| a counter number |
| into a variable |
+---------+----------+
|
+---------v----------+
| The user pass the |
| mouse over |
+---------+----------+
|
+---------v----------+
| Appears the control|
| arrows and the reel|
| of small images |
+----+-----------+---+
| |
+---------------v---+ +---v---------------+
| buttons control | | Reel of images |
+--+-------+--------+ +------+---------+--+
| | |----+ |
+--------v-+ +--v-------+ +-------v--+ | +--v-------+
| the user | | the user | | the user | | | the user |
| press | | press | | select | | | press |
| left | | right | | one of | | | one of |
| button | | button | | the | | | the |
+----+-----+ +-----+----+ | images | | | arrows |
| | +----+-----+ | | control |
+----v-----+ +-----v----+ | | +-----+----+
| substract| |add pixels| +----v-----+ | |
| pixels | | from the | | the main | | +-----v----+
| from the | | right | | image | | | the reel |
| right | | position | | change | | | moves |
| position | | of the | | making | | | depending|
| of the | | container| | match | | | of the |
| container| +-----+----+ | with the | | | selecting|
+-----+----+ | |selecting | | | button |
| | | image | | +-----+----+
| | | using the| | |
| | | specific | +-------+
| | | number |
| | | in a |
| | | variable |
| | +-----+----+
| | |
+-------------+--------------+
|
+---------+
|
+---------v----------+
| The number in the |
| counter variable |
| change |
+---------+----------+
|
+-----------v------------+
| The main image at the |
| principal frame change|
+-----------+------------+
|
+---------v----------+
| The content in the |
| text box change |
| matching with the |
| number at the |
| counter variable |
+----------+---------+
|
+----------v---------+
| The process start |
| again |
+----------+---------+
^ | ^
| | |
+-------------------+-------------------+
It shows the main frame image container and the text box.
When the user pass the mouse over the frame image container it appears (with transitions styles) the sides buttons and the bottom reel of thumbnails options.
This affect the rigth position of the main container and change the number of the counter variable that also indicates the text that must be displayed.
This change the number of the counter variable that also indicates the text and the image that must be displayed.
When the user remove the mouse to don't be over the image the buttons and the reel of thumbnails will make a transition style to be hidden.
There will be a list of items (li) that contains images, all with display: inline and float: left properties to set them one beside the other in horizontal way:
+-------------------------------+
| window |
| +---------------------------------------+
| | +-----------------------------------+ |
| | | | | | | |
| | | image | image | image | image | |
| | | | | | | |
| | +--------+--------------------------+ |
| +---images-container--------------------+
| |
+-------------------------------+
To only see one of the images, One div container of all the list items (including the ul tag) will set the dimensions of the frame, that will be the same of one independent image (because we'll use all the images with the same dimensions) and also will hide the overflow to avoid to show more than one (as the effect of an old movie reel, one frame at the time)
+-----------------------------------+
| Window |
| +---ul-container----+ |
| | | |
| | | |
| | image | |
| | | |
| | | |
| +-------------------+ |
| |
| |
+-----------------------------------+
When we press one of the buttons (right or left) it will affect the position: right of the ul container, that contains all the images, and it will move dependind of the position that already have.
First it will get all the images as an array and set the variable that will control the position of the images like the following example:
VAR container = get the ul tag that contains the main images;
var position = we start with 0 because is the current position;
It will read if the container can move to the right if there still images (the following example is with 400px width images so the extreme right position is 1200), if is not images it will reset to the first one that is 0 position:
FUNCTION rightButton
IF position is >= 0 and <= 1200
add 400 to the position variable
set THIS value to the ul tag container
ELSE
reset the position of the variable to = 0
set THIS value to the ul tag container
It will read if the container can move to the left if there still images (the following example is with 400px width images, so the extreme left position is 1600), if is not images it will reset to the extreme left position:
function leftButton() {
IF position is >= 400 and <= 1600
substract 400 to the position variable;
set THIS value to the ul tag container
ELSE
Reset the position variable to the extreme left = 1600;
set THIS value to the ul tag container
To make the overlay effect for the buttons and the reel of thumbnails, we will use the style properties:
z-index: 2;
position: relative;
Also their ul container and the li images must have the position: relative; property, and we'll set the positions of the elements with the left and right position.
For the container, we'll use the flex property of display, and we'll hide the overflow letting to the container as the frame control, in which we'll apply the transition effect.
To make the transitions we'll select the container as the element in which we'll apply the hover selector and we'll affect the left postion of the buttons and the top position of the reel, also we will use the transition effect to make the movement effect, with the speed curve as linear to have the same speed from start to end, also we'll apply 2 seconds as the timing for this effect, and last but not less important, we'll use the prefixes to make them work in all the browsers.
We can see an example below:
#container:hover > #Onebutton {
LEFT: the pixels that we need to move;
transition: left .2s linear;
-PREFIX-: left .2s linear;
}
#container:hover > #reelContainer {
TOP: the pixels that we need to move;
transition: top .2s linear;
-PREFIX-: top .2s linear;
}
We use > as a selector that indicates that we want to affect the child of the div container.
To make possible the reel of images movement, we'll have a div with divs inside, that will contain the thumbnails, and also 2 buttons for each side.
DIV container
DIV IMG
DIV IMG
DIV IMG
DIV IMG
/DIV
<--+
+---------+
| +-----+ |
| | | |
| | | |
| +-----+ |
| +-----+ |
| | | |
| | | |
| +-----+ |
| +-----+ |
| | | |
| | | |
| +-----+ |
| +-----+ |
| | | |
| | | |
| +-----+ |
+---------+
+-->
And we'll use display: inline-blick and position: relative to make them look like a reel
+---------------------------------+
| +-----+ +-----+ +-----+ +-----+ |
| | | | | | | | | |
<--+ | | | | | | | | | | +-->
| +-----+ +-----+ +-----+ +-----+ |
+---------------------------------+
To move the movement as an infinite carousel:
1. First we'll set the left position and get the value to convert it to a number, like the following example:
- After the DOM is loaded, we set the left position.
EVENT listener when the DOM content is load and active a FUNCTION
get the firt image and set the left position = 0
get the second image and set the left position = 0
get the third image and set the left position = 0
get the fourth image and set the left position = 0
- After, we set the variables for each image and get their values:
VAR firstImage = get its left position value;
VAR SecondImage = get its left position value;
VAR thirdImage = get its left position value;
VAR thirdImage = get its left position value;
- And finally we get the values and convert them to numbers (we need one variable for each image because it will have different positions)
firstNumber = get the number value of the firstImage VAR;
secondNumber = get the number value of the firstImage VAR;
thirdNumber = get the number value of the firstImage VAR;
fourthNumber = get the number value of the firstImage VAR;
2. Once we have the values for each image, when the user presses one of the reel buttons it will change this values, reading first the actual value and then setting again, like the examples below that just apply to one image using the left button
IF firstNumber is == than 0
firstNumber = the extreme right value position;
apply THIS value to the left style of the firstImage
ELSE
substract the width value to the firstNumber VAR
apply THIS value to the left style of the firstImage
};
(Note: in the right button instead of substract we'll add the width value to the left property of each element) Example of the width and movement to the extreme right:
- 240px - 240px - 240px - 240px
+---------+ +---------+ +---------+ +---------+ +---------+
| | | | | | | | | |
|firstLeft| | <--+ | | <--+ | | <--+ | | <---+ |
| | | | | | | | | |
+-----+---+ +---------+ +---------+ +---------+ +---------+ ^
| |
| |
+---------------------------------------------------------+
+ 816px
3. And finally to make the desired effect, we'ill apply the transition effect with 3 seconds as duration and the linear effect, also with the corresponding prefixes, like the example below:
reelImages {
LEFT: 0px;
-PREFIX-: left .3s linear;
}
(we use 0px as the value for the left position because we already are changing this values from javascript)
Now to make them match with the main image when the user press one of them we'll set an independent function for each thumbnail, that will indicate to the
- container its left position knowing the specific position for each match.
FUNCTION moveTheRightPosition
get the ul container
apply the left position style
To get the match between the display image and his text description, we can know which image is being shown just with the value of the right position of the container, because we control the container with that. So we just need to know what is that value.
First, we need to wait until the DOM is charged, then just read it and finally apply it with a switch statement.
EVENT content DOM load
call function that read the right position of the container
Function rightPosition
get the ul container and read its right position
As we know the switch statement can receive "strings" as expressions, so we don't need to transform the right position value into an integral. Also, we made an independent function to call it every time that the main images of the slide show change.
The following is an example of how we'll apply the text to match.
FUNCTION changeText (leftPosition)
SWITCH(leftPosition)
case 1 :
get the box = first text
BREAK;
case 2 :
get the box = second text
BREAK;
case 3 :
get the box = third text
BREAK;
case 4 :
get the box = fourth text
BREAK;
This is an specification that will help to load the document faster, so first we'll use data atributes to indicate the src of each image.
<img data-src="source" alt="">
<img data-src="source" alt="">
<img data-src="source" alt="">
<img data-src="source" alt="">
Then, we will set an event listener that will action the function loop that will apply the img src to each one.
EVENT listen when the content is loaded
VAR counter starts in = 0
VAR to get each image of this block
FUNCTION that works as a loop
get one of the images and apply the DATASET SRC
add one to the counter variable
IF the counter is < than his LENGHT
make this function again
XXXXXXXXX
XXXXXXXXX
XXXXXXXXX
XXXXXXXXX
XXXXXXXXX
XXXXXXXXX
XXXXXXXXX
- It will work just with specific number of images and text descriptions.
- If one of the images is changed, it is necessary to change his data attribute.
- The text can't be too big.
- All the images needs to have the same dimentions
+-------------+-----------------+-----------------+--------------+----------------+-------------------+
| Window | User | Main images | Text Box | | Counter |
| | Actions | frame | | Transition | Variables |
| | | | | | |
+-------------+-----------------+-----------------+--------------+----------------+-------------------+
| |
| The DOM The lazy load |
| content is+-----------------> charge the images The first text |
| loaded +--------------------------------------> content is |
| loaded |
| It shows + |
| the first <-----------------------------------------+ |
| image and The transitions |
| his text are activated |
| + The user pass and shows the |
| +-----> the mouse over +---------------------------------> buttons and reel |
| + |
| It shows | |
| the overlay <--------------------------------------------------------+ |
| buttons and |
| reel |
+-----------------------------------------------------------------------------------------------------+
When the user press one of the main frame buttons
+-----------------------------------------------------------------------------------------------------+
| |
| USE CASE ONE |
| |
+-------------+-----------------+-----------------+--------------+----------------+-------------------+
| Window | User | Main images | Text Box | | Counter |
| | Actions | frame | | Transition | Variables |
| | | | | | |
+-------------+-----------------+-----------------+--------------+----------------+-------------------+
| It shows |
| the overlay |
| buttons and |
| reel |
| + + The user The images move The counter |
| | | clicks on the to the left, because +----------------------------> variable-adds |
| | +------> right main +--->it adds pixels to + one number |
| | button the right position ^ |
| | | |
| | The user left The text box | |
| | the hover area <---------------+ change to match <---------------------+ |
| | + with the variable |
| | | number |
| | | |
| | | |
| | | The transition The Itahideithe |
| | | is activaterd +-->abuttonsdtood |
| | +------------------------------------------> and this hide +-> this hide the |
| | the buttonshi ilsel with thumbna |
| | |
| | |
| | The user The images move |
| +----------> clicks on the to the left The variable |
| left main +--> because it +---------------------------------->-subtracts-one |
| button subtract pixels number of its |
| for the right value |
| position ^ |
| The text box | |
| The user left change to match <---------------------+ |
| the hover area <---------------+ with the variable |
| + number |
| | |
| | |
| | The transition The Itahideithe |
| | is activaterd +-->abuttonsdtood |
| +------------------------------------------> and this hide +-> this hide the |
| the buttonshi ilsel with thumbna |
| |
| |
+-----------------------------------------------------------------------------------------------------+
When the user press one of the thumbnails in the reel.
+-----------------------------------------------------------------------------------------------------+
| |
| USE CASE TWO |
| |
+-------------+-----------------+-----------------+--------------+----------------+-------------------+
| Window | User | Main images | Text Box | | Counter |
| | Actions | frame | | Transition | Variables |
| | | | | | |
+-------------+-----------------+-----------------+--------------+----------------+-------------------+
| It shows |
| the overlay |
| buttons and |
| reel |
| + The variable |
| | Clicks in change to the |
| +-------> one of the +------------------------------------------------------> specific number |
| thumbnails of the image |
| + + |
| +------------------------------+ | |
| | v |
| v It, activate a |
| The text change function to read |
| to match with this number and |
| the variable match it with the |
| number specific right |
| Removes the The main image position for the |
| mouse for change its main frame |
| the main <-----+right position + |
| frame to match with <----------------------------------------+ |
| + the one that the |
| | function indicates |
| | +---------------+ |
| | |This functions | |
| | |only works when| |
| | |the user press | |
| | |one of the | |
| | |thumbnails | |
| | +---------------+ |
| | Hides the main |
| | buttons and the |
| +--------------------------------------------> reel of thumbnails |
| |
| |
+-----------------------------------------------------------------------------------------------------+
- The buttons and the reel appears in transitions when the mouse is over the main frame image?
- The images go to the next when the right main button is pressed?
- The images go to the previous when the left main button is pressed?
- The text always match with the showed image in the main frame?
- The image in the main frame match with the one that was selected in the reel of thumbnails?
- When one of the reel's buttons are pressed, the reel moves to the correct direction?
- If the mouse isn't over the main frame image, the main buttons and the reel of thumbnails are hiden?