The Official ASATO Site

We will build a custom gallery that scans a folder of images and outputs a cool image gallery, utilizing asp.net, CSS, jQuery and the lightBox plug-in.

Demo: A Cool jQuery Gallery

Download: down

1
2
3
4
5

<link rel="stylesheet" type="text/css" href="lightbox/css/jquery.lightbox-0.5.css" /> 
<link rel="stylesheet" type="text/css" href="demo.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.pack.js"></script> 
<script type="text/javascript" src="script.js"></script>

The demo.css is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

 .clear{
	clear:both;
}
 
a, a:visited {
	color:#00BBFF;
	text-decoration:none;
	outline:none;
}
 
a:hover{
	text-decoration:underline;
}
 
#container{
	width:890px;
	margin:20px auto;
}
 
 
div.nomargin{
	margin-right:0px;
}
 
.pic{
	float:left;
	margin:0 15px 15px 0;
	border:5px solid white;
	width:200px;
	height:250px;
}
 
.pic a{
	width:200px;
	height:250px;
	text-indent:-99999px;
	display:block;
}
 
h1{
	font-size:28px;
	font-weight:bold;
	font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}
 
h2{
	font-weight:normal;
	font-size:14px;
 
	color:white;
}

the html is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

	<div id="gallery"> 
		<div class="pic " style="background:url(gallery/ladybug.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/ladybug.jpg" title="ladybug" target="_blank">ladybug</a> 
		</div> 
		<div class="pic " style="background:url(gallery/bw.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/bw.jpg" title="bw" target="_blank">bw</a> 
		</div> 
		<div class="pic " style="background:url(gallery/bw-lingere.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/bw-lingere.jpg" title="bw-lingere" target="_blank">bw-lingere</a> 
		</div> 
		<div class="pic nomargin" style="background:url(gallery/red-head.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/red-head.jpg" title="red-head" target="_blank">red-head</a> 
		</div> 
		<div class="pic " style="background:url(gallery/wedding_catwalk.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/wedding_catwalk.jpg" title="wedding_catwalk" target="_blank">wedding_catwalk</a> 
		</div> 
		<div class="pic " style="background:url(gallery/tiger.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/tiger.jpg" title="tiger" target="_blank">tiger</a> 
		</div> 
		<div class="pic " style="background:url(gallery/lonely-anguish.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/lonely-anguish.jpg" title="lonely-anguish" target="_blank">lonely-anguish</a> 
		</div> 
		<div class="pic nomargin" style="background:url(gallery/promotion.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/promotion.jpg" title="promotion" target="_blank">promotion</a> 
		</div> 
		<div class="pic " style="background:url(gallery/pristine-lake.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/pristine-lake.jpg" title="pristine-lake" target="_blank">pristine-lake</a> 
		</div> 
		<div class="pic " style="background:url(gallery/tattoo.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/tattoo.jpg" title="tattoo" target="_blank">tattoo</a> 
		</div> 
		<div class="pic " style="background:url(gallery/white-stallion.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/white-stallion.jpg" title="white-stallion" target="_blank">white-stallion</a> 
		</div> 
		<div class="pic nomargin" style="background:url(gallery/furry-feline.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/furry-feline.jpg" title="furry-feline" target="_blank">furry-feline</a> 
		</div><div class="clear"></div> 
	</div>

the script.js is:

1
2
3
4
5
6
7
8
9
10
11
12

$(document).ready(function(){
 
	$('.pic a').lightBox({
 
		imageLoading: 'lightbox/images/loading.gif',
		imageBtnClose: 'lightbox/images/close.gif',
		imageBtnPrev: 'lightbox/images/prev.gif',
		imageBtnNext: 'lightbox/images/next.gif'
 
	});
 
});

Opening documents such as PDFs in a new window should be automated using JavaScript for the following reasons:

• Users will often close the web browser when a PDF is opened, mistakenly believing the document has been opened in Adobe Reader
• The attribute historically used to open a new window, target, has been removed from the HTML 4.01 Strict specification (it’s now deprecated)
• Opening a new window is a behaviour and should be moved to the behavioural layer¹¹.

Using JavaScript can also be particularly useful when a website is content managed. Rather than having to rely on site editors to remember to open a link to a PDF in a new window the process is handled by a simple JavaScript function.

Registering an event

The first task is to create an event that occurs when the page has loaded. Rather than trying to execute a function call using <body onload="callfunction()"> within the HTML page we’re going to use Simon Willison’s addLoadEvent(func). This will allow us to add function calls once the page has loaded.

Type the following JavaScript into the .js file (all subsequent code should be entered before this function so the addLoadEvent is last):

function addLoadEvent(func)
{
    var oldonload = window.onload;
    if (typeof window.onload != 'function') { window.onload = func; }
    else { window.onload = function() { oldonload(); func(); } }
}
addLoadEvent(fNewPDFWindows);

The function fNewPDFWindows()

Create an empty function in your JavaScript file called fNewPDFWindows. To avoid any JavaScript errors with the script, check to see if the command getElementsByTagName is available:

function fNewPDFWindows ()
{
    if (!document.getElementsByTagName) return false;
}

The second task is to create an HTML object collection of any links within the page. The following line gets all links within the page:

var links = document.getElementsByTagName("a");

Insert this line after the check to see if getElementsByTagName object method exists as follows:

function fNewPDFWindows ()
{
    if (!document.getElementsByTagName) return false;
    var links = document.getElementsByTagName("a");
}

The next task is to loop through all of the links and check to see if we want to open any of the links in a new window. If the link is to a PDF document then we’ll open it in a new window.

Looping through the links

First create the loop that goes through all the links in the page, as follows:

function fNewPDFWindows ()
{
    if (!document.getElementsByTagName) return false;
    var links = document.getElementsByTagName("a");
    for (var eleLink=0; eleLink < links.length; eleLink ++)
    { }
}


The indexOf method

Next we need to determine as we loop through the links whether the link is to a PDF document or not. The indexOf method is ideal for this by returning the index of the search value (the position of the search value in the string). The indexOf method requires a search value but you can also specify where to start the search from within the string (in this example we don’t need to pass the method this parameter):

So pass the indexOf method the string “.pdf” to find out if the file being linked to is a PDF document. The indexOf method returns either -1 if the string isn’t found or the index of the matching text.

function fNewPDFWindows ()
{
  if (!document.getElementsByTagName) return false;
  var links = document.getElementsByTagName("a");
  for (var eleLink=0; eleLink < links.length; eleLink ++) {
    if (links[eleLink].href.indexOf('.pdf') !== -1) { }
  }
}


onclick function

Next we need to apply an onclick event to each of the links to PDF documents, so when they’re clicked the new window is opened:

links[eleLink].onclick = function() { }

First, let’s open the new window, and give the window some parameters. The parameters we’re going to pass are as follows.

• URL – the document we want to display in the new window
• Specs – a comma separated list of window properties such as scrollbars etc

For a comprehensive list of windows properties take a look W3C schools DOM open method page¹⁴.

The completed function in this example is as follows. This opens the link address in a new, re sizable window with scrollbars:

links[eleLink].onclick = function() { window.open(this.href,'resizable,scrollbars'); return false; }

Insert the onclick event within the if statement that detects whether a PDF document has been found:

function fNewPDFWindows ()
{
  if (!document.getElementsByTagName) return false;
  var links = document.getElementsByTagName("a");
  for (var eleLink=0; eleLink < links.length; eleLink ++) {
  if (links[eleLink].href.indexOf('.pdf') !== -1)
  { links[eleLink].onclick = function()
  { window.open(this.href,'resizable,scrollbars');
  return false;
  }
  }
  }
}


Warning users the document opens in a a new window

The final task is to ensure users are aware that the link will open in a new window. We need to be as clear as we can with this to minimise confusion.

We’re going to do this by firstly amending the title text of the link and secondly inserting an image with alternate text of “(opens in a new window)”. The link title can be set as follows:

links[eleLink].title += "\n(opens in a new window)";

Next we will create an image element and set it’s src and alt attributes. Finally we’ll append the image to the hyperlink using the appendChild method.

var img = document.createElement("img"); img.setAttribute("src", "i/new-win-icon.gif"); img.setAttribute("alt", "(opens in a new window)"); links[eleLink].appendChild(img);

The final function is as follows:

function fNewPDFWindows ()
{
  if (!document.getElementsByTagName) return false;
  var links = document.getElementsByTagName("a");
  for (var eleLink=0; eleLink < links.length; eleLink ++) {
  if (links[eleLink].href.indexOf('.pdf') !== -1)
  { links[eleLink].onclick = function()
  { window.open(this.href,'resizable,scrollbars');
  return false;
  }
  var img = document.createElement("img");
  img.setAttribute("src", "i/new-win-icon.gif");
  img.setAttribute("alt", "(opens in a new window)");
  links[eleLink].appendChild(img);
  }
  }
}

Conclusion

This very short function demonstrates how easy it is to open links in new windows automatically. This means your site will be more likely to validate, more likely to work correctly in future browsers and will be more usable for its users.

Resources for the new window tutorial

Download the required resources before beginning this tutorial.

Start by opening the file ‘pdf-new-window.htm’. This is the content we’re going to apply our JavaScript new window function to.

options is an array property of the Javascript select object. The options array define the options of the select box with indices starting from zero.

To grab the value* or text** of a option in the select box, you must know it’s index. Most of the time you’ll only need use of the user selected option, so we can use the select object’s selectedIndex property to get the index we want, then use that to get the value of the option we want. This code example will grab the selected value of the myselect select box:

1

myselect.options[myselect.selectedIndex].value

This is an select box:

1
2
3
4
5

<select onchange="window.location=this.options[this.selectedIndex].value">
    <option value="#">Select a search engine</option>
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
</select>