PHP Tutorial | Dynamic Image Gallery Using GLOB

thanks welcome to my channel my name is stink and today I'm going to teach you this image ability when you just click it here and it's open like this one next next previous previous okay so if you want to add more images you just copy your images okay you just copy and just paste go to your project folder I'm using the same ok just st doc this is my demo project and inside it just paste it here and image has been added so just refresh f5 for depression you can see here image automatically edit okay if you need more images just copy and paste it here that will automatically editor it here okay so we will do using a globe function and if you want to do title of that image so you need to add a database okay and so but this is the globe functions of PHP so I am NOT saying that you add the title of dynamic okay so so let's get into code so first we need to create a project okay so so first we need to project so just this I am on the same just create a project which is the PHP and the PHP underscore tutorial okay any tender and just drag and drop that file okay or just minute okay so just drag and drop your project inside in your code editor okay so it's a it's open my project this one but it's a design doesn't have any file so you need to create the file which is it here so the file which is the index dot PHP and index dot HTML s where you can create but I am creating index dot PHP just finish it here okay so this is the blank HTML files so first we need to type HTML tag okay just minute HTML HTML should be closed okay and here head section head section should be closed and tighten take and title text should be closed so this is the image gallery okay and here we want to add a body okay so we need to some container main container okay and inside I want to put the h1 or h2 whatever you just want to so image gallery control a sorcerer and now we need to run this files just open your browser and and type okay HTML computer is going to hang it's not into responding sorry for that so this local hosted here okay local host local host and forward slash and PHP and Xcode tutorial this is my todo 3 yes this is my project and hit enter so it's a run okay so now we need to add some images it here so first we need to some images so you just copy and paste from your computer okay so my images is on the desktop okay so just go to a desktop these are my images okay three images and if we will add more later so just create a new folder on your project so this is the PHP tutorial you just saw this is the email this okay and just paste it here so all we have added we want to add more images so just go to it here okay another folder I have and just paste it here in your project so I have added one two three four five I think so 6:7 images we have a copy and paste to do our project folder okay so the so it here you just type a PHP okay and PHP just it has a function which is the globe GL o B glow function okay and it x2 para parameters okay so first parameter is your folder name folder name in our project has images this f2 copy the name of your fridge of fire folder and just paste it here okay and put forward slash okay and after forward slash you just need to add a curly bracket okay and if we want to all the files all the files means all the files is all the files from this from this folder okay which has the jpg extension and we wanted to if your images has has a PNG extension as well all the star means all the files which has exchange extension is PNG okay so ctrl n so save and next parameter is the globe brush GL o globe globe brush this one okay and semicolon and just and just store inside the dir means a directory so just you need to print are and you see which thing it returns to control SSA and now replace the browser so it it you can see here ok this loop you can see here it returns the array okay image one all the images it returns zero position is this image one position has this image and two position have this image and three position over this image for the position of this image all the images be written in array so we need to so to get this images using the wild okay and follow whatever you just want to do I use that I am using the for each loop with here for H EA CH for each loop okay for each loop and just close it here okay so just copy and copy and paste this dir it here okay and this is us key n value pair so dollar key other value okay this minute and dollar value control s for sale and now we need to now we need to in now we in it now we need to add some air links and HTML just just close a PHP text and an open PHP tag okay PHP this open PHP def okay and inside I want to add image tags in IMG SRC okay SRC and SRC and put alt text okay so Alta take also have image name okay so just just just just put a PHP tag closing and PHP take I mean opening and closing tape and inside you want to echo that value okay if you need to remove this key as well okay just copy this value and paste it here okay and put a semicolon controllers for so now replace the browser so you can see here this image first image edit ok second image edit all the images it here's where here so we want to also the old tech just copy okay and just paste it here ctrl s and just so give it a style for so you need to add or I mean grip some some some links okay some links and some deals and some elements as well so first this copy just paste it here okay so rip incited view okay do-do should be closed and just give it a class because we are in a for loop so this is the come thumbnails okay and inside I wanted to okay this letter just control exit here and paste it here control SSA and now refresh so the same result will be here okay so now we need to give a style sheet so I am using internal CSS it here inside the head section okay so put it style and it stresses take should be closed okay so we need to write some CSS to add the to do or a specific bit and hide so body first we start the body okay body tag so body take its emerging is 0 by default it has some margin fading as well as 0 okay and background I want to a CCD okay control s for self and faster we need to change the thumbnail actually we want to this someone else is copy this is the class we have added the dot okay so thumbnail size width I wanted to a 30% okay and slot we want to a left okay and the margin we want to all of that for 10 10 pixel top top left right bottom okay all the sides and we want to take round big round F F F okay and we also want to appearing on 20 pixels suppose okay and box-sizing because we give you why we are giving the box sizing if you give the the padding so the container size will be increased so to to manage that for the respond once you lay out we just put a box sizing border border box okay and overflow okay I'll just give it overflow later control a so same and now repress so it doesn't it takes any effect okay why because we didn't say to the inside we have company I mean thumbnail and inside have the images okay so this is the images okay so images size width should be hundred percent means help 30% and 35% with with it's a hundred percent okay means the images will be hundred percent means completely covered the this thumbnail okay and height should be auto automatically adjusts art oh okay control s for sale and now we need to refill this browser okay so you can see here these are the images okay and and just so to make a center to for that we have a main tag which one this one this copy and it here after body we just paste it here okay give it a width and height so which I want to do 80% okay and Margie I want to zero pixels and auto top and bottom is zero pixel and left and right is automatically okay so Kontrol s4 say and now replace the browser so it's a it's a center now okay so just so give it a width is 25% controlled SSL and replace replaced so it's a it's not looking good okay control s yourself okay these are the images will edit automatically okay so we need to add more images just copy and paste your images so so where is my images is I think this copy this images I have already added but I want to add one more time just copy and go to your project and catch it here again okay so this is keep it okay this new images actually have didn't have any more images here just paste it here okay let me decide later mmm continue okay okay ts not not not actually and how the images inside now this demo this is the images just copy some more images copy and would your project okay and just paste it here okay just replaced it so now repress so the more images edited here automatically you can see here okay so it's look good okay so now we need to add a gallery like this one in just minute okay okay when you just click this will happen okay so just go to open your browser and type up NC box then then three box okay so just click it here okay and click it here okay and just download okay it's going to download okay so it has been downloaded you just open that folder okay so this is my folder this right-click and expect it here okay so now we need to so this is the fancy box we go to dista and we need to two files which is this one this copy and paste inside in your project so this is my project and paste it here and we now we need to add dead files okay so inside the head section to step okay this you can type error okay you just type like this one it's lies I mean link first we need to add a descriptive script X cryptic should be closed okay and SRC and SRC is the this jQuery I mean can see box and we want to also also our link href and this is the CSS file and related to the stylesheet okay so now we need to one more file which is the jQuery okay so jQuery put a jQuery CDN and just click this link okay and just click it here and just copy this link okay and come again it here and top up your all the files this paste inside the head section just remove it okay okay ctrl s for save and just go to the documentation fancy box documentation and click it here images and you just copy or this links okay and come it here you in your project it here and just paste it here okay so this is the image so we have replaced just a little bit so this is the image we have to replace just replace it here and this ctrl X and paste in place a bed okay and inside edge save we want to add also just copy this one okay let's copy and paste it there and has been done our image gallery okay so now we need to refresh okay when you just click okay okay okay just minute when you just click it's open okay okay so this is the image gallery so if you want to add a title of Headey here okay so just come this is the thumbnail and inside thumbnails want to edit title so just put h2 and h1 whatever you just want to do that so this is the title TI tle title of image this will from database you can add okay so that will dynamically and it's the caption as well so just remove this one in this copy okay just copy and paste it here so what is the caption I will show you just repress okay and just click it here okay so the caption will not come why okay so because it didn't put I think how the problem is okay control s for sale and now refresh please remove it here and click this is the caption okay so this will also comes this video is very long so for sorry for that so if you liked this video please subscribe my channel and I will come with the new things till then bye take care

Channel: Tech. Rudranshi

Views: 43,017

Keywords: php, image gallery in php, php (programming language), php tutorial, php photo gallery, image gallery, php tutorials, learn php, gallery, programming, html, image, jquery, tutorial, css, mysql, image uploading, dynamic, gallery project (software), file, javascript, coding, database, website, tutorials, web development, mysql (software), beginner, learn, ajax, bootstrap, java, upload

Id: U0qMcwWhZeU

Length: 19min 14sec (1154 seconds)

Published: Fri Mar 31 2017