Click here to Skip to main content
Click here to Skip to main content

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

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

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 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 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>
<script>
    $(document).ready(function () {
        $('#slider').anythingSlider();
    });
</script>
<div id="slider">
    <div><img src="Images/JPoolGetty.JPG" /></div>
    <div><img src="Images/Billiards.JPG" /></div>
    <div><img src="Images/PoolHarder.JPG" /></div>
</div>
<h2>We will show some false feet here (faux toes)</h2>

This works fine, as you can see with your very own peepers:

...so 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); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

        <div style="display:inline-block;vertical-align:top">
            <a href="https://twitter.com/share" class="twitter-share-button" 
              data-url="http://www.replaster.azurewebsites.net" 
              data-text="Look at this Pool plastering company serving Central California!" 
              data-via="BClayShannon">Tweet</a>
            <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], 
              p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { 
              js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; 
              fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
        </div>
        <div style="display:inline-block;vertical-align:top" class="fb-like" 
          data-href="http://www.replaster.azurewebsites.net" data-send="false" 
          data-width="450" data-show-faces="false" data-font="segoe ui"></div>

And now here it is in context:

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

<div id="fb-root"></div>
<script>(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

    <div class="jumbotron backgroundcolorLightSkyBlue" >
        <h1>Hartt's Pool Plastering</h1>
        <p class="lead fontcolorAzure">Serving Central California 
          from Stockton to Madera and from Sonora to Tracy</p>
        <img src="Images/Logo-BannerSmall_1_.gif" />
        <div style="display:inline-block;vertical-align:top">
            <a href="https://twitter.com/share" class="twitter-share-button" 
              data-url="http://www.replaster.azurewebsites.net" 
              data-text="Look at this Pool plastering company serving Central California!" 
              data-via="BClayShannon">Tweet</a>
            <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], 
              p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { 
              js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; 
              fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
        </div>
        <div style="display:inline-block;vertical-align:top" class="fb-like" 
          data-href="http://www.replaster.azurewebsites.net" data-send="false" 
          data-width="450" data-show-faces="false" 
          data-font="segoe ui"></div>
    </div>

        <div class="row">
        <div class="col-md-4">
            <h2>Services We Provide</h2>
            <ul>
                <li>Plastering & Replastering</li>
		. . .

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

License

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

Share

About the Author

B. Clay Shannon
Founder "Across Time & Space"
United States United States
Ideaman and Coder at Across Time & Space, creator of the Windows Store App "Photrax", which can be downloaded as a trial (7 days) from http://apps.microsoft.com/windows/en-us/app/photrax/75c18e6c-96bd-4607-ac43-531aab098ab4
 
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: http://www.lulu.com/spotlight/blackbirdcraven
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionSeriously? PinmemberDewey1-Nov-13 15:56 
AnswerRe: Seriously? PinprofessionalB. Clay Shannon1-Nov-13 16:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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.141216.1 | Last Updated 3 Nov 2013
Article Copyright 2013 by B. Clay Shannon
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid