Click here to Skip to main content
12,505,341 members (74,414 online)
Click here to Skip to main content
Add your own
alternative version


5 bookmarked

Web Site Extreme Makeover, Part 6 of 7

, 2 Nov 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Adding a Slider jQuery plugin and social buttons (Twitter and Facebook) and

Time To Get Serious with some Actual jQuery Code

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

First, I add the references to jQuery and jQueryUI to that page (download the jQueryUI files if you need to from; 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):

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
    $(document).ready(function () {
<h2>We will show some false feet here (faux toes)</h2>

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.

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: .

So, using the instructions in the book (starts on page 312 for those following along at home), I download the zipped repository from and then add the CSS and jQuery files below the Content and Scripts folders, respectively. I add anythingslider.css to the former and jquery.anythingslider.min.js to the latter.

I add three photos for now to test it out. The code in Photos.aspx between the asp:Content tags is:

<link href="Content/anythingslider.css" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="Scripts/jquery.anythingslider.min.js"></script>
    $(document).ready(function () {
<div id="slider">
    <div><img src="Images/JPoolGetty.JPG" /></div>
    <div><img src="Images/Billiards.JPG" /></div>
    <div><img src="Images/PoolHarder.JPG" /></div>
<h2>We will show some false feet here (faux toes)</h2>

This works fine, as you can see with your very own peepers: I add the rest of the images that I have so far.

As Rod Price () used to say, “Slide On!”



Eye Scream Social Buttons

Now let's add some “social buttons” namely for Twitter tweets and Facebook likes. This way if somebody sees the site and wants to let their friends or followers -- who may be in the market for a pool or pool work – know about it, they can tweet or like the page and help advertise it.

To accomplish this, I add the following code:

<script>(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); = id;
    js.src = "//";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

And now here it is in context:

<asp:Content ID="BodyContent" 
   ContentPlaceHolderID="MainContent" runat="server">

<div id="fb-root"></div> that the top part of the page now looks like this:

That's enough for this go-round. Next time we'll add some CSS to cause the H1 text (“Hartt's Pool and Plastering”) to cycle between various shades of blue when the page is first loaded, and then try to beautify the other pages a bit by changing font faces and such.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

B. Clay Shannon
Founder Across Time & Space
United States United States
I am in the process of morphing from a software developer into a portrayer of Mark Twain. My monologue (or one-man play, entitled "The Adventures of Mark Twain: As Told By Himself" and set in 1896) features Twain giving an overview of his life up till then. The performance includes the relating of interesting experiences and humorous anecdotes from Twain's boyhood and youth, his time as a riverboat pilot, his wild and woolly adventures in the Territory of Nevada and California, and experiences as a writer and world traveler, including recollections of meetings with many of the famous and powerful of the 19th century - royalty, business magnates, fellow authors, as well as intimate glimpses into his home life (his parents, siblings, wife, and children).

Peripatetic and picaresque, I have lived in eight states; specifically, besides my native California (where I was born and where I now again reside) in chronological order: New York, Montana, Alaska, Oklahoma, Wisconsin, Idaho, and Missouri.

I am also a writer of both fiction (for which I use a nom de plume, "Blackbird Crow Raven", as a nod to my Native American heritage - I am "½ Cowboy, ½ Indian") and nonfiction, including a two-volume social and cultural history of the U.S. which covers important events from 1620-2006:

You may also be interested in...


Comments and Discussions

QuestionSeriously? Pin
Dewey1-Nov-13 14:56
memberDewey1-Nov-13 14:56 
AnswerRe: Seriously? Pin
B. Clay Shannon1-Nov-13 15:00
professionalB. Clay Shannon1-Nov-13 15:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160927.1 | Last Updated 3 Nov 2013
Article Copyright 2013 by B. Clay Shannon
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid