Dynamic CSS Grid Responsive Image Gallery Using PHP and MySQL (PART-1)

so hello guys welcome back in this video we are going to take a look how css grid system is work for building responsive layout for your website okay also we are creating with the help of css grid this gallery here you can see that all the images is look dynamic and also we are fetching images from database [Music] with the help of php and mysql so let's start here you can see that i have a main index dot php another is style.css css styling purpose okay and i'm uh linked this style sheet in the header so start with creating the class main container within the container we have [Music] we have another day with the class image okay this contains a main image so in image division we have image stack with the source images so we are directly featuring images from database with the help of php okay also we have div inside the gallery container with the class name text in this dev we are displaying all the title of of the image okay title okay so uh for fetching all images from database i have one database name called example and there i have created one table name called grid and also i am inserted 7 images images name and title okay you can also create this similar structure so start with php first of all we need to build a connection so mysqli connect is a function used to build a connection to the server database host is localhost root username password is blank by default and database name is example xa and pne in our case so and a query queries select on record from table name called as grid okay and run the query so for that mysqli query function is used to run and this will require two parameter one is connection another is query variable [Music] okay so first of all checking if minus given li number of rows function which require one the run query run variable is greater than zero that means if we are getting more than zero result then we uh iterate through uh something uh loop structure so in my case i'm using while loop so create one variable where you want to fetch your old result and with the help of mysql page underscore ss oc associative or also you can use array also mysql hiring function and this also requires similar run variable okay so we iterate the gallery container okay so uh here it's time to break the php here okay cut here and paste before the closing of gallery container view okay so here for a fetching dynamic image name we are using inside we are using inside image tag the php tag okay echo image we are not created till so uh page all record so we are storing in the variable image of row the similar name row of image the database table column this column name image and also we want to fetch the title drop title and database table column name time okay so we are stored this uh images in the variable image and uh displaying here and similar way in the text displaying the title so save it so we are getting the images all seven images that we are stored the name of the image in the database table link and this image folder contains all in all seven images okay so it's time to styling the images okay this is basic for all margin and padding equal to zero first of all take this container so class container so we are using a css grid for that display declare grid and another great template column how many column you want to uh include or do you want in a single column okay so we want six column okay so that uh we using fraction 1 fr 1 fr and so on until six okay for simple we are using repeat sixth column with one fraction and also we want a gap between this column so create gap point to parameter let's see it will not affect so close it further after that we have a d called gallery container with hundred percent okay after that we have a image division where actual image is placed okay so singular way width is 100 of its parent height 300 percent its current and overflow if some uh overflow means if content is flowing out of the tube then we can hide that content for that overflow is overflow hidden is used after that we are targeting directly the image with the division image and inside the actual image okay so with height same hundred percent hundred percent we got basic grid okay so next thing is object fit object fit is covered so cover the parent width and height okay object fit cover next property is object position object position is 50 50 percent means x 50 and by 50 suppose if i'm commenting this property okay if you resize the window is decreasing the width of your window browser window okay so you can notice the image object is shrinking down and not in the center of we using the object position 50 50 percent means the content is basically at the center of that okay so apply some animation transition 0.4 second and animation type linear okay uh so also we want if uh we hover or that means if we hover the image over our image so we want this image is popped that if we hover on image so transform with scale of 1.4 okay same if you refresh you can see that if we hover that particular image the image is scared uh also we want uh this title of that respective image to the center of its uh center of its uh okay for that just take a look of the gallery so text tv is inside a gallery container if you want this title center of the image for that we need to display you need to set position with the parent parent option or take study position with relative and take the text text to position absolute from top we have 50 percent means half of the team and left fifty percent from top half and left half so middle of thirty fifty percent and fifty percent the color of text is white and font size 24 pixels save it so you can see that we are not getting that center this text into center so we need to fix this thing for that transform translate translate minus 50 from minus fifty percent from left and minus fifty percent from top if we say so we're getting the perfect image getting the perfect center at the particular title okay so people want if you hover that particular image so this title is come out so for that also apply animation transition [Music] 0.4 second linear so we want if we hover on the gallery container then only this text leave is shown for that set opacity to zero so initial stage we are adding this our title and if you hover over to image this text device show okay so for that opacity create one refresh if you hover so you can see that this title is shown with a nice transition effect animation effect okay so also we want animation on to that okay so uh animation give any name move down okay point four seconds and in this case we are using freezing out using out animation type for the uh using animation use and add keyframe keyframes and the animation name and together the properties so for basic one percent we are going to minus going to 15 from top for 35 percent or sorry 50 percent we are down to 35 and 50 percent oh sorry hundred percent we are going to down to top 50 means half of the day so save it if you refresh so we are getting this cool effect if you hover that particular image the title is come from top from 10 35 and finally 50 percent that means the center of image center of d so we are getting our basic the gallery function galactic effect [Music] you so we want to create the dynamic gallery for that we need to target the main uh container and its child divs so main driver container is container class and inside we have this divs for that we are using the css and child selector so main container all the dues with and child selector first we are using first chart uh targeting first check so we are also using another grid property called as great we can use great column span okay you can see the effect with this so if we target first grade so this will span the two column this will span two common okay similarly apply this time to different span three okay this segment secondly is pan three and unit also make it four so this will take all to four okay you can create your own red styles the gallery styles okay so i'm adding all the great column and rows and here you can see that this uh cool grid with the help of css grid okay one more thing is you can add this property grade auto rows that means uh it will generate more dynamic things yeah first rows row is 150 pixels 150 pixels and second row is 350 pixels and 350 pixels and so on okay so we are generated this cool grid so final thing to add the media query for responsive design for that and that is media small device pixels okay so we want the gallery container to display only two column so for that grid template column repeat repeat two times with one fraction save refresh inspect element toggle device and 768 with 12 so you can see that we're getting this single images so thank you guys for the css grid responsive image gallery with the help of php and mysql okay so uh uh upcoming next video uh in this playlist we are only take a look how we can add the uh what i called to light box effect that means if we click that particular image so this image is come out with uh with a model window okay so thank you guys see you there

Channel: raj lanjewar

Views: 2,518

Keywords: dynamic grid gallery, css grid, php gallery, php mysql gallery, css gallery, lightbox gallery, image gallery, responsive css gallery, responsive gallery, responsive grid gallery, mobile device responsive gallery, grid, html grid, what is css grid, css grid property

Id: 9fw84GaM8FQ

Length: 29min 31sec (1771 seconds)

Published: Tue Sep 01 2020