JQuery Video Tutorial Pt 8

JQuery lightboxIn this part of the JQuery Video Tutorial I show you how to create all kinds of cool things using the JQuery UI and plugins.

I’ll show you how to create a really nice JQuery Lightbox using fancybox. It has all the bells and whistles you want.

I’ll then show you how to create a tab interface that is: draggable, resizeable, sortable, and more.

After that I’ll create a really nice date picker that will impress and save your clients time.

If you are looking for the first part of this tutorial it is available here JQuery Video Tutorial. I’m also asked for book recommendations. Here is my favorite book on JQuery. My favorite JavaScript book by far is the O’Reilly JavaScript book.

Like always, all of the code follows the video. Leave questions and comments below.

Code From the Video

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<title>JQuery Tutorial</title>

<link href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css” rel=”stylesheet” type=”text/css”/>

<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.js”></script>

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js”></script>

<script type=”text/javascript” src=”fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js”></script>

<script type=”text/javascript” src=”fancybox/fancybox/jquery.fancybox-1.3.4.pack.js”></script>

<link rel=”stylesheet” type=”text/css” href=”fancybox/fancybox/jquery.fancybox-1.3.4.css” media=”screen” />

<link rel=”stylesheet” href=”style.css” />

<script type=”text/javascript”>

$(“document”).ready(function() {

$(“#tabs”).tabs(); // Creates the tab layout

$(“#tabs”).css({‘width’: ‘500’}); // Makes the tab div 500px

$(“#tabs”).draggable(); // Makes he tab div draggable

$(“#tabs”).resizable(); // Makes he tab div resizable

$(“#sortMe”).sortable(); // Makes he tab div sortable

$(“#datepicker”).datepicker(); // Sets up the datepicker

$(“a[rel=example_group]”).fancybox({

‘transitionIn’ : ‘elastic’, // elastic, fade, or none

‘transitionOut’ : ‘elastic’,

‘titlePosition’ : ‘over’, // outside, inside or over

‘titleFormat’ : function(title, currentArray, currentIndex, currentOpts) {

return ‘<span id=”fancybox-title-over”>Image ‘ + (currentIndex + 1) + ‘ / ‘ + currentArray.length + (title.length ? ‘ &nbsp; ‘ + title : ”) + ‘</span>’;

}

});

});

</script>

</head>

<body>

<div>

<h2>JQuery UI & More</h2>

<span><a rel=”example_group” href=”images/PC100_0852.jpg”><img src=”images/Thumb_0852.jpg” title=”Fish Sculpture”></a></span>

<span><a rel=”example_group” href=”images/PC100_0857.jpg”><img src=”images/Thumb_0857.jpg” title=”Gargoyle One”></a></span>

<span><a rel=”example_group” href=”images/PC100_0859.jpg”><img src=”images/Thumb_0859.jpg” title=”Gargoyle Two”></a></span>

<span><a rel=”example_group” href=”images/PC100_0875.jpg”><img src=”images/Thumb_0875.jpg” title=”Gargoyle Three”></a></span>

</div>

<div id=”tabs”>

<ul id=”sortMe”>

<li><a href=”#fragment-1″><span>Dieting</span></a></li>

<li><a href=”#fragment-2″><span>Sales</span></a></li>

<li><a href=”#fragment-3″><span>NLP</span></a></li>

</ul>

<div id=”fragment-1″>

I got on the scale on October 20th and was shocked to see that I weighed almost 250 lbs. I weighed 248 lbs to be exact and I decided I was ready to lose weight now.<br /><br />

All the diet books I read were either too vague or proposed I go on a diet that was either very expensive, time consuming, or disgusting. I had lost weight in the past, but I knew I had done it in unhealthy ways. I decided to look at how my diet in college differed from my current diet first off.

</div>

<div id=”fragment-2″>

This presentation contains tips that will dramatically increase your success on the phone. Some of the topics covered include:<br />

<ul>

<li>If you have the best product, why are you afraid to ask people to buy it?</li>

<li>The 3 Principles of The Phone</li>

<li>Acknowledge & Move On</li>

<li>Everyone Just Hangs Up, What Do I Do</li>

</ul>

</div>

<div id=”fragment-3″>

Here I’ll explain how our minds process information. This can be used as an Introduction to Neurolinguistic Programming. If you understand everything here you will understand the more advanced technique’s used in Indirect Hypnosis.<br /><br />

Representational Systems<br /><br />

I’ve written about Representational Systems in the past, but here I’ll cover them in detail.

</div>

</div><br /><br />

<div><input type=”text” name=”data” id=”datepicker”></input></div>

</body>

</html>

33 Responses to “JQuery Video Tutorial Pt 8”

  1. jaxon says:

    tremendous tuts. am going to try hand at blogging @ wordpress. the are not fans of jq or javascript. looks like i will p/u php. any recommendations?

    btw, i’m a big fan of nlp. grinder and bandler. good stuff. frogs 2 princes, etc…. great for sales IF you can get face time these days!

    thanks for the great work!

    jaxon

    • admin says:

      Glad you like the tuts πŸ™‚ Yes NLP is extremely cool. I’m planning more videos on it soon. I’m going to be doing a WordPress Theme and plugin tutorial in about 1 week.

      If you want to work with WordPress you have to understand php & mysql pretty well, with a bit of JavaScript. Mainly it is all php though. I did a massive tutorial on that stuff.

      Thanks for the nice message

  2. Karolina says:

    Hi!

    Great video! And all the rest for that matter. πŸ˜‰

    Although I can’t get my gallery to work properly. I figured out that I can’t copy your code. To many weird signs follow. But when I print it down by hand I still can’t get my pictures to upload in an iFrame om the page?!

    I’m pretty new to this so I probably done something I will figure out in an hour or so. But do you have any tip?

    I can see my Thumbnails and when I click the thumb the large picture is shown in a new window and I cant toggle between them…

  3. Robert Jackson says:

    Derek-Great stuff! I am a photographer but never got around to doing a lightbox. What a snap! Thank you. The tab system was great as well.

    Thank you!

    Very best regards,

    Bob (jaxon)

    The site below has an interesting ap for jquery that you might want to do a demo on. A little involve but very cool. I’ve downloaded the files and am going to take it apart and put it back together using various company’s logos. Think it might be great as a promo tool and a way of data farming.

    What do you think?

    http://www.jquerylabs.com/jquery-slot-machine.html

  4. kahn says:

    Hi,

    You are the best teacher I ever had.
    Very good, please tap on your back from me.

    God Bless You!!

  5. Rico says:

    Great tutorial. Any chance of getting a video tutorial on uploading multiple images and display them immediately after the uploading is completed using jQuery? Sorry, I asked the same thing on youtube. Hope you don’t mind.

    Thanks.

  6. Sean says:

    Hi, What a great tutorial and a million thanks!
    Btw, is it possible to do away with the background overlay and make the fancybox draggable?
    Appreciate if could get an answer from you soon.

    • admin says:

      You’re welcome. I think this should work.

      To get rid of the background and shadow use the following css

      #fancybox-outer {
      background: transparent;
      }

      #fancybox-outer div {
      background: url();
      }

      If you want to make fancybox draggable you should just be able to attach draggable to the div. I hope that helps

  7. Rose says:

    Just wanted to tell you how much I loved this series. I completed the last chapter for my JavaScript advanced course which covered JQuery, Dojo and Dijits. It was something I thought should have covered more than one chapter and I felt cheated. I remembered bookmarking one or two of your Java videos when I went a little cross-eyed reading about threads, so I searched to see if you had anything regarding these subjects. I seen the listing for JQuery, viewed all the tutorials and learned how powerful JQuery actually is.

    Thanks again,

    Rose

    • admin says:

      Well thank you. I’m glad you liked it. JQuery is a great tool. Java is kind of boring I agree. It is just an extremely robust language and after being asked many times I decided to cover it. Because I always try to cover everything completely, that is the reason it is dragging on. I plan on breaking everything up again and cover other topics very soon.

      Thanks for taking the time to show your appreciation. It makes me very happy πŸ™‚
      Derek

  8. Steven says:

    Great vedios, tremendous work.

    it would be great if you can give me idea on DOJO vs Jquery ..

    Curiosity to know the tool you used for demo purpose..

    Many Thanks in Advance …

    • admin says:

      I use JQuery, but I’m interested in covering many of the other Java frameworks available. I tend to cover fully developed technologies and shy away from anything that is fairly new. In the future that will most definitely change though.

      Thank you for the kind words πŸ™‚

  9. Lucas says:

    Your tutorials are outstanding! I’ve just covered them but I believe there is still a lot of work to do to master jQuery.

    At the beginning your videos seem to be extremely fast, so it’s hard to keep up. The funny thing is that whenever I switch to someone else’s tutorials I get the impression that they are a bit too slow. I got used to your style, I guess.

    So Derek, is it ever possible to receive any help from you if I face some difficulties with the code which I’ve been trying to put to work or I’ve found somewhere on the web?

    Regards

    • admin says:

      I can’t stand slow tutorials. I know I go a bit too fast, but that has become my style.

      I do my best to help out anyone that asks for help. The only thing I won’t do is homework. I get asked to do peoples homework all of the time. I also at times ignore big complicated questions. The reason why I do this is because all to often I’ll spend a half hour answering a question only to never hear from the person again. If I get a complicated question I just incorporate it into a future tutorial and figure that they’ll get their answer if they continue with the tutorial.

      Thanks
      Derek

      • Lucas says:

        My friend, I can understand you very well. I promise not to ask you for help with any kind of homework – I’m not a student and I don’t have such problems. However, there are some questions about jQuery that I will ask you soon. I believe you can help me… One day, when I build my beautiful website, you will be proud of your ardent follower. I promise.

  10. Greg says:

    p3 time@01:50~ seconds
    VERY USEFUL/rarely covered snippets…
    i’ve rarely seen anyone attempt to show the ‘regex-esque-ness’ (made it up/not a real word) of selectors πŸ™‚
    good job!

  11. Naruttam Borah says:

    Hi, Derek

    You have uploaded excellent tutorials on jquery, I love it and also recommend my friends about your website. You teach everything in detail and help understand the concept. well I was wondering is there anything in jquery that adds shadow to ,, tags, I have tried pShadow.js and it adds shadows only in bottom corners and bottom middle. what if I want to add shadow on left and right and also on top, just incase, and also I want to understand the concept behind it. Could you please upload a tutorial on this too. I would be greatly thankful.

    Naruttam

    • admin says:

      Are you looking for something like this

      text-shadow:1px 1px 0 #000000; /* Puts a shadow under link 1px down, 1px to right, 0 blur & Black */

      If you are looking for something else please ask and I’ll do my best to help

  12. Naruttam Borah says:

    Oops I think I missed out the tag names,it should be div,p and img tags where I wanna add shadow

  13. Marko says:

    Hi Derek,I always wondered is it hard to create sliders, lightBox … from scratch? Not just to download them, but know how to create them from start to finish. Can you show us how to create some plugin like slider? I suposse that we need to know JavaScript really good to make them. You are great person Derek.

    • Derek Banas says:

      Thank you very much for the compliment πŸ™‚ I have about 3 slider tutorials. The last one used the coda slider and it is probably the best and easiest to learn / use. I hope you find them useful

      • Marko says:

        Thank you Derek on answering all my questions. When algorithm tut start?

        • Derek Banas says:

          You’re very welcome πŸ™‚ Today I’m doing a tutorial on MVC and tomorrow I’ll start the algorithm tutorial. Sorry it is taking so long, but my site has been getting attacked and I’ve been adding a ton of extra security

Trackbacks/Pingbacks

  1. jQuery Lightbox — Image Gallery | Javascript - [...] http://www.newthinktank.com/2011/03/jquery-video-tutorial-pt-8/ 0 26 Oct Posted: [...]

Leave a Reply

Your email address will not be published.

Google+