how to make a lightbox on shopify

so i have a client who has a blog on,shopify,and something i did for them was make a,very simple lightweight,uh photo gallery or lightbox gallery,using just a little bit of javascript,and,relying on one of my favorite javascript,plugins called lightbox,now what the photos you're seeing here,aren't actually the same photos that are,in these thumbnails,if i go and i inspect the element you'll,see that,the image tag actually it has in its,source,a reference to westfest zero one,underscore compact and the rest are like,that but,the a tag doesn't have that extension,compact it's actually going to the,photo at its original size so here is,just the smaller,they're smaller in size but they're also,a smaller file size so they can be,downloaded quicker and if someone's on,mobile it's not going to chew up their,data,downloading these super high resolution,images but when you click it,the photo that you're served up is,actually the high resolution image,so the problem that this is solving is,when you upload files into the wysiwyg,in shopify and i'll just edit this photo,here,you actually don't actually doesn't make,a an,a link right away for you let alone into,a gallery,it does give you this option to choose,different file sizes such as pico icon,thumb etc,and for these i've all chosen compact,these these are files actually,are created for you by shopify as soon,as you upload an image which is neat,they're not generated every time you,choose a new size,they're already there waiting for you,but let me just turn off,the javascript i have for this,and i'm going to reload this page,so i have these photos and actually,clicking on them doesn't do anything,as i said before in the wysiwyg editor,it's just going to put a bunch of image,tags in for you,there's a little bit of css happening,but that's just for my own css file,so let's go back turn these on oops,oh my god,save that,reload this page,and we are back to having our photo,gallery,so how is this done well,after you upload your photos into the,html,you're just going to put a small little,wrapping div,around your images so here i have the,image,image image and i have just this opening,div which has a class of gallery uf,and be sure to close it so,over in my javascript file and you see,i've uploaded lightbox and gallery,in the gallery i've made over my,javascript file which is super short,it's only 40 lines and that's,with a generous white space i'm going to,be looking for,any element on that page that has a div,with the class of gallery uf,um the next step is i'm going to make an,array of extensions so as i showed,earlier that,with the compact extension extensions,exist for all your photos whether you,choose to show the pico thumbnail the,icon the thumb thumbnail,i'm going to make an array with all,those variables so,if i do happen to find a gallery,based on this variable what we're going,to do,is we are going to look at all the,images look for all the images that are,within that gallery,and for each image tag,i'm going to grab with the sources,then i enter a for loop and so 4i as,long as i is,less than the length of the extensions,array,what i'm going to do is i'm going to,make a variable called new source,and new source is the same as image,source except i'm replacing extension,with a period if you notice up in my,extensions i actually have underscore,pico period,and underscore thumb period the reason i,just didn't leave it at,for example underscore medium is because,there's a real,chance that someone could upload a photo,that has underscore medium somewhere in,the file name,and if my uh array didn't include that,include that period which would signify,you know,once you put a period you have to print,a file extension it's definitely gonna,be the end of it,so if i didn't put that i'd be ripping,out the word medium right in the middle,of a file that could have it,in a place that makes sense to them and,now i'm just swapping out,that extension for a regular period,saying no no this is the end of,the the file so once it does that,extension,if the new source variable is a shorter,length than the image source meaning,there actually was,a replacement done i want you to stop,the for loop and,before we move on to the next image,we're going to wrap,this image tag in an in an a tag,it's going to be a pointing to the,location of the original,original photo and we're going to put a,data attribute called,gallery now where this is coming from is,actually lightbox gallery which is a,plugin i really love,so lightbox is been around for a long,time eight years and i don't know when,this page was updated but i love it,it's made by this gentleman or or,actually woman i'm not sure,what sex that uh what gender that name,would be but,it's really simple but what it does it,does beautifully so here we,have an example of two individual images,so clicking it and if i click the arrows,it doesn't actually go anywhere it'll,just make a light box that one image,but you can group them together so,this is a four image photo set and,clicking the arrows will,bounce around within that gallery and,what's nice is you could have multiple,galleries on a single page as long,as their uh data light box,is unique this as long as this,attribute's unique they'll only bounce,around within that,image set that's pretty much it that's,all you have to do,you can just choose that to upload your,photo any size you want,um again like if i chosen the 1000,because i want this to be shown at 1000,and i displayed it,well there it is but as you see that,took a little bit of download,imagine doing that you know 10 20 times,and maybe someone doesn't even want to,look at every photo uh,so the advantage being i just did the,thumbnails and the thumbnails are going,to give you a link to the high,resolution image,and as long as i've keep wrapping my,little image sets in this div tag,lightbox and the script i i wrote are,going to be able to take over,so that yep that's it super simple if,you're watching this video,on my uh blog i'm gonna have,just the the script actually written out,so you can copy paste and a quick little,discussion about explaining,anything i might have missed in this,video alright

Congratulation! You bave finally finished reading how to make a lightbox on shopify and believe you bave enougb understending how to make a lightbox on shopify

Come on and read the rest of the article!