Notions

Archive for the ‘Web Design’ Category

When I first started creating Wordpress themes and sites, I really didn’t muck around too much with the functions.php file too much other than to define dynamic sidebars.  However, my recent contract to redesign a local non-profit organization’s website has changed that.

This organization has a lot of content requiring many pages and subpages.  I found that I kept entering similar code into pages and posts, mainly dealing with design elements.  This led me to explore the use of shortcodes to speed up the process and also simplify entry for whomever will be maintaining the site.

The offical Wordpress area to learn more on the syntax of shortcodes is: Shortcode API « WordPress Codex

Here are a couple that I used to streamline my programming.  First of all open up your functions.php file for your theme.  If you are using someone else’s theme, the best place to put a new function/shortcode definition is at the end of the file before the ?> ending.  Also, when you save the file, make sure you don’t have a line return, or spaces after the ?>

I have two spacer divs I use to create whitespace within an article or page.  Instead of always typing out the entire code, why not create a shortcode?  The classes are defined in my styles.css file.

Example 1:

108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
// Large spacer shortcode //
function lgspace_shortcode() {
   	return '
<div class="lgspace"></div>
 
';
	}
add_shortcode('lgspace', 'lgspace_shortcode');
 
// Small spacer shortcode //
function smspace_shortcode() {
   	return '
<div class="lgspace"></div>
 
';
	}
add_shortcode('smspace', 'smspace_shortcode');

This way I just type [smspace] or [lgspace] to add spacing. The second thing I needed was to add a unique title image to each page along with a clearing div

for the float.  That’s a lot of code to keep repeating.  So this was solved by a shortcode.


Example 2:

120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
// Head image shortcode //
function heading_shortcode($atts, $content = null) {
    extract( shortcode_atts( array(
    'name' => '',
    'ext' => 'gif',
    'path' => '/pathtoyour/images/',
    'url' => ''
    ), $atts ) );
    $file=ABSPATH."$path$name.$ext";
    if (file_exists($file)) {
        $size=getimagesize($file);
        if ($size!==false) $size=$size[3];
        $output = "<img src='".get_option('siteurl')."$path$name.$ext' $size class='floatright' />
       <br class='clear' />
<div class='smspace'></div>
 
";
        if ($url) $output = "<a href='$url' title='$name'>".$output.'</a>';
        return $output;
    }
    else {
        trigger_error("'$path$name.$ext' image not found", E_USER_WARNING);
        return '';
    }
}
add_shortcode('head','heading_shortcode');

Since each title image was a gif file and I stuck to a specific naming convention, inserting these images was a matter of typing [head name=nameofimage]. I didn’t even need to put the extention.

Now isn’t that much easier? Try experimenting with creating some shortcodes to make your programming/blogging much easier. Hope this was helpful!

Future of iPad

January 27th, 2010

iPad1Now that the mysterious Apple device has been unveiled, the techies & opinionated media “gurus” are making their voices heard.  This is my opinion and hunch as to why this will be an important device.

First of all let’s just stop it with the feminine hygiene nonsense.  Yes it is called the iPad–deal with it.  No matter what they called it there would be detractors.  I personally liked “Palette,” “iTab,” or something sexy like “Tabula” with dropping the”i” prefix.  Regardless, that is my last concern with buying the product.  When someone asks you for a notepad in the office do you immediately chuckle and think you are getting a panty shield to write on?  I didn’t think so.

Next there were complaints about the large bezel around the screen.  My hunch is that it serves two purposes: one to let you handle it easily without interacting with the screen. The other is there are most likely components, antennae and chips behind it.  Given the device’s thin profile, i’m sure they needed some extra real estate.

Finally, with regard to 3G–how many people believe someone is not going to come up with an iPhone teathering solution for when you are not at a wifi hotspot?  I can do it with my iPhone and Macbook now.  It is only a matter of time.

iPad2The true import of this device is the delivery of content and productivity.  This device will deliver sharp, watchable movies, podcasts along with your music.  Coupled with something like the Orb program on the iPhone, you will be able to remotely access your home media library.  This is huge!  I do that now on my iPhone, but watching a movie/podcast on the small screen is a last resort (i.e. on a plane trip).  This makes that proposition much more palatable.

Another HUGE difference is iWork on the device.  Having the ability to work on presentations, documents and spreadsheets with a larger sized keyboard and touch screen gestures will take mobile productivity to the next level.  I already do many of these things in a pinch on the phone and on a smaller surface.  I often will FTP into my site and directly edit php, html & CSS files to make quick changes.  I feel developers will be coming up with mobile blogging/webdev apps to run on this device.  I would much rather carry this in my backpack than the laptop knowing I can do most anything with it.

When I say most anything, just think about when the iPhone first came out.  You were pretty limited to what you could do with it.  Now, there are productivity programs for almost everything.  Adobe comes to mind when I think about possibilities.  I could envision Lightroom for iPad to give you photo editing capabilities.  PS has an app for the phone.  Now with extra real estate and gestures, photo editing may be taken to the next level wherever you may be.  Especially since there is an interface to allow one to access photos directly from your camera.  Cool stuff!

Finally, the entry price point for the device is perfect to take on Kindle and the other readers.  Why buy a monochrome “reader” when for a couple hundred more, you can so much at your fingertips.  This is a remarkable achievement.  I was thinking it was going to be $699, which is where the top wifi model is priced.

All in all I feel this iPad will prove to be an important device built on a flexible, established OS which already has millions of apps ready to run.  Developers will be clamoring to design tools, applications and games to take advantage of the increased footprint.  I, for one will be among those taking advantage of what it has to offer and will in the future.

XML Google Maps and Slimbox

September 15th, 2009

This is part two of my implementation of XML Google Maps & NextGEN galleries in Wordpress as a geotagged photo solution.  After getting the maps to work on a basic level, there was one thing left to do.  I wanted the images which popped up from the map in the infowindow to open with a “lightbox” type effect — rather than opening in a new window.

Normally, opening images in Wordpress using scripted effects like Litebox would simply require a “rel=’lightbox” option in your HREF image tag (along with the appropriate plugin as well).  However this solution does not work this way with Google Maps implemented in this way.  Without getting into the gory details, which I am ill-equipped to accurately explain, I can say this: Google Maps uses iframes to load its maps into. Javascript has issues in dealing with contents in and out of iframes.  Why Google uses iframes since they have been depreciated by the W3C, but I am sure they have a reason.

Nonetheless after numerous tries, I have cobbled together a fix for anyone wanting to use, in this case Slimbox2, with XML Google Maps and NextGEN galleries to display your photos on a map.

Prerequisites:

- Wordpress site up and running.  I am running 2.7.1, so it’s not necessary to be running the very latest 2.8.4.

- NextGEN Gallery plugin installed, working and some geotagged photos in a gallery.

- XML Google Maps plugin installed and configured.

- Some version of Litebox effect (I use Slimbox2 based on personal preferences).

Now once you have a page set up to display a map linked to a gallery with XML Google Maps, it is time to get Slimbox working with it.  In my last post (Default markers with XML Google Maps & NGG Gallery), I talked about editing the xmlgooglemaps_show.php file in the “xml-google-maps” folder in the “plugins” folder of your Wordpress installation to change the default markers.  Here you will be working with that same file.  If you haven’t already done so, make a copy of the xmlgooglemaps_show.php.

Open xmlgooglemaps_show.php using your favorite editor (I use TextMate on Mac).  At the top you will see a block of code something like this (yours will be slightly different):

$error = "";
$output .= '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'."\n";;
$output .= '<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" style="height: 100%">'."\n";;
$output .= '<head>'."\n";;
$output .= '<meta http-equiv="content-type" content="text/html; charset=utf-8" />'."\n";;
$output .= '<title>Google Maps</title>'."\n";;

Now we are going to add the following lines after the statement and before the statement. I like to keep the js lines together and the css lines together:</p> <div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$output</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">'<script type="text/javascript" src="http://www.kevinpadams.com/wp-includes/js/jquery/jquery.js"></script>'</span><span style="color: #339933;">.</span><span style="color: #0000ff;">"<span style="color: #000099; font-weight: bold;">\n</span>"</span><span style="color: #339933;">;;</span> <span style="color: #000088;">$output</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">'<script type="text/javascript" src="http://www.kevinpadams.com/wp-content/plugins/wp-slimbox2/javascript/slimbox2.js?ver=2.02"></script>'</span><span style="color: #339933;">.</span><span style="color: #0000ff;">"<span style="color: #000099; font-weight: bold;">\n</span>"</span><span style="color: #339933;">;;</span> <span style="color: #000088;">$output</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">'<link rel="stylesheet" href="http://www.kevinpadams.com/wp-content/themes/WhiteGrid/map.css" type="text/css" media="screen" />'</span><span style="color: #339933;">.</span><span style="color: #0000ff;">"<span style="color: #000099; font-weight: bold;">\n</span>"</span><span style="color: #339933;">;;</span> <span style="color: #000088;">$output</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">'<link rel="stylesheet" href="http://www.kevinpadams.com/wp-content/plugins/wp-slimbox2/slimbox2.css" type="text/css" media="screen" />'</span><span style="color: #339933;">.</span><span style="color: #0000ff;">"<span style="color: #000099; font-weight: bold;">\n</span>"</span><span style="color: #339933;">;;</span></pre></div></div> <p>The lines that were added were jquery.js, slimbox2.js, map.css and wp-slimbox.css.  The map.css would not exist for your installation.  I just created a separate CSS file for the map styling, but you don’t have to.  Omit if desired.</p> <p>Normally, these files would be loaded in your header.php, but since the map gets loaded into an iframe, it ends up having its own header information.  Hence the need to put these here.  Now with these in place, save the xmlgooglemaps_show.php on your server and go to the xmlgooglemaps settings in your admin area.  All the way down at the bottom, you will see the area where you will place the html for your NGG map links.  Here is the code you will use for the HREF portion:</p> <div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;"><</span>a onclick<span style="color: #339933;">=</span><span style="color: #0000ff;">"jQuery.slimbox(this.href); return false;"</span> rel<span style="color: #339933;">=</span><span style="color: #0000ff;">"lightbox"</span> href<span style="color: #339933;">=</span><span style="color: #0000ff;">"<span style="color: #009933; font-weight: bold;">%F</span>ULLPATH%"</span> target<span style="color: #339933;">=</span><span style="color: #0000ff;">"_blank"</span><span style="color: #339933;">></span> <span style="color: #339933;"><</span>img style<span style="color: #339933;">=</span><span style="color: #0000ff;">"border: 0; float: left; margin: 5px 10px 5px 5px;"</span> src<span style="color: #339933;">=</span><span style="color: #0000ff;">"%THUMBPATH%"</span> alt<span style="color: #339933;">=</span><span style="color: #0000ff;">""</span> <span style="color: #339933;">/></span> <span style="color: #339933;"></</span>a<span style="color: #339933;">></span></pre></div></div> <p>Hopefully, this will get you on your way.  Now, it will be noted that the Slimbox effect still does not pop outside the map’s iframe.  I have tried to research this and cannot get it work.  Seems others have the same issue and I tried to correct this using other techniques.  Suffice to say, with my limited scripting ability I can’t wrap my head around it so it will have to stand as is for now.  I just adjusted the map height to allow for this anomaly.  All in all it works and that’s good enough for government work.  Happy trails!</p> <div class="grid_7 metadata"> <img src="http://www.kevinpadams.com/wp-content/themes/WhiteGrid/images/tag.png"> <a href="http://www.kevinpadams.com/category/photos/" title="View all posts in Photography" rel="category tag">Photography</a>, <a href="http://www.kevinpadams.com/category/web-design/" title="View all posts in Web Design" rel="category tag">Web Design</a> <br /> <img src="http://www.kevinpadams.com/wp-content/themes/WhiteGrid/images/comment.png"> <a href="http://www.kevinpadams.com/2009/09/xml-google-maps-and-slimbox/#respond" title="Comment on XML Google Maps and Slimbox">No Comments</a> </div> </div> <!--End Entry Div --> <div class="grid_8 alpha omega entryspace"></div> <div class="entry grid_8 alpha"> <!-- Start Entry Div --> <div id="articlehdr" class="grid_8 alpha"> <!-- Start articlehdr Div --> <div class="posthdr" id="post-1145"> <h2><a href="http://www.kevinpadams.com/2009/09/default-markers-with-xml-google-maps-ngg-gallery/" rel="bookmark" title="Link to Default markers with XML Google Maps & NGG Gallery">Default markers with XML Google Maps & NGG Gallery</a></h2> </div> <h3 class="datehdr">September 13th, 2009</h3> </div> <p>In search of an integrated way to display geotagged photos in Google Maps, I discovered a wonderful plugin called “<a href="http://wordpress.org/extend/plugins/xml-google-maps/" target="_blank">XML Google Maps</a>.”  This Wordpress plugin allows one to incorporate their <a href="http://wordpress.org/extend/plugins/nextgen-gallery/" target="_blank">NextGen</a> galleries plotted on a map.  The one thing I didn’t like about it, however, was the inability to use standard Google map markers for photo positions on the map.  The plugin automatically places tiny photo thumbnails on the map, which I felt a bit distracting.  So here is a way for you to change this to display normal markers instead.</p> <p>In your plug-ins folder, look for the xml-google-maps folder.  Inside you will find a file called “xmlgooglemaps_show.php.”  Edit this file and look for the following section:</p> <div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">//NGGallery Feature if Images are Geocoded</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">(</span><span style="color: #000088;">$params</span><span style="color: #339933;">-&</span>gt<span style="color: #339933;">;</span>getNggCount<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">&</span>gt<span style="color: #339933;">;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000088;">$ngg</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> xmlgooglemaps_nggFunctions<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span>   <span style="color: #b1b100;">if</span> <span style="color: #009900;">(</span><span style="color: #000088;">$ngg</span><span style="color: #339933;">-&</span>gt<span style="color: #339933;">;</span>isNggInstalled<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span>   <span style="color: #b1b100;">if</span> <span style="color: #009900;">(</span><span style="color: #000088;">$ngg</span><span style="color: #339933;">-&</span>gt<span style="color: #339933;">;</span>isExifInstalled<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000088;">$rows</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$ngg</span><span style="color: #339933;">-&</span>gt<span style="color: #339933;">;</span>getNggPics<span style="color: #009900;">(</span><span style="color: #000088;">$params</span><span style="color: #339933;">-&</span>gt<span style="color: #339933;">;</span>nggalGalleries<span style="color: #339933;">,</span><span style="color: #000088;">$params</span><span style="color: #339933;">-&</span>gt<span style="color: #339933;">;</span>nggalPics<span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #b1b100;">foreach</span> <span style="color: #009900;">(</span><span style="color: #000088;">$rows</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$row</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000088;">$creationdate</span> <span style="color: #339933;">=</span> date_i18n<span style="color: #009900;">(</span>get_option<span style="color: #009900;">(</span><span style="color: #0000ff;">'date_format'</span><span style="color: #009900;">)</span><span style="color: #339933;">.</span><span style="color: #0000ff;">' '</span><span style="color: #339933;">.</span>get_option<span style="color: #009900;">(</span><span style="color: #0000ff;">'time_format'</span><span style="color: #009900;">)</span><span style="color: #339933;">,</span> <span style="color: #000088;">$row</span><span style="color: #009900;">[</span><span style="color: #0000ff;">"creation"</span><span style="color: #009900;">]</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$lat</span> <span style="color: #339933;">=</span> xmlgooglemaps_helper<span style="color: #339933;">::</span><span style="color: #004000;">latitude2Text</span><span style="color: #009900;">(</span><span style="color: #000088;">$row</span><span style="color: #009900;">[</span><span style="color: #0000ff;">"gpslat"</span><span style="color: #009900;">]</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$lon</span> <span style="color: #339933;">=</span> xmlgooglemaps_helper<span style="color: #339933;">::</span><span style="color: #004000;">longitude2Text</span><span style="color: #009900;">(</span><span style="color: #000088;">$row</span><span style="color: #009900;">[</span><span style="color: #0000ff;">"gpslon"</span><span style="color: #009900;">]</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$html</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$params</span><span style="color: #339933;">-&</span>gt<span style="color: #339933;">;</span>nggalMarkerTemplate<span style="color: #339933;">;</span> <span style="color: #000088;">$html</span> <span style="color: #339933;">=</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"<span style="color: #009933; font-weight: bold;">%F</span>ULLPATH%"</span><span style="color: #339933;">,</span><span style="color: #000088;">$row</span><span style="color: #009900;">[</span><span style="color: #0000ff;">"path"</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span><span style="color: #000088;">$html</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$html</span> <span style="color: #339933;">=</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"%THUMBPATH%"</span><span style="color: #339933;">,</span><span style="color: #000088;">$row</span><span style="color: #009900;">[</span><span style="color: #0000ff;">"thumbpath"</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span> <span style="color: #000088;">$html</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$html</span> <span style="color: #339933;">=</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"%TITLE%"</span><span style="color: #339933;">,</span><span style="color: #000088;">$row</span><span style="color: #009900;">[</span><span style="color: #0000ff;">"title"</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span><span style="color: #000088;">$html</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$html</span> <span style="color: #339933;">=</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"%DESCRIPTION%"</span><span style="color: #339933;">,</span> <span style="color: #000088;">$row</span><span style="color: #009900;">[</span><span style="color: #0000ff;">"description"</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span> <span style="color: #000088;">$html</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$html</span> <span style="color: #339933;">=</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"%CREATIONDATE%"</span><span style="color: #339933;">,</span> <span style="color: #000088;">$creationdate</span><span style="color: #339933;">,</span> <span style="color: #000088;">$html</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$html</span> <span style="color: #339933;">=</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"%LATITUDE%"</span><span style="color: #339933;">,</span> <span style="color: #000088;">$lat</span><span style="color: #339933;">,</span> <span style="color: #000088;">$html</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$html</span> <span style="color: #339933;">=</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">(</span><span style="color: #0000ff;">"%LONGITUDE%"</span><span style="color: #339933;">,</span> <span style="color: #000088;">$lon</span><span style="color: #339933;">,</span> <span style="color: #000088;">$html</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$googlemaps</span><span style="color: #339933;">-&</span>gt<span style="color: #339933;">;</span>addMarker<span style="color: #009900;">(</span><span style="color: #000088;">$row</span><span style="color: #009900;">[</span><span style="color: #0000ff;">"gpslat"</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span><span style="color: #000088;">$row</span><span style="color: #009900;">[</span><span style="color: #0000ff;">"gpslon"</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span><span style="color: #000088;">$html</span><span style="color: #339933;">,</span><span style="color: #0000ff;">""</span><span style="color: #339933;">,</span><span style="color: #0000ff;">""</span><span style="color: #339933;">,</span><span style="color: #000088;">$row</span><span style="color: #009900;">[</span><span style="color: #0000ff;">"thumbpath"</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span><span style="color: #000088;">$row</span><span style="color: #009900;">[</span><span style="color: #0000ff;">"thumbpath"</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">32</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">32</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">32</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">32</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">16</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">16</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre></div></div> <p>Replace the last line with:</p> <div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$googlemaps</span><span style="color: #339933;">-&</span>gt<span style="color: #339933;">;</span>addMarker<span style="color: #009900;">(</span><span style="color: #000088;">$row</span><span style="color: #009900;">[</span><span style="color: #0000ff;">"gpslat"</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span><span style="color: #000088;">$row</span><span style="color: #009900;">[</span><span style="color: #0000ff;">"gpslon"</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span><span style="color: #000088;">$html</span><span style="color: #339933;">,</span><span style="color: #0000ff;">""</span><span style="color: #339933;">,</span><span style="color: #0000ff;">""</span><span style="color: #339933;">,</span><span style="color: #0000ff;">"icons/mm_20_"</span><span style="color: #339933;">.</span><span style="color: #000088;">$params</span><span style="color: #339933;">-&</span>gt<span style="color: #339933;">;</span>gpxCheckpointMarkerColor<span style="color: #339933;">.</span><span style="color: #0000ff;">"_s.png"</span><span style="color: #339933;">,</span><span style="color: #0000ff;">"icons/mm_20_shadow.png"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></pre></div></div> <p>This should display the thumbnails with the regular Google markers.  Before making these changes, it is always a good idea to make a copy of the xmlgooglemaps_show.php file.  Now if I can only get Lightbox effects to trigger inside the Google iframe, then it will be perfect.</p> <div class="grid_7 metadata"> <img src="http://www.kevinpadams.com/wp-content/themes/WhiteGrid/images/tag.png"> <a href="http://www.kevinpadams.com/category/tutorial/" title="View all posts in Tutorial" rel="category tag">Tutorial</a>, <a href="http://www.kevinpadams.com/category/web-design/" title="View all posts in Web Design" rel="category tag">Web Design</a> <br /> <img src="http://www.kevinpadams.com/wp-content/themes/WhiteGrid/images/comment.png"> <a href="http://www.kevinpadams.com/2009/09/default-markers-with-xml-google-maps-ngg-gallery/#respond" title="Comment on Default markers with XML Google Maps & NGG Gallery">No Comments</a> </div> </div> <!--End Entry Div --> <div class="grid_8 alpha omega entryspace"></div> <div id="navigation" class="grid_8 alpha omega"> <div class="navleft grid_2 alpha"><a href="http://www.kevinpadams.com/category/web-design/page/2/" class="nextpostslink">«« Older Notions</a></div> <div class="navright grid_2 omega"></div> </div> <div class="clear"></div> </div> <!-- End Content Div--> <div class="grid_3" id="sidebar"> <ul> <div class="grid_3 alpha widgetbox widget_text"> <div class="textwidget"><form method="get" id="searchform" action="<?php bloginfo('url'); ?>/"> <label class="hidden" for="s"><?php _e('Search for:'); ?></label> <div><input type="text" value="Search" onblur="if(this.value == '') {this.value = 'Search';}" onfocus="if(this.value == 'Search') {this.value = '';}" name="s" id="s" /> <input type="submit" class="hidden" id="searchsubmit" value="Search" /> </div> </form></div> </div> <div class="grid_3 alpha widgetbox widget_recent_entries"> <h3>Latest Posts</h3> <ul> <li><a href="http://www.kevinpadams.com/2010/04/blogging-on-the-ipad/" title="Blogging on the iPad">Blogging on the iPad </a></li> <li><a href="http://www.kevinpadams.com/2010/03/defining-wordpress-shortcodes/" title="Defining Wordpress Shortcodes">Defining Wordpress Shortcodes </a></li> <li><a href="http://www.kevinpadams.com/2010/02/1302/" title="History of Desire">History of Desire </a></li> <li><a href="http://www.kevinpadams.com/2010/01/future-of-ipad/" title="Future of iPad">Future of iPad </a></li> <li><a href="http://www.kevinpadams.com/2010/01/haiti-relief-logistics/" title="Haiti & Relief Logistics">Haiti & Relief Logistics </a></li> </ul> </div> <div class="grid_3 alpha widgetbox widget_recent_comments"> <h3>Recent Comments</h3> <ul id="recentcomments"><li class="recentcomments"><a href='http://%/solarsp4' rel='external nofollow' class='url'>JACK</a> on <a href="http://www.kevinpadams.com/2010/04/blogging-on-the-ipad/comment-page-1/#comment-514">Blogging on the iPad</a></li><li class="recentcomments">xbox store on <a href="http://www.kevinpadams.com/2007/03/homeward-bound/comment-page-1/#comment-513">Homeward bound</a></li><li class="recentcomments"><a href='http://www.kevinpadams.com' rel='external nofollow' class='url'>Kevin</a> on <a href="http://www.kevinpadams.com/2010/01/future-of-ipad/comment-page-1/#comment-410">Future of iPad</a></li><li class="recentcomments">VAMom on <a href="http://www.kevinpadams.com/2010/01/future-of-ipad/comment-page-1/#comment-409">Future of iPad</a></li><li class="recentcomments"><a href='http://www.kevinpadams.com' rel='external nofollow' class='url'>Kevin</a> on <a href="http://www.kevinpadams.com/2010/01/haiti-relief-logistics/comment-page-1/#comment-406">Haiti & Relief Logistics</a></li></ul> </div><div class="grid_3 alpha widgetbox widget_twitter"><div id="twitlogo"><img src="http://www.kevinpadams.com/wp-content/themes/WhiteGrid/images/twit.png"></div><ul class="twitter"><li>No public Twitter messages.</li></ul><h3><a target="_blank" href="http://twitter.com/kevinpadams" class="twitter_title_link">tweets@kevinpadams</a></h3></div><div class="grid_3 alpha widgetbox adv-blogroll"><h3>Links</h3><ul class="ab_bookmarks"><li><a href="http://bigthink.com/" title="A global forum connecting people and ideas." target="_blank">Big Think</a></li><li><a href="http://www.gofugyourself.com" title="Another really funny blog about celebrity. This one focuses on fashion. Makes me wish I had something to consistently write about to be this funny." target="_blank">GoFugYourself</a></li><li><a href="http://www.good.is/" title="Good. Media that matters!">Good</a></li><li><a href="http://www.healthbolt.net" title="Great health related blog with many cool facts and tips for healthy living." target="_blank">Healthbolt</a></li><li><a href="http://www.thehuffingtonpost.com" title="Offers syndicated columnists, blogs and news stories with moderated comments." target="_blank">Huffington Post</a></li><li><a href="http://www.i-dose.us/" title="Binaural beats to affect your mood. Try it you’ll like it!">iDose</a></li><li><a href="http://www.instructables.com" title="How to make everything (and anything) from the practical to the silly." target="_blank">Instructables</a></li><li><a href="http://interfacelift.com" title="Amazing backgrounds and icons for your Mac (or PC)." target="_blank">Interfacelift</a></li><li><a href="http://iseen.blogspot.com/" title="Art & Design Blog. Cutting edge design trends." target="_blank">iSeen</a></li><li><a href="http://www.joelschaan.com" title="Joel is a singer/songwriter for TS67. Did his site as well." target="_blank">JoelSchaan.com</a></li><li><a href="http://www.kevinadamsphotography.com" rel="contact" title="My original site with work related stuff" target="_top">Kevin Adams Photography</a></li><li><a href="http://www.pandora.com" title="Pandora is an internet radio station that streams music based on a band you enjoy." target="_blank">Pandora</a></li><li><a href="http://steamykitchen.com/blog/" title="Yummy site from a cool blogger.">Steamy Kitchen</a></li><li><a href="http://streamingtvepisodes.com/" title="Need to catch up on Grey’s Anatomy or countless other shows? Go here!">Streaming TV Episodes</a></li><li><a href="http://www.ted.com/" title="Ideas worth spreading" target="_blank">TED</a></li><li><a href="http://www.testsite67.com" title="Friends’ band website which I created" target="_blank">Test Site 67</a></li><li><a href="http://www.thaifly.com" title="Great site for getting deep discount tickets to destinations in Asia. My last airfare with them saved $400 over booking myself." target="_blank">Thaifly</a></li><li><a href="http://www.thecoolhunter.net/" title="Everything cool (and lots of stuff we cannot afford but fun to look at).">The Cool Hunter</a></li><li><a href="http://www.thecoolhunter.net/" title="The Cool Hunter brings today’s most happening movements, styles and trends to readers across the globe." target="_blank">The Coolhunter</a></li><li><a href="http://www.thesuperficial.com" title="EXTREMELY funny blog/commentary on celebrities. I’m not a big celeb fanatic, but the creative writing makes this a winner." target="_blank">The Superficial</a></li><li><a href="http://www.videojug.com" title="Loads of expert DYI videos on everything from recipes to how to properly kiss someone." target="_blank">Videojug</a></li><li><a href="http://www.worryfreevacations.com" title="Worryfree is one of the nation’s largest vacation package service that offers value-priced vacations on chartered airplanes. Want a good deal to Vegas or Cancun? Worryfree is for you!" target="_blank">Worryfree Vacations</a></li><li><a href="http://barbieandzack.blogspot.com/" rel="friend" title="Zack is an old friend from the AOL hayday. This is his personal blog from NoVa." target="_blank">Zack & Barbie’s Blog</a></li><li><a href="http://zenhabits.net/" title="Tips on living a more simplified, productified life">Zen Habits</a></li></ul></div><div class="grid_3 alpha widgetbox widget_meta"><h3>Meta</h3> <ul> <li><a href="http://www.kevinpadams.com/wp-login.php">Log in</a></li> <li><a href="http://www.kevinpadams.com/feed/" title="Syndicate this site using RSS 2.0">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="http://www.kevinpadams.com/comments/feed/" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li> </ul> </div><div class="grid_3 alpha widgetbox widget_archive"><h3>Archives</h3> <ul> <li><a href='http://www.kevinpadams.com/2010/04/' title='April 2010'>April 2010</a> (1)</li> <li><a href='http://www.kevinpadams.com/2010/03/' title='March 2010'>March 2010</a> (1)</li> <li><a href='http://www.kevinpadams.com/2010/02/' title='February 2010'>February 2010</a> (1)</li> <li><a href='http://www.kevinpadams.com/2010/01/' title='January 2010'>January 2010</a> (4)</li> <li><a href='http://www.kevinpadams.com/2009/12/' title='December 2009'>December 2009</a> (1)</li> <li><a href='http://www.kevinpadams.com/2009/11/' title='November 2009'>November 2009</a> (1)</li> <li><a href='http://www.kevinpadams.com/2009/10/' title='October 2009'>October 2009</a> (5)</li> <li><a href='http://www.kevinpadams.com/2009/09/' title='September 2009'>September 2009</a> (8)</li> <li><a href='http://www.kevinpadams.com/2009/08/' title='August 2009'>August 2009</a> (3)</li> <li><a href='http://www.kevinpadams.com/2009/04/' title='April 2009'>April 2009</a> (2)</li> <li><a href='http://www.kevinpadams.com/2009/02/' title='February 2009'>February 2009</a> (3)</li> <li><a href='http://www.kevinpadams.com/2009/01/' title='January 2009'>January 2009</a> (7)</li> <li><a href='http://www.kevinpadams.com/2008/12/' title='December 2008'>December 2008</a> (7)</li> <li><a href='http://www.kevinpadams.com/2008/11/' title='November 2008'>November 2008</a> (7)</li> <li><a href='http://www.kevinpadams.com/2008/10/' title='October 2008'>October 2008</a> (9)</li> <li><a href='http://www.kevinpadams.com/2008/09/' title='September 2008'>September 2008</a> (11)</li> <li><a href='http://www.kevinpadams.com/2008/07/' title='July 2008'>July 2008</a> (3)</li> <li><a href='http://www.kevinpadams.com/2008/05/' title='May 2008'>May 2008</a> (1)</li> <li><a href='http://www.kevinpadams.com/2008/04/' title='April 2008'>April 2008</a> (5)</li> <li><a href='http://www.kevinpadams.com/2007/10/' title='October 2007'>October 2007</a> (2)</li> <li><a href='http://www.kevinpadams.com/2007/09/' title='September 2007'>September 2007</a> (4)</li> <li><a href='http://www.kevinpadams.com/2007/08/' title='August 2007'>August 2007</a> (4)</li> <li><a href='http://www.kevinpadams.com/2007/07/' title='July 2007'>July 2007</a> (3)</li> <li><a href='http://www.kevinpadams.com/2007/06/' title='June 2007'>June 2007</a> (7)</li> <li><a href='http://www.kevinpadams.com/2007/05/' title='May 2007'>May 2007</a> (26)</li> <li><a href='http://www.kevinpadams.com/2007/04/' title='April 2007'>April 2007</a> (6)</li> <li><a href='http://www.kevinpadams.com/2007/03/' title='March 2007'>March 2007</a> (13)</li> <li><a href='http://www.kevinpadams.com/2007/02/' title='February 2007'>February 2007</a> (2)</li> </ul> </div> </ul> </div> <!-- End Sidebar Div --> <div class="grid_12" id="footer"> <div id="fleft" class="grid_8 alpha"> </div> <div id="fright" class="grid_3 omega"> </div> <div class="clear"></div> <p> kevinpadams.com created and maintained by <a href="mailto:kevin@kevinpadams.com">Kevin P. Adams</a>. </p> </div> <!-- End Footer Div --> <div class="clear"></div> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-2041287-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga); })(); </script> </div> <!-- End Wrapper Div --> </body> </html>