How do I put jquery code inside a html document? (lightbox)

reference the jQuery script followed by the lightbox script in your html document.Like so,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="source-of-jquery.js"></script>
<script type="text/javascript" src="source-of-lightbox-plugin.js"></script>
<script type="text/javascript" src="source-of-script-with-your-jquery-code-in.js"></script>
</head>
<body>

....

then you will need to use the lightbox accordingly. For example, in source-of-script-with-your-jquery-code-in.js

$(function() {
 $('#gallery a').lightBox({fixedNavigation:true});
});

binds the lightbox plugin to each <a> element that is a child of the element with the id gallery

EDIT:

jQuery is nothing but a JavaScript framework (albeit a great framework). If you're starting out on your front-end web development journey, I would suggest looking at JavaScript in conjunction with jQuery as it is the building block of the framework and will help you to understand how it works better. Here are some resources to get you started


You need to reference the jquery javascript file you have downloaded in your html

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

You will also need to add a reference to the js file you downloaded for the lightbox plugin.

There is a beginners tutorial on jQuery here.

Tags:

Jquery

Recent Posts