Did you know FaceySpacey is the creator of Redux-First Router and Universal?
The Startup Incubator.
Your one stop social media shop
1. Speccing
2. Branding
3. Coding
4. Marketing
Resource Categories:
Technical
Non-Technical
Refer A Friend
DEVELOPMENT TOOLS 1 - VERSION CONTROL (Mercurial)
CONTRACTING 2 - TOP 10 EASY SITE CREATOR TOOLS
Subscribe
JQUERY 3 - EMBEDDING JQUERY PLUGINS
So as I mentioned my first forays into the world of jQuery included embedding copy/paste jQuery plugins. A jQuery plugin is basically 3 parts:
1) PLUGIN LIBRARY CODE - a mini sort of framework that you embed into your page similar to how you embed the entire jQuery library. You won’t even need to look at this code--that’s the whole point. You don’t have to worry about its complexities.
2) THE HTML - corresponding HTML that the jQuery plugin controls. So if this was a slideshow plugin, here would be some HTML that lists photos on a page. The jQuery plugin will do something like hide all but one at a time, and transition to the other photos by unhiding and hiding them consecutively to create the slideshow effect.
3) JQUERY CLIENT CONFIGURATION CODE - a bit of simple jQuery you embed on the page with configurable properties that let you configure how the plugin works. For example, if the plugin is a slideshow, you can configure the time between transitions.
For our example, we’ll use a slideshow plugin we at FaceySpacey recently used on http://www.CrimeTV.com:
http://nicolahibbert.com/demo/liteAccordion/
Go to that page really quickly and examine it. It’s a quick tutorial on how to install and configure that tutorial with a demo of the result you will get at the top. That’s how all these jQuery plugins come--i.e. they come with a demo and tutorial on a page or two. The idea is you can easily grasp it and implement it by copying how the demo uses it.
Let’s examine their code and pinpoint the 3 aspects highlighted above.
1) PLUGIN LIBRARY CODE
<head> <link rel="stylesheet" href="liteAccordion.css"> </head> <body> ... <!-- Before the closing body tag --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="liteaccordion.jquery.js"></script> </body>
2) THE HTML
<div class="myAccordion"> <ol> <li> <h2><span>Slide One</span></h2> <div></div> </li> <li> <h2><span>Slide Two</span></h2> <div></div> </li> <li> <h2><span>Slide Three</span></h2> <div></div> </li> </ol> </div>
3) JQUERY CLIENT CONFIGURATION CODE
<script>
$('.myAccordion').liteAccordion({
slideSpeed : 800,
containerWidth : 960,
autoPlay : true
});
</script>
So let’s start with #1 and #2 as they are the least verbose. #1 is just embedding the plugin library code:
<script src="liteaccordion.jquery.js"></script>
That points to a place on your server where the code that does all the heavy lifting that you don’t need to worry about.
Then the configuration code in #3 is simply calling the liteAccordion() method that the library code provides on a standard jQuery object built from a selector that selects an element in the HTML from #2, i.e. the div with class “myAccordion”. The liteAccordion() method takes a block of configuration settings (an “object map”) as its single parameter, and obviously you can see that they do things like adjust the “slideSpeed” and set it to 800, etc.
So now if we go back to #2, the HTML, and look at the markup there you will see that the main div containing everything has the class “myAccordion”. Within that div you will see repeating similar HTML structures. These are the panels in the accordion. The overarching idea is that the plugin will know what to do if you structure your code precisely like this. You can put whatever content (i.e. text) in it that you want, but the elements need to be nested precisely as they are above. And that’s it.
You don’t need to know much more except to copy the markup and replace it with your own text (and images, e.g. when dealing with slideshow plugins), then call the plugin method on the parent element that contains the structured markup, and finally pass to that method some configurations of your own, such as the speed with which the accordion should transition. And bingo! You’re done.
Plugins are a great way for beginning web developers to breath life into their pages. You’re going to want to google things like “jquery slideshow plugin” or “jquery accordion plugin” etc, and you’ll see that there are tons of plugins. More specifically you will see that tons of blogs have compiled lists comparing the top plugins for the given interface you’re trying to build. Here’s an example:
http://slodive.com/freebies/best-jquery-slideshow-gallery-plugins/ . Go there and find your favorite and try to make it work on a web page immediately. Just create a basic text file with the extension “.html” and copy/paste their demos properly and then open it in your browser to see. Don’t waste time before you get one of these to work and see how easy it is. Good luck!
SMM 3 - FORMULA TO FIND INFLUENCERS