Create Responsive Full Screen Image Viewer and Image Grid using HTML5, CSS3 & JavaScript | Example 1

hey guys and welcome back today we are going to create this image we were using only HTML and CSS so before creating this image viewer we are going to create this image grid also and if you just want to create this image grid you don't have to follow this video I have already created and posted one video in which I have created this image grid so you can follow that video the link is in the description but if you want to create this image viewer also then you can keep following this video we have the next and the previous button YZ and below the image we have this caption and on the top right corner we have the close button I have created this starter files folder which contains all the images that I have used so anyways let's quickly create a text document and rename the file and add dot HTML extension to make it a HTML file then you can open it up in any text editor that you have then create HTML tag and hit enter like the title now to ensure proper rendering and touch zooming in mobile phones and other touchscreen devices we are going to use our beta tag then get inside the body tag and let's start with the image grid section let me just put up the comments read section tag and the glass container then let's start with that title or this container you then get below it and create a div tag and right that class row space IMG - grid all right so this will create a row in which we are going to have all the images column by column let's start with the first column so get inside and let's define the columns one by one you fit image class will be used to fit the image in the columns then copy this and paste it twice so that we can have second and third columns you all right then get inside the dev of the first column and create another div inside it light class row and inside this second div containing the class row create a IMG tag and write the source s IMG /big - one dot jpg since the images are in the IMG folder we need to specify the complete address then space on click attribute open model open bracket close it semicolon current slide within brackets one this on-click attribute will make sure that if we click on this pig then these two functions will be executed and we are going to define these functions in the JavaScript later so the first function will open up the model or the image viewer and the second one will make sure that the first image is displayed we will see how the JavaScript functions will work later so don't worry about that right now let us just finish the HTML part first alright then copy this entire day beast it make this pick - - and current slide - then copy both of these give tags biess them in the second column then change the names of the images as well as the index in the current slide function alright then copy this entire day bees did you and make appropriate changes then again copy these two deep tags piece them in the third column and make appropriate changes you all right so we have all the images now get outside this event Code section and let's start with the model model is going to define the image viewer so create a div tag with class Moodle and ID s my - model let me just put up the comments you then let's start with the model content create a div tag and write that class Moodle - content this will contain all the content for the model that is the header the body in the footer let's start with the header and in the header we are going to have the close button so create a div tag and right class Moodle - header let's define the close button create a span tag and plus close then unclick attribute clothes model so when we click on this close button this close model function will be executed and in the text part and person times semicolon this is the code for cross alright get below it let's define the previous and the next buttons which are going to be used for quick maneuvering through the images okay so create a etag that is the anchor tag and class leave prev on click attribute value has changed slides brackets minus one so in effect when we click on the previous button it will execute the change slides function and we are going to pass minus 1 as the value for this function so that we can go back to the previous image let's say we are on the fifth imagine if we click on the previous button we will be taken to the fourth one that is 5 minus 1 that is 4 and in the same way in the next button we are going to pass only one that is a plus 1 so let's say we are on the fifth image and we click on the next button then the index will be sixth and the sixth image will be opened up and we are going to see how we will execute or how we will achieve these things later when we are using the JavaScript for now we just need to focus on the HTML and let's get on with this and let's finish this first and in the text part we can write a code so that we can get those previous in the next buttons icon so for the previous button we have M percent hash one zero zero nine four semicolon all right copy this entire line and paste it change preview to next because this one is going to be the next button then within the change slides make it one instead of minus one so that we can move to the next image and in the text part let's make it one zero zero nine five which is the HTML code for the next button alright apart from the close button and the navigation buttons the other important thing is the index number so that we can know which index we are currently on so for this let's create a span tag class number text and let's have the IDS index - number we are going to use these clasps and these IDs later when we are using the CSS so that we can apply the formatting x' s and when we born for now I don't get too much into the detail of these formattings and everything just just forget about everything and let's continue with the HTML and the header of the model ends here so now let's start with the body of the model basically the body of the model is going to contain the image that is the main content of the model so let's define a div tag and class Moodle - body then let's define the model footer in the footer we can have the caption for the image if you want create a div tag in the class s Moodle - footer so this will be the footer of the model now let's define the model body in detail so that we can have the image that we want so we will create the image viewer or the slideshow so create a div tag and class my - slides and data index number 1x7 this data index number is a data attribute now one very interesting thing that we are using here is the data attribute which is used to store custom data which is private to the page or the application so in a way the data which we are going to define under this data attribute we can use them or we can extract them using the JavaScript and then make this data as the index number of the image so in short we can say that this data attribute gives us the ability to embed custom data attributes on all HTML elements which means these attributes are going to have the data according to our need it depends upon us what we want the name of the attribute to be and what value we are going to define inside for example I have given the name data - index - number you can give any other name but it has to start from data - and there are some rules while defining the name of the data attribute like that attribute name should not contain any uppercase letters and must be at least one character long after the prefix data - and the attribute value can be any string that you want and as I said already I am going to extract this data or this string from the data - index - number attribute and then use this value as the index number of the particular image so it will be very clear when we define everything in the JavaScript and when we run trial on the browser so let's just keep going then get inside and define the image for that use the IMG tag source IMG forward slash pick - 1 dot jpg Plus portrait - image space image Boyd first image within the alt attribute you can enter any alternate text that you want for the image if the image is not displayed then whatever text that you have written in the alt attribute will be displayed this will define one image let's copy this entire div tag taste it six times so that we can get seven images in total you now what we have to do is change the data index numbers starting from 1 up till 7 alright then let's change the alternate text for each one of them first in a second he made her image 4th image and so on then we have to change the name of the images so that we can get different images and one more thing for the images which have great orientation we use portrait - image class and for the images which are having the landscape orientation we use landscape - image class for that these classes will be defined in a way that the images whether they are portrait or landscape they will take the entire width of the screen or the height of the screen depending upon the orientation of the image if you are using any pics other than the one I have provided in the starter files make sure if the image is portrait then you use this or trade - image class with it and if the image is a landscape one then he used this landscape - image class with it it's very simple then make the appropriate changes to the list of the images you so this will define the images completely then get inside the model footer so that we can quickly just specify the footer for this model we can just create a P tag that is a paragraph text and ID as caption so footer will be used to display the caption for the image and this caption we are going to extract from the alternate text attribute or the old attribute from the respective images so with this we have completed the HTML part and we can move to the CSS so quickly get inside the head tag again and define one external CSS file for that create a link tag and in the reference part write style dot CSS and since I am going to keep the HTML file in the CSS file next to each other I am NOT defining the location of this CSS file if you plan to keep the CSS file in a different folder you may have to define the relative location of the CSS anyways you can see I have created the CSS file in the same way I created the HTML file that is create a simple text document then change the name of it and make the extension dot CSS and it will become the CSS file then open it in the text editor let's start formatting the body I am going to do some basic style formatting so they are pretty simple you can just follow the video you since there's no space between the s2 and dot title that means both of these selectors are siblings of each other so the styling will be applied to the h2 tag containing the class title and not to the other h2 tags then let's make the RO class flex you all right you dot fit - image space IMG you with 100% height 100% this will fit the images within their containers section because section is a tag and we don't have to use dot or hash selector before it and padding 50 pixels space 120 pixels all right then dot column padding-left fifteen pixel so this will add proper padding within the image grid dot IMG - grid space IMG margin-bottom fifteen pixels this is going to add margin to the bottom of each images in the image grid then transition 0.5 second phase ease property in CSS allows us to change property values very smoothly over a given duration from one value to another you can see where we have defined this IMG credit class and these are the IMG tags which are inside them so they will be referenced by this selection then dot IMG - grid space IMG : hover and this will add the hovering effect over the image grids you so we are using box-shadow to add shadow to the images when we are hovering over them you then let's start with the model dot Moodle display:none because we want a model to be hidden until and unless we click on one of the image grid position fixed left zeroed top:0 because we want the model to start from top left corner with hundred percent height 100% so that it takes hundred percent weight and height of the container overflow:auto background-color you can define any color that you want to define I'm defining a black color you can see that the model images are displayed and even the close button and the navigation buttons are visible so on refreshing this will be hidden because we have made the display as none for models so they will be hidden away alright and let's start with the JavaScript so that side by side we can define the JavaScript for the model and then define its styling as well so get to the part where we have defined the footer of the model and get below everything and just before the closing of body tag create a script tag right the source as model dot G s GS is the file extension for JavaScript we placed a script to load Moodle now this script tag can be placed in the body or in the head section of the HTML page so it depends upon our need when we want the JavaScript to be executed but placing the script at the bottom of the body element improves the display speed because script interpretation slows down the display so we want to delay the loading of the scripts until the HTML elements are loaded then again move back to the starter files folder where we have defined the HTML and the CSS files there we need to create one more text document rename it to model dot GS remove the dot txt extension then open the file in the text editor and it is ready and also we are using external javascript because it has some of the advantages like it separates the HTML from the JavaScript code it makes HTML and JavaScript easier to read and maintain we are not mixing up the HTML Javascript together so it's easier to read and maintain them as well as cached javascript files can speed up page loads so these are some of the benefits or the advantages viability refer to use external javascript but also it depends upon you if you want you can keep the JavaScript within the HTML file anyways get inside the model dot GS and let's start defining the functions let's start with the open Moodle function this function is going to open the image viewer by changing the display property of the Moodle class so it will open the image viewer only when any of the image is clicked so right document dot get element by ID within brackets within single quote my - model dot style dot display equals with a double inverted commas in line - flags so this line is going to change this display to inline flex and as a result the model will be displayed on the screen so this line is going to get the element which has the ID my - Moodle in the HTML page and then change its display property in the sky part to inline flex it's pretty simple if you read the words one by one and this document object is the owner of all the other objects in your web page so if you want to refer or if you want to select or if you want to make any changes to the page you need to use this document in short this document object represents your web page if you want to access any element in an HTML page you always start with accessing the document object because from using the document object you can access any part of the page you can see that in the browser now we have the buttons as well even though they are not functional right now because we have not defined the Associated functions of those buttons but they are there and we can see them all that images are there as well and we don't want all the images to be displayed at once so we will do that later anyways now you can see that even after the module has opened up the scroll bar for the HTML page is still visible and we don't want to have that scrollbar because there is no point having the scrollbar for the page once the Moodle has opened up so let's hide that scroll bar when the email viewer is opened the document dot body dot style dot overflow equals within double quote hidden so this line is going to change the value of the overflow property to hidden in the styling part for the entire HTML body so that we don't get that scroll bar when the model is active and you can see that now the scroll bar is only for the model and the buttons are there as well while opening the model we have done two things first is to change the display property of the model to inline flex so that it becomes visible then we have hidden the scroll bar for the body now in the close model function we need to do the exact opposite of the open model that is first we need to change the display property to none for the model and then secondly we need to show the scroll bar for the entire HTML body so I'm going to do the exact same copy the entire open model function Baystate make it close model then make the appropriate changes it's very logical and very simple whatever we have done in the open model function we are trying to undo them one by one you all right open the browser and you can see when we open the model we don't have the scrollbar for the body and even the close button is functional now you can click on the close button and the model will be closed and the scroll bar for the body is displayed again all right now let's declare some variables which we are going to use for displaying the images declare variable slide index GS and initialize it to 1 now let's call show slice function by passing the variable slight index GS show slides function is going to hide all the images in the beginning because you can see when whenever the model is opening all the images are displayed together and we want to hide all of them except the image which is clicked upon so we are going to get this done by the show slice function you and we will define this shoe flight function very soon defining the show slides let's define the next and the previous buttons function changes lights if you remember we have used the same function in the next in the previous buttons while passing plus 1 or minus 1 depending upon the buttons your slides slide index.js plus equals n so this is a short form which means show slides function will be called with the value slide index GS equals slide index j s+ n let's say the slide index GS has a value 5 and we have clicked on the next button then plus 1 will be passed on to the change slides function so that one will be the value of n so in effect that will mean slide index GS equals slide index GS plus n that will mean slide index GS will be incremented by 1 that it will be mean 6 and similarly if we have clicked on the previous button then the value of the n will be minus 1 so in effect that is going to decrement the current value of the slide index GS by 1 now let's display the image whose thumbnail was clicked so for that we are using current slide function call the show slides function with the current value of n you so now is the time to define the main function which is the show slides function you let's define one variable I let's define one more variable variable slides J s this will get all the elements which has my - slides class you equals document not get elements by class name within bracket double quotes my - slice so all the elements which my - slides class are now in the variable slides yes now we need to take into account the overflow and the underflow conditions overflow condition is the keys where we are already on the last image and the next button is clicked in that case we want the first image to be displayed again this is the overflow condition in the under flow condition let's say we are on the first image and the previous button is clicked in that case we will want the last image to be displayed again and now let's take care of these two cases if within brackets n is greater than slides in GS dot length then slide index J s equals 1 which means if the value of the end is greater then the number of images we are having in that case we want the first image to be displayed and to display the first image make the slide index J as two one slides J s dot length is going to return the number of elements in the slides J s variable now if the slide index GS is less than 1 then we need to open the last image if n is less than one slide index GS equals slight J s dot length so this means let's say we are on the first image and previous button is clicked that will make n less than 1 so in that case we want the slide index J s to have the index of the last image all right now let's hide all the images initially so that we can display only one image start a for-loop I equals zero I less than slides J s dot length i plus plus so this for loop will run once for each image and we are just going to hide these images so slides GS square brackets I dot style dot display equals none you refresh it and you can see that none of the images are displayed now the only thing left to do is to display the image which is clicked upon so for that slights GS within square brackets slide index GS minus 1 style dot display equals block we have written this - one because we start the counting from zero all right you can see all the buttons are working you now we can display the index number as well as the caption or that we have defined data attribute with each of the element containing the images so we are going to extract the value of the same attribute you so for that document dot get element by ID within brackets within single quote index - number you . inner HTML equals slights jas within square brackets slide index J s minus 1 not get attribute then within brackets within single code data - index - number so by this we are just extracting the value which is in the data I've an index - number and then putting the same value inside the element which has this ID index dot number so that we don't have to specify the index number again and again we are just using one element for displaying the index number of all the images one by one in the same way let's show that caption for the images and for this we will extract the data from the alt attribute variable images J s equals daaad get elements by class name within double-quotes image because all the images are having this image class so using that we can extract the value of the corresponding alt attributes so document dot get element by ID within brackets within single quote caption dot inner HTML equals images GS square brackets slide index J s minus 1 not Ald so this will extract the value which is in the old attribute from the currently active image and then put the same value inside the element which has the ID caption we have the caption you can see that so this completes the JavaScript part and now we can just format or style our webpage so that the buttons and the caption and the index numbers everything they all look better so get inside the style dot CSS again and let's start with the model - content and I'm going to do some stylings very quickly they are pretty simple you can keep pausing the video and try to catch up you so now the images are Center aligned you the model header contains the close button the navigation buttons as well as the index number so display as flex let's align them where the flags start justify content with space in between the close button is on the left so now you can see that the button and the index number are on the corners let's format the close button you right 25 pixel this is going to position the close button at a distance of 25 pixel from the right of the container [Music] then we get picked for dazzling fightin [Music] night and we can add the transition effect then there's style done navigation particles you top 50% so that so they are vertically at the center of the screen some bedding you all right you so the left button or the previous button is at its right position the right button has to be taken on the right side of the screen so for that we can use the dot next class you then the hovering effect over these navigation buttons you some transition effect [Music] [Music] now let's define the index number or the number text of each images and they are inside the Moodle header class so let's select them [Music] right now let's define the Moodle footer class so that we can style the image caption which is below the images you display as flex a line item at Flex end because we want them to be at the bottom then justify them in the center horizontally you then let's adjust the image sizes and as I have already explained that for the portrait images we are going to be using this portrait - image class for the landscape image we will be using landscape - image class so let's define those classes portrayed images are displayed according to the height of the screen so that they are not bigger than the height of the screen and height is 89 VH because we want to keep some part of the screen for the buttons the image caption and padding's in CSS we have two different types of length units one is the absolute second is the relative and for the absolute one we simply define it in centimeters or pixel and in relative length units we define the relative length units relative to another length property so this scale better between different rendering mediums and this 89 VH means relative to 89% of the height of the viewport and viewport is the browser's window size you can see that in the same way we are going to define landscape - image class and with that we will use bread you 69 VW means it will take the 69% of the width of the viewport or the browser's screen all right so you can see the images now and if you want to try you can try changing the size of the viewport and see how well the images scale to the size of the screen so with this the email divert is complete and we can just add the media queries to have the responsiveness for the website so that they look better on small screens or tablets or any other different screens so for that let's start with media query at mediaspace screen space and and within bracket max bit 768 pixel so the changes that we are going to define now will be applicable when the width of the screen is below 768 pixel basically below 768 pixel we would want to change the size of the close buttons the s2 tag or the number text so that they are small in small screens so that they don't take up much space of the screen because in small screens we are already running short on creams so we don't want to raise them having big close buttons or big big text so let's do that you all right you can make the changes as your wish you and if you cannot see the changes in the browser then you can use exclamation mark important rule when we use this important rule it overrides any other definition for the same value let's say the horn size for h2 is defined somewhere else in the CSS part and if you want that definition to be overridden by this one so you just write exclamation mark important [Music] you can see the effect so with this we have successfully completed the entire image beaver this was one of the very simple image viewer that we have built there's one more imagery word that will be coming in the subsequent videos so stay tuned for that it will be coming very soon I'm working on it also and apart from these if there's any topic that you want me to make videos on or if there's any topic that you find very hard to learn then you can let me know down in the comment section so that I can take up those topics as well and make videos on those topics so that I can help you better as for this video everything is finished you don't have to do anything you can go on use this image revert in your project or for practice for any purpose that you want so that's all for today I'm going to see you in the next videos so you know what you do we'll keep liking keep subscribing keep commenting keep letting me know that you guys are following my videos we will meet very soon till then take care and thanks for watching you

Channel: tanzTalks.tech

Views: 1,524

Keywords: tanz, tanzTalks, tanzTalks.tech, full screen image slider, fullscreen image slider, html, html css, css, css image slider, css slider, image slideshow, image slider, javascript, javascript slider, javascript image slider, javascript slideshow, html website, image gallery, responsive, full screen image viewer, image viewer html, full screen image gallery, image viewer, create image gallery css javascript, responsive image gallery, create image grid css html, create gallery in html

Id: wr-HT8oPSBU

Length: 62min 31sec (3751 seconds)

Published: Sat Aug 10 2019