JSFiddle - React, Tailwind, and code Playground
by clayshannon
HTML
<h2>Time To Get Serious with some Actual jQuery Code</h2>
<p>At the half a dozen point in the installments, it's time to get (a little) serious with some actual jQuery code. Actually, it won't be very much code; but that's a good thing. jQuery makes it very easy to spiffify (so I'm a neologist - sue me!) your site, and I'll prove it now. Let's go to the Images page and add a widget that will contain and display the images we want to add</p>
<p>First, I add the references to jQuery and jQuery UI to that page (download the jQueryUI files if you need to from http://jqueryui.com/; another option is to use a CDN (a hosted version of the files), but I don't think I'll do that with this example):</p>
<pre> <script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script>
$(document).ready(function () {
});
</script>
<h2>We will show some false feet here (faux toes)</h2>
</pre>
<p>Perhaps you noticed that I also added an empty jQuery “ready” handler – I will give it some code pretty soon, I reckon. Finally, I added some placeholder text just so we know we got to the right page when navigating during the testing period.</p>
<p>Now for the widget that will display the photos. I decide to give “Anything Slider” a try, as it is talked up and its usage documented in a book I own and enjoy, namely:
<a href="http://www.amazon.com/exec/obidos/ASIN/1449399029/garrphotgall-20" target="_blank"><img height="160" width="107" src="http://ecx.images-amazon.com/images/I/511uGrsGmyL._SL160_.jpg" /></a>
</p>
<p>So, using the instructions in the book (starts on page 312 for those following along at home), I download the zipped repository from https://github.com/ProLoser/AnythingSlider/ and then add the CSS and jQuery files below the Content and Scripts folders, respectively. I add anythingslider.css to the former and...