Class 12

The Week’s Topics

JavaScript
jQuery Basics
Lightbox Demo
Embedding swf file
How to embed a YouTube video
Assignment: jQuery gallery, Work on final project

Reminder
Assignment 7: CSS Drop Down Menus
Assignment 8: Typography – Embedded Font
Assignment 9: HTML Form
Assignment 10: jQuery

Mark your calendars!
Spring Student Show 2012
Design Technology Department
Friday, May 18, 2012
6:00pm – 9:00pm


Assignment 10: Due Monday, May 21

1. Find a jQuery plug-in or code for a slideshow or gallery you can use for your final project. You may use the resources in the class notes below or do a Google search of your own. (The slideshow you pick can’t be the panning slideshow I demonstrated in class!) Create a “test” HTML page for this slideshow or gallery using the jQuery plug-in. Be sure to keep your files organized correctly! Use this as an opportunity to get a head start on creating this section of your website for your final project. This exercise doesn’t necessarily need to have the final images you’ll use for your final project, as it is a beta test.

2. Continue working on your final project. The communication brief and site map for your final project is due next week, Monday, May 21.  We do not have class on Memorial Day, Monday, May 28 but your design comps will be due Monday, June 4th at the very latest. Sooner would be much better.

Your final project pages will include:

  • Home page
  • A slideshow or gallery feature, and/or another jQuery feature
  • Contact page with form
  • 2 additional pages

JavaScript

What is it?

Javascript is a programming language that forms the the last leg of the modern web design and development trinity: HTML, CSS, and Javascript.

It allows for interactivity and greater control of web pages in the web browser.

  1. HTML deals primarily with structure
  2. CSS deals with visual presentation
  3. Javascript is the brains or logic

There are a number of code frameworks (jQuery, Moo Tools, Prototype) that have become prominent for their ease of use, most of which are within the reach of designer’s to learn a bit about and use to create new experiences. We will focus on jQuery, primarily because of the large community of developers and availability of useful plug-ins.

Where does it go?

JavaScript is commonly included in the head tag of web pages. Much like style sheets it can be embedded in the document or linked to an external file. To include an external file such as a plug-in we use something like the following piece of code:

<head>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>
</head>

Embedded JavaScript looks like the following:

<head>
<script type="text/javascript">

$(document).ready(function() {

var randomImages = ['picture01','picture02','picture03'];
var rndNum = Math.floor(Math.random() * randomImages.length);
$("body").css("background-image","url(images/" + randomImages[rndNum] + ".jpg)");

});

</script>
</head>

There is also a practice of including scripts in between the </body> and the </html> tag at the bottom of page. This allows the page to load before running any scripts. I’ve seen primarily for google analytics scripts, although it may be useful for others. Although the document ready function takes care of this for the most part.

jQuery Basics

See http://jquery.com/

jQuery is an open source library of javascript objects that we can use in our front-end web development and design. These objects are referred to as Plug-Ins and includes things like galleries, animation, as well as control of page elements through the DOM (Document Object Model) and much more.

Where do I start?

First step is to include the jQuery library in our pages:

Link to the Google CDN hosted jQuery library:
Google API Documentation: http://code.google.com

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>

Or alternately you can download it and include locally on your site:

Download the jQuery library and include it in a folder in your site structure:
http://docs.jquery.com/Downloading_jQuery

Example: Random Background Image

Create a Random Background image

<script type="text/javascript">

$(document).ready(function() {

var randomImages = ['picture01','picture02','picture03'];
var rndNum = Math.floor(Math.random() * randomImages.length);
$("body").css("background-image","url(images/" + randomImages[rndNum] + ".jpg)");

});

</script>

Here’s the example: http://www.everythingaboutweb.com/classes/examples/background_image/

Here are the files: http://www.everythingaboutweb.com/classes/downloads/background_image.zip

jQuery Plug-ins

Plug-Ins expand the function of the jQuery library. Our next step is to find a plug-in we want to use.

There are a couple of ways to search for plug-ins. One method is to search for them on jQuery. The interface is a bit lacking, but almost all plug-ins listed feature link to the plug-in site, which usually has the download and an example.

The other method is to leverage the wonders of the internet and search the blog lists for plug-ins. Articles abound. Pick a recommended plug-in, download and get it going.

We can include plug-in files locally (a .js file in your js folder) and sometimes they are hosted on another site and we can just link to them like we do to include the jQuery library hosted at Google.

jQuery Slideshow and Gallery Resources

http://www.noupe.com/tutorial/more-on-jquery-slider-plugins-and-tutorials.html
http://www.smashingapps.com/2011/01/07/awesome-jquery-techniques-to-create-visually-impressive-photo-galleries.html
http://www.htmldrive.net/categorys/show/2/Slideshow+%26+Scroller
http://www.htmldrive.net/search?q=gallery&yt1.x=0&yt1.y=0&yt1=submit

List of jQuery Slideshows

http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-simple-itunes-like-slider/
http://www.serie3.info/s3slider/demonstration.html
http://www.htmldrive.net/items/demo/1060/super-cool-multiple-style-Slideshow-effect-with-jQuery
http://www.htmldrive.net/items/demo/928/Countdown-jQuery-Slick-Image-Slider-Plugin
http://www.htmldrive.net/items/demo/815/jQuery-Accordion-slide-Plugin

Check out this resource —> jQuery for Designers

Panning Slideshow Demo

http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/

http://www.everythingaboutweb.com/classes/examples/jQuery_slideshow/final_web/


Lightbox Demo

Here is an example of the Lightbox demonstrated below:
http://www.everythingaboutweb.com/classes/examples/lightbox_demo/

You may download the files I use for this demonstration here:
http://www.everythingaboutweb.com/classes/downloads/lightbox_demo.zip

Basic instructions are located here:
http://www.everythingaboutweb.com/classes/examples/lightbox_demo/lightbox/index.html
YouTube video: http://www.youtube.com/watch?v=NfK2KqtcThM

The basic instructions are found in the link above but I have altered the code so it reflects placing all your files for the Lightbox feature in a folder named “lightbox.” If you place all your files in a folder named “lightbox,” you will need to add the code as outlined below.

Part 1 – Setup

1) Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.

<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>

2) Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles). Include the link to the lightbox CSS file in your header.

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />

3) Check the CSS file called lightbox.css and make sure the referenced prevlabel.gif and nextlabel.gif files are in the right location.

I had to link to my images using an absolute address. For some reason it did not work as a relative link. Note the bold text in the example below.

#prevLink:hover, #prevLink:visited:hover { background: url("http://www.everythingaboutweb.com/ classes/ examples/  lightbox_demo/lightbox/images/prevlabel.gif") left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url("http://www.everythingaboutweb.com/ classes/ examples/  lightbox_demo/lightbox//images/nextlabel.gif") right 15% no-repeat; }

4) Check the js file called lightbox.js. Make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location.

fileLoadingImage: 'lightbox/images/loading.gif',
fileBottomNavCloseImage: 'lightbox/images/closelabel.gif',
Part 2 – Activate

5) Add a rel=”lightbox” attribute to any link tag to activate the lightbox. For example:

<a href="lightbox/images/image01.jpg" rel="lightbox[group01]" title="my caption"><img src="lightbox/images
/thumb01.jpg" width="425" height="319" border="0" /></a>

Optional: Use the title attribute if you want to show a caption.

6) If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Notice in my example I have my lightbox gallery linking from a single image. To do this, I used the following code:

<a href="lightbox/images/image01.jpg" rel="lightbox[group01]" title="my caption"><img src="lightbox/images
/thumb01.jpg" width="425" height="319" border="0" /></a>
<a href="lightbox/images/image02.jpg" rel="lightbox[group01]"></a>
<a href="lightbox/images/image03.jpg" rel="lightbox[group01]"></a>

Side note: If you want to group images, create a name and define them all as part of the group. In the first example, it is “roadtrip,” I used the name “group01″ — it doesn’t really matter what you call it but of course try to use something useful that will help you identify the group.


Embedding swf file (Flash movie) into HTML page

How to insert a SWF file

1) Define your site by going to Site > Manage Site (or New Site) and defining the local root folder by selecting the folder where your local files live. (See notes below.*)

2) In the Design view of the Document window, place the insertion point where you want to insert the content, then do one of the following:

  • In the Common category of the Insert panel, select Media and click the SWF icon .
  • Select Insert > Media > SWF.

3) In the dialog box that appears, select a SWF file (.swf).
A SWF file placeholder appears in the Document window.

4) Save the file.

Important Notes:
Dreamweaver informs you that two dependent files, expressInstall.swf and swfobject_modified.js, are being saved to a Scripts folder in your site. Don’t forget to upload these files when you upload the SWF file to your web server. Browsers can’t display the SWF file properly unless you have also uploaded these dependent files.

* To ensure your Scripts folder gets saved to your local files, be sure to define your site using Site > Manage Site. By defining your local files, Dreamweaver will know where the files live on your computer. If you define your site, your Scripts folder, and the links to the expressInstall.swf and swfobject_modified.js in your HTML file, will be saved correctly.

Adding Multimedia to your website


How to embed a YouTube video

http://www.google.com/support/youtube/bin/answer.py?answer=171780



Comments

  1. MATHEW ELIAS May 14th

    Comment Arrow

    Jamie,

    I completed both assignment 8 (late) and assignment 9.

    Assignment 8:
    http://www.cavanaugh.smcgrdes.com/grdes66/4249-evening/Elias_Mathew/Assignment%208/final_web/

    Assignment 9:
    http://www.cavanaugh.smcgrdes.com/grdes66/4249-evening/Elias_Mathew/Assignment%209/final_web/

    -Mathew Elias
    Gr Des 66 Evenings


  2. jamie May 14th

    Comment Arrow

    Thanks!


  3. Sakuna May 14th

    Comment Arrow

    Hi,
    I didn’t know that I have to inform you that I’ve uploaded the assignment 7.
    So, this is my Assignment 7:
    http://www.cavanaugh.smcgrdes.com/grdes66/4249-evening/sukveeradech_sakuna/Assignment_7/final_web/

    Thank you


  4. Sebastian Nilsson May 19th

    Comment Arrow

    Hi jamie, was thinking of these website for the final

    http://www.takogrill.com/index2.html
    http://www.ilovegushi.com/

    Thanks


  5. Jesus May 20th

    Comment Arrow

    is this ok for our assignment or should i choose another kind of slideshow?

    http://www.slidesjs.com/


  6. Jamie Cavanaugh May 20th

    Comment Arrow

    Hi Jesus,

    This looks like a good slideshow. Yes, go ahead and use this one.


  7. jamie May 21st

    Comment Arrow

    Hi Sebastian,

    I think the http://www.ilovegushi.com/ is a good one to redesign.


  8. erik stamps May 21st

    Comment Arrow

    http://www.4thstbistro.com/index.html id like to do this website as my final. It is a great restaurant in Reno and for the quality of the place, they deserve something better then this


  9. jamie May 21st

    Comment Arrow

    Erik,

    Yes, I think this is a good choice.


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 66