Archive for the 'jQuery' Category

Flickr Galleries for Drupal

Published
by
ethan
on March 12, 2010
in Drupal, Flickr, Highslide, PHP, Source and jQuery
. 0 Comments

Install the Flickr module. That’s going to require a Flickr API key, so follow the instructions to set that up. You’ll need to enable the following modules: Flickr, Flickr Filter, Flickr Sets. Then enable the “Flickr linker” filter under Input Formats.

Keep in mind that only “public” photos work with this.

That’s going to let you put something like

[flickr-photoset:id=72157610617588420,size=s]

in the body of your document. When you save and view this document, you should see little thumbnails from your photoset. If you click on one, it’s going to take you to Flickr. We’ll be replacing that with Highslide.

Okay, so that’s nice but that [flickr-] stuff is a little hard to deal with. So what we’re going to do is install flickrset. This is a plug in I wrote for WYSIWYG and TinyMCE. You place it in

/sites/all/modules/wysiwyg/plugins

Then, in Drupal, go to /admin/settings/wysiwyg and edit any input formats that use TinyMCE. This is probably just “Full HTML.” Under the “Buttons and plugins” section you should see a new checkbox at the end labeled “Flickrset.” Turn that on and save it.

Now when you create a new document, you should see a new button in the body. The new button is the Flickr icon. When you click it, you get a pop up with three fields. You paste the URL of your Flickr photoset in there. You pick the size of the thumbnails you want. You pick the size of the “full size” pictures that you want. You click add. It’s going to build that [flickr-] crap for you.

You’ll see there’s a new thing in there, and that’s “class=showsizen.” This is the parameter for the “full size” picture. This isn’t going to work, out of the box. You’re going to need to hack the Flickr module. *gasp* So open

/sites/all/modules/flickr/flickr.module

and find the theme_flickr_photoset function. Change

$output .= theme('flickr_photo', $photo, $size);

to

$output .= theme('flickr_photo', $photo, $size, NULL, $attribs);

This is important because we’re passing the attributes to the theme function. The attributes contain, among other things, the class parameter we set earlier.

The module will let you pick a number of photos to appear in photosets. That’s nice if all your photosets are going to use the same number of photos, but if you want each gallery to display a different number of photos, you’ll need to add some functionality. Here’s how to do that.

In modules/flickr/filter/flickr_filter.module find flickr_filter_callback_photoset()

// change this line
return theme('flickr_filter_photoset', $photoset, $photoset['owner'], $config['size'], $attribs);
// to this
return theme('flickr_filter_photoset', $photoset, $photoset['owner'], $config, $attribs);

In modules/flickr/sets/flickr_set.module replace flickr_set_load() with

function flickr_set_load($sid, $num = 0, $page = 1) {
  // TODO: Not sure why this called for /flickr and does not show for admin role
 
  if ($num == 0) $num = variable_get('flickr_photos_per_page', 20);
 
  if (is_numeric($sid)) {	
    return flickr_request('flickr.photosets.getPhotos',
    array(
      'photoset_id' => $sid,
      'page' => $page,
      'per_page' => $num,
    )
    );
  }
}

In modules/flickr/flickr.module find theme_flickr_photoset()

// change the first two lines to this
function theme_flickr_photoset($ps, $owner, $config, $attribs = NULL) {
  $size = $config['size'];
// then change this line
$photos = flickr_set_load($ps['id']);
// to this
$photos = flickr_set_load($ps['id'], $config['num']);

Okay, so now if we look at our saved document, we see all the thumbnails there. Each image should have the “showsizen” class we specified. It may be “showsizeb” if you chose that size instead- n is normal, b is large. (These are abbreviations from the Flickr module, I didn’t make them up.) It’s still not going to expand to the correct size, we haven’t gotten that far. Just make sure your images have that class when they get displayed.

The last thing is this jQuery. This is going to hijack the resulting HTML so that Highslide can handle the full sized images.

$(document).ready(function() {
  $('.flickr-photoset a').each(function() {
      // we need a slightly different version of the static image url
      var thumb_url = $(this).children('img').attr('src');
 
      var showsize = "";
      if ($(this).children('img').hasClass('showsizeb')) {
        showsize = "_b";
      }
      if ($(this).children('img').hasClass('showsizen')) {
        showsize = "";
      }
 
      var dotpos = thumb_url.indexOf('.jpg');
      thumb_url = thumb_url.substr(0, dotpos - 2) + showsize + ".jpg";
 
      // now replace the a.href with this
      $(this).attr('href', thumb_url);
 
      // and fix it up for highslide
      $(this).addClass('highslide');
 
      this.onclick = function() {  return hs.expand(this); }
  });
});

Simple jQuery Accordion

Published
by
ethan
on February 26, 2010
in CSS, Source and jQuery
. 0 Comments

I spent an hour trying to get the jQuery UI accordion to work and it just wasn’t right. So I wrote my own. And then, the next day, I made it simpler.

Get the files here.

Automatic Highslide

Published
by
ethan
on February 19, 2010
in JavaScript and jQuery
. 0 Comments

Assumes you are familiar with jQuery and Highslide…

// prep "a img" for highslide
$('a').each(function() {
  if ($(this).children('img').length > 0) {
    $(this).addClass('highslide');
    this.onclick = function() {	return hs.expand(this); }
  }
});

jQuery Logo Rotator/Slider

Published
by
ethan
on October 8, 2009
in JavaScript, Source and jQuery
. 0 Comments

For a client’s site, we had some partner logos in the lower left corner. Rather than let them take up a lot of space, we decided to have them rotate. Here’s the HTML.

<div id="partners">
	<a href="http://www.nationalgrid.com" target="_blank"><img src="/wp-content/themes/CEG/images/footer_logos/botlogosNATGRID.gif" alt="National Grid" /></a>
	<br />
	<a href="http://www.nystar.state.ny.us/" target="_blank"><img src="/wp-content/themes/CEG/images/footer_logos/botlogosNYSTAR.gif" alt="NYSTAR" /></a>
	<br />
	<a href="http://www.mep.nist.gov/" target="_blank"><img src="/wp-content/themes/CEG/images/footer_logos/botlogosMEP.gif" alt="NIST/MEP" /></a>
	<br />
	<a href="http://www.nist.gov/" target="_blank"><img src="/wp-content/themes/CEG/images/footer_logos/botlogosNIST.gif" alt="NIST/MEP" /></a>
	<br />
</div>

And here’s the jQuery.

var imageFader;
 
$(document).ready(function() {
  // get the images in the lower left going
  $('#partners').each(function() {
    $(this).children('br').hide();
 
    var speed = 1500;
    var pause = 5000;
    var next = 1;
    var counter = 0;
 
    // how many images are there?
    var max = $(this).children('a').length;
 
    $(this).children('a:gt(0)').hide();
 
    function fadeImages() {
      if (counter >= max) counter = 0;
      next = counter + 1;
      if (next >= max) next = 0;
 
      $("#partners").children('a:eq(' + counter.toString() + ')').slideUp(speed, function() {
        $("#partners").children('a:eq(' + next.toString() + ')').slideDown(speed);
      });
 
      counter++;
    } // end function fadeImages
 
    imageFader = setInterval(fadeImages, pause); 
  });
});

jQuery Show/Hide for Wordpress Sidebar Widgets

Published
by
ethan
on November 24, 2008
in Source, Wordpress and jQuery
. 0 Comments

Here’s some handy jQuery code to show/hide menu items in Wordpress’s sidebar.

function sidebarHide(element) {
	// this function hides the ul
	// also calls sidebarPlus
	$('#sidebar ul ' + element +' ul').each(function() {
		$(this).hide('fast');
	});
	sidebarPlus(element);
	return false;
}
function sidebarShow(element) {
	// this function shows the ul
	// also calls sidebarMinus
	$('#sidebar ul ' + element +' ul').each(function() {
		$(this).show('fast');
	});
	sidebarMinus(element);
	return false;
}
function sidebarPlus(element) {
	// function appends a + to the title
	// this plus is a link to show the contents
	$('#sidebar ul ' + element + ' h2').each(function() {
		var text = $(this).text();
		var plus = text.lastIndexOf(" -");
		if (plus > 0) {
			text = text.substring(0, plus);
		}
		var link = '<a href="#" onclick="return sidebarShow(\'' + element + '\');">' + text + ' +</a>';
		$(this).html(link);
	});	
}
function sidebarMinus(element) {
	// function appends a - to the title
	// this minus is a link to hide the contents
	$('#sidebar ul ' + element + ' h2').each(function() {
		var text = $(this).text();
		var minus = text.lastIndexOf(" +");
		if (minus) {
			text = text.substring(0, minus);
		}
		var link = '<a href="#" onclick="return sidebarHide(\'' + element + '\');">' + text + ' -</a>';
		$(this).html(link);
	});	
}
 
 
$(document).ready(function() {
 
	$('#sidebar ul li').each(function() {
		var n = $(this).attr('id');
		if (n != '') {
			sidebarHide('#' + n);
		}
	});
 
});

DIVs That Are The Same Height As The Browser Window

Published
by
ethan
on August 8, 2008
in Source, jQuery and xHTML
. 0 Comments

Common problem when building web pages. You want a DIV that’s the same height as the browser window, but you don’t know what the height of the browser window is. It changes from user to user. Well, jQuery to the rescue.

var browser_window_height = 0;
 
$(document).ready(function() {
 
	// this sets the height of the div on init
	$('#fullscreen').each(
 
		function() {
 
			browser_window_height = $(window).height();
			$('#info').text(browser_window_height.toString());
 
			$(this).css('height', browser_window_height.toString() + 'px');
 
		}
 
	);
 
	// this says, if they resize the window, change the height of the div
	$(window).resize(function() {
 
		var new_browser_window_height = $(window).height();
 
		if (new_browser_window_height < browser_window_height) {
			// if the new window size is smaller, resize quickquickquick
			$('#fullscreen').css('height', new_browser_window_height.toString() + 'px');
		} else {
			$('#fullscreen').animate({
				'height' : new_browser_window_height.toString() + 'px'
			}, "slow");
		}
 
		browser_window_height = new_browser_window_height;
 
		$('#info').text(browser_window_height.toString());
 
	});
 
});

View the page (and full source) here.

Fancy Shmancy Tables

Published
by
ethan
on July 30, 2008
in CSS, Source, jQuery and xHTML
. 0 Comments

This kind of table has been around for years. It’s nice to finally know how to make them.

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

<html>
<head>
<title>jQuery day 2 of 15</title>
 
<script type="text/javascript" src="jquery.min.js"></script>
 
<script>
 
$(document).ready(function() {
 
	// this stripes our table very nicely
	$("table tbody tr:odd").addClass("alt");
 
	// now add the hover bit
	$("table tbody tr").hover(
 
		function() {
		// over
			$(this).addClass("highlight");
		},
 
		function() {
		// out
			$(this).removeClass("highlight");
		}
 
	);
 
 
});
 
</script>
 
<style>
table {
	margin: 50px auto 0 auto;
	border: 1px solid #666666;
 
}
thead tr {
	background-color: #666666;
}
th {
	font-weight: bold;
	color: #ffffff;
	padding: 5px;
}
td {
	width: 200px;
	padding: 5px;
}
.alt {
	background-color: #cccccc;
}
.highlight {
	background-color: #ff9900;
}
.highlight td {
	border-top: 1px solid #666666;
	border-bottom: 1px solid #666666;
}
</style>
 
</head>
 
<body>
 
<table cellspacing="0" cellpadding="0">
	<thead>
		<tr>
			<th>One</th>
			<th>Two</th>
			<th>Three</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>One</td>
			<td>Two</td>
			<td>Three</td>
		</tr>
		<tr>
			<td>One</td>
			<td>Two</td>
			<td>Three</td>
		</tr>
		<tr>
			<td>One</td>
			<td>Two</td>
			<td>Three</td>
		</tr>
		<tr>
			<td>One</td>
			<td>Two</td>
			<td>Three</td>
		</tr>
		<tr>
			<td>One</td>
			<td>Two</td>
			<td>Three</td>
		</tr>
	</tbody>
</table>
 
</body>
</html>

My First jQuery

Published
by
ethan
on July 30, 2008
in Source, Uncategorized and jQuery
. 0 Comments

We have a column of gallery names on the left, and a grid of thumbnails on the right. Each gallery name corresponds to a thumbnail, and they are both links to a gallery page. Like this:

We want the thumbnail to “light up” when you hover over the gallery name, and we want the gallery name to light up when you hover over the thumbnail. The solution was original written with a javascript function and a set of onMouseOver() onMouseOut() events. You had two huge javascript function calls for each text link and two huge javascript function calls for each thumbnail link. Ick.

So I rewrote it with jQuery, which I know nothing about. I was able to remove all the onMouseOver() and onMouseOut() crap from all of the links, and I added this jQuery code:

function textToNum(num) {
	if (num == "one") 	{ return "1"; }
	if (num == "two") 	{ return "2"; }
	if (num == "three")   { return "3"; }
	if (num == "four") 	{ return "4"; }
	if (num == "five") 	{ return "5"; }
	if (num == "six") 	{ return "6"; }
	if (num == "seven")   { return "7"; }
	if (num == "eight")    { return "8"; }
	if (num == "nine") 	{ return "9"; }
	return "zero";
}
 
function numToText(num) {
	if (num == "1") { return "one"; }
	if (num == "2") { return "two"; }
	if (num == "3") { return "three"; }
	if (num == "4") { return "four"; }
	if (num == "5") { return "five"; }
	if (num == "6") { return "six"; }
	if (num == "7") { return "seven"; }
	if (num == "8") { return "eight"; }
	if (num == "9") { return "nine"; }
	return "0";
}
 
 
$(document).ready(function(){
 
	// this adds the code to highlight the thumbnails when you hover over the text
	$("#secondaryNavFive ul li a span").hover(
 
		function() {
			// over
 
			var span_id = $(this).attr('id');
			var image_id = textToNum(span_id); // one highlights image with id 1
			$("#" + image_id).css('border-color', '#f89828');
 
		},
 
		function() {
			// out (not hovering any more)
 
			var span_id = $(this).attr('id');
			var image_id = textToNum(span_id); // one highlights image with id 1
			$("#" + image_id).css('border-color', '#333333');
 
		}
 
	);
 
 
	// this adds the code to highlight the TEXT when you hover over the THUMBNAIL
	$("#mainContentFour .thumbs a img").hover(
 
		function() {
			// over
 
			var image_id = $(this).attr('id');
			var span_id = numToText(image_id);
			$("#" + span_id).css('color', '#f89828');
 
		},
 
		function() {
			// out (not hovering any more)
 
			var image_id = $(this).attr('id');
			var span_id = numToText(image_id);
			$("#" + span_id).css('color', '#aaaaaa');
 
		}	
 
	);
 
 
 });