Now that we’ve laid the structure for our fancyBox plugin it’s time to make it work.
#Fancybox responsive resize iframe code#
TIP: Place this code JUST before your closingtag. We’re basically telling our HTML document that once it loads up to load jQuery and execute the “fancybox” function on any HTML element with the class “.fancybox” on it. This is a piece of cake (even if you’ve never written jQuery!) Follow along and add this bit of code as I have below. Next we must write a couple lines of jQuery to attach the fancyBox to our page. You can do that by adding the following code to thesection of the website. Once we do this we just need to call up the fancyBox and we’ll be ready to make this work! We want to load the “” in the source folder. Add the follow code in the portion of your web page. We now need to establish the link between the fancyBox CSS file and our webpage. Place this code in theportion of your website. We can even link to what will always be the latest version of jQuery. Long story short, a CDN makes your website load faster. We’re going to do this from an external website or what’s known as a “CDN” (Content Delivery Network). (NOTE: We’re not going to be using all of the fancyBox files in this tutorial, but each of them affords you different features for your gallery/display.)īefore we can use any jQuery plugin we must load jQuery into our website. Into this folder we will drag all of our fancyBox files that we downloaded.
I right-clicked on that folder in the Files panel and hit “New Folder” and I named that folder “fancyBox”. I have already created a folder called “js” to house any JavaScript documents or plugins. We will be dragging these files into our Dreamweaver site in just a moment, but you want to save the files so you don’t have to keep re-downloading your fancyBox! Once you download the file, unzip it and find a place on your hard drive to store it.
0 kommentar(er)
