Adding Dynamic jQuery Effects to Drupal Templates

7/31/2019 Adding Dynamic jQuery Effects to Drupal Templates

1/32

An Image Slideshow Tutorial


2/32

Modern Web Design relies upon certainstandards-based conventions in order tocreate dynamic websitesWhen constructing these websites, content isseparated from presentation in the HTMLmarkup, and a combination of CSS and DOMmanipulation is used to Add the presentation layer including color,

typography and background-images Add an effects layer including dynamic content and

interactivity


3/32

Strips out presentational markup (including , , , and other tags designed tochange the appearance of the page)Includes a structural foundation comprised of elementsApplies CSS styles to foundational elementsusing either class or id properties Styles apply presentational attributes like colors and

background-images Styles create a table-less layout using CSS Positioning .class properties can be used more than once on a page #id properties can only be used once on a page


4/32

Examine the HTML file first. Look for the elements and take note of the id andclass properties that have been applied

A with an id=header can be declared only once.

Next look at the CSS for corresponding styledefinitions #header {width:100%;}

This style declaration sets the width of the header to100% of the containing element (another or theviewport).


5/32

The page.tpl.php file is the main template page it includes a with a

class=header . The header includes four sub-div elements with classproperties as defined below:

.header

.head-row1

.head-row2

.head-row3

.head-row4


6/32

some content snipped


7/32

In order to remove the Flash Movie from thepage: Save page.tpl.php As page.tpl.php.bak to create a

backup file Open page.tpl.php Scroll down to the element Delete the entire declaration. When youre finished you should have two

elements. The elementwraps around another with a class=main


8/32

Save your changesOpen the site inyour Browser

You should see anempty wherethe Flash movieused to appear

It has a width=980pxand a height=379px

Flash object is gone!


9/32

Create 4 or 5 image files of type .jpg , .gif or .pngThe images should have the same dimensions asthe Flash movie width=980px, height=379pxFor now, just create simple images Plainrectangles that are exactly 980x379 that havedifferent background colors (red, blue, green,etc.)Name the images rotate1 , rotate2 , rotate3 , etc.Place the images in thesites/all/themes/theme347/images folder


10/32

Go back to your page.tpl.php fileInside the head-row2 and the .main elements, create a new .Give the an id=photoShow Make sure you close the Inside this div, create 3 empty elements.These elements will wrap around the 3 imagefiles you created in the previous step.For now, these elements do not need tohave an ID or CLASS applied


11/32


12/32


13/32

#photoShow {

height: 379px;width:980px;

}#photoShow div {

position: absolute;z-index: -1;

}#photoShow div.previous {

z-index: 1;}#photoShow div.current {

z-index: 2;}

Most of theproperties here areself- explanatory

We are setting thesize of the div toexactly 980x379pixels

But what is the z-index?


14/32

The z-index CSS propertyspecifies the stack levelof a box along the z-axisThis is used to createlayered effects The higher the z-index,the closer the object is tothe person viewing thebrowser windowThe z-index is set to aninteger value that can bepositive, negative or zero

x

y

z


15/32

#photoShow {

height:379px;width:980px;

}#photoShow div {

position:absolute;z-index: -1;

}#photoShow div.previous {

z-index: 1;}#photoShow div.current {

z-index: 2;}

So, in our embeddedstyles, we are settingthe z-index of all of the elements insidethe equalto -1Unless The has a class

applied = current The has a class

applied = previous


16/32

appears up front appears immediatelybehind the .current

All other elements arestacked behind the.current and .previous elements

x

y

z


17/32

So, we have created the images that willappear in our slideshow and added them tothe head-row2 We created CSS style declarations to the page

that will stack our pictures so that only oneimage is presented at the forefront in thebrowserBefore we move on to the next step (adding

jQuery that will rotate the images) we need toadd class=current to the that wrapsaround our first image


18/32


19/32

Save your changesOpen your site in a browser. Now you shouldsee the first image in the head-row2 sectionthat you placed in the source codeNext we need to add some JavaScript tocreate the slideshow effectNote: JavaScript needs to be added inside the

element of your page


20/32

In order to use jQuery in our Drupal Site, weneed to prepare the environmentDownload the jQuery library fromhttp://jQuery.com Create a folder to store our JavaScript file inthe sites/all/themes/theme347 folder called jsPlace the jquery-1.3.2.js file in the js folder
http://jquery.com/http://jquery.com/


21/32

First, we need to attach the jQuery library to our page. To do so,add the following code in the section of your page.tpl.php file:

Here, we are using the development version of the library.Before deploying to a PROD environment, replace this file withthe minified versionFor more inform ation about the benefits of using minified

javaScript, see: http://www.minifyjs.com/why-you-should-minify-javascript/
http://www.minifyjs.com/why-you-should-minify-javascript/http://www.minifyjs.com/why-you-should-minify-javascript/http://www.minifyjs.com/why-you-should-minify-javascript/http://www.minifyjs.com/why-you-should-minify-javascript/http://www.minifyjs.com/why-you-should-minify-javascript/http://www.minifyjs.com/why-you-should-minify-javascript/http://www.minifyjs.com/why-you-should-minify-javascript/http://www.minifyjs.com/why-you-should-minify-javascript/http://www.minifyjs.com/why-you-should-minify-javascript/http://www.minifyjs.com/why-you-should-minify-javascript/http://www.minifyjs.com/why-you-should-minify-javascript/http://www.minifyjs.com/why-you-should-minify-javascript/http://www.minifyjs.com/why-you-should-minify-javascript/


22/32

jQuery is a JavaScript libraryIt contains numerous functions designed tomake cross-browser DOM programmingeasierThe jQuery library makes it easy to: Select, traverse and manipulate elements in an html

document Add or modify styles to selected elements Apply effects to selected elements


23/32

Lets try a simple example. Add to the section of your page.tpl.php file:

$(function() {

$("img").css("border", "1px solid black");});


24/32

Created a jQuery Function that will execute when the DOM isready for manipulation (this is shortcut syntax for callingdocument.ready )Selected all tags in the documentApplied a solid black border to all selected image tags that is1px in width using CSS

$(function() {

$("img").css("border", "1px solid black");});
http://docs.jquery.com/Tutorials:Introducing_$(document).ready()http://docs.jquery.com/Tutorials:Introducing_$(document).ready()


25/32

First , we specify that we only want to apply a solidblack border to the images in the head-row2 divNext , we specify that we only want to apply a solidred border with a width of 3 pixels to the images inthe head-row4 div

$(function() {

$("div.head-row2 img").css("border", "1px solid black");$("div.head-row4 img").css("border", "3px solid #ff3139");

});


26/32

$(function() {$("div.head-row2 img").css("border", "1px solid black");$("div.head-row4 img").css("border", "3px solid #ff3139");setInterval("rotateImages()", 3000);

});

function rotateImages() {var oCurPhoto = $("#photoShow div.current");var oNxtPhoto = $(oCurPhoto.next());if (oNxtPhoto.length == 0)

oNxtPhoto = $("#photoShow div:first");

oCurPhoto.removeClass('current').addClass('previous');

oNxtPhoto.css({opacity:0.0}).addClass('current').animate({opacity:1.0}, 1000,function() {oCurPhoto.removeClass('previous');

});}


27/32

function rotateImages() {var oCurPhoto = $("#photoShow div.current");var oNxtPhoto = $(oCurPhoto .next() );if (oNxtPhoto .length == 0)

oNxtPhoto = $("#photoShow div :first");oCurPhoto .removeClass ('current') .addClass ('previous');

oNxtPhoto .css ({opacity:0.0}).addClass ('current') .animate ({opacity:1.0}, 1000,

function() {oCurPhoto .removeClass ('previous');});

}
http://api.jquery.com/next/http://api.jquery.com/length/http://api.jquery.com/first-selector/http://api.jquery.com/removeclass/http://api.jquery.com/addclass/http://api.jquery.com/css/http://api.jquery.com/addclass/http://api.jquery.com/animate/http://api.jquery.com/removeclass/http://api.jquery.com/removeclass/http://api.jquery.com/animate/http://api.jquery.com/addclass/http://api.jquery.com/css/http://api.jquery.com/addclass/http://api.jquery.com/removeclass/http://api.jquery.com/first-selector/http://api.jquery.com/length/http://api.jquery.com/next/http://api.jquery.com/next/


28/32

Okay, that worked? No? Check Code for

typos or missingdata

Yes? You rock.But what happenedto the Menu Bar? Any guesses?


29/32

$(function() {$(".head-row3").css("z-index", "3");$("div.head-row2 img").css("border", "1px solid black");$("div.head-row4 img").css("border", "3px solid #ff3139");setInterval("rotateImages()", 3000);

});

function rotateImages() {var oCurPhoto = $("#photoShow div.current");var oNxtPhoto = $(oCurPhoto.next());if (oNxtPhoto.length == 0)

oNxtPhoto = $("#photoShow div:first");

oCurPhoto.removeClass('current').addClass('previous');oNxtPhoto.css({opacity:0.0}).addClass('current').animate({opacity:1.0}, 1000,function() {oCurPhoto.removeClass('previous');

});}


30/32
http://localhost/Projects/drupal


31/32

References: http://reference.sitepoint.com/css http://www.w3schools.com/css/default.asp A Few Good Books

The Ultimate CSS Reference Stylin with CSS: A Designers Guide, 2 nd Ed. Inspiration & Education http://www.csszengarden.com http://www.alistapart.com/topics/code/css About CSS Opacity http://www.impressivewebs.com/css-opacity-

reference/
http://reference.sitepoint.com/csshttp://www.w3schools.com/css/default.asphttp://www.amazon.com/CSS-Ultimate-Reference-Tommy-Olsson/dp/0980285852/http://www.amazon.com/Stylin-CSS-Designers-Guide-2nd/dp/0321525566/http://www.amazon.com/Stylin-CSS-Designers-Guide-2nd/dp/0321525566/http://www.amazon.com/Stylin-CSS-Designers-Guide-2nd/dp/0321525566/http://www.amazon.com/Stylin-CSS-Designers-Guide-2nd/dp/0321525566/http://www.csszengarden.com/http://www.alistapart.com/topics/code/csshttp://www.impressivewebs.com/css-opacity-reference/http://www.impressivewebs.com/css-opacity-reference/http://www.impressivewebs.com/css-opacity-reference/http://www.impressivewebs.com/css-opacity-reference/http://www.impressivewebs.com/css-opacity-reference/http://www.impressivewebs.com/css-opacity-reference/http://www.impressivewebs.com/css-opacity-reference/http://www.alistapart.com/topics/code/csshttp://www.csszengarden.com/http://www.amazon.com/Stylin-CSS-Designers-Guide-2nd/dp/0321525566/http://www.amazon.com/Stylin-CSS-Designers-Guide-2nd/dp/0321525566/http://www.amazon.com/Stylin-CSS-Designers-Guide-2nd/dp/0321525566/http://www.amazon.com/Stylin-CSS-Designers-Guide-2nd/dp/0321525566/http://www.amazon.com/Stylin-CSS-Designers-Guide-2nd/dp/0321525566/http://www.amazon.com/CSS-Ultimate-Reference-Tommy-Olsson/dp/0980285852/http://www.w3schools.com/css/default.asphttp://reference.sitepoint.com/css


32/32

Online: http://jquery.com Review Documentation Review TutorialsA Good Book: jQuery Cookbook, 1 st Edition An Old Standby: http://www.google.com Search for jQuery + [what you want to do] You will come up with lots of tutorials on blogs and

other sites in your search results
http://jquery.com/http://www.amazon.com/jQuery-Cookbook-Solutions-Examples-Developers/db/0596159773http://www.amazon.com/jQuery-Cookbook-Solutions-Examples-Developers/db/0596159773http://www.amazon.com/jQuery-Cookbook-Solutions-Examples-Developers/db/0596159773http://www.google.com/http://www.google.com/http://www.amazon.com/jQuery-Cookbook-Solutions-Examples-Developers/db/0596159773http://www.amazon.com/jQuery-Cookbook-Solutions-Examples-Developers/db/0596159773http://www.amazon.com/jQuery-Cookbook-Solutions-Examples-Developers/db/0596159773http://www.amazon.com/jQuery-Cookbook-Solutions-Examples-Developers/db/0596159773http://jquery.com/

Documents

Adding Dynamic jQuery Effects to Drupal Templates