gpDojoGallery: A Dojo Photo Gallery Widget

Ajax, Dojo, dojo-widgets

I added a new photo gallery to galleries.digitalvilliage.com. I created the Photo Gallery widget using Dojo Toolkit about a year ago for a project that I have been working on. I recently updated to give it more options than I needed for my project.

The gpDojoGallery widget can be set to display thumbnail images in the center, left, right, top, or bottom of the page. When the thumbnails are set to the center position, the dojox.image.Lightbox module can be used to display the large image.

The widget receives a JSON object that contains the image information (location, width, height, etc). I store the information using dojo.data.ItemFileReadStore, so it was easy to add a pics-per-page option just be limiting the number items to be read within the store.

?View Code JAVASCRIPT
if (this.picsPerPage) {
	request = imageStore.fetch({onBegin: startFetch, onError: fetchFailed, onComplete: initGallery, start: 0, count: this.picsPerPage});
}  else {
	request = imageStore.fetch({onBegin: startFetch, onError: fetchFailed, onComplete: initGallery});
}

The gpDojoGallery widget was fairly simple to create, but it has enough options to be a very versatile photo gallery. You can view demos on my digitalvilliage.com site. The widget (and demos) can be downloaded from GitHub.

Checkout My New Site - T-shirts For Geeks

A JQuery Progress Bar Plugin

Ajax, JQuery, plugins

While working on the imGoogleMaps upgrade, I realized that I had to add a progress bar. Rather than creating the progress bar functionality in imGoogleMaps, I decided to create a separate JQuery plugin – imProgressBar. It was simple to develop and easy to use – and I even took the time to create over 20 bar graphics.

Continue reading

Checkout My New Site - T-shirts For Geeks

CakePHP and JQuery

Ajax, CakePHP, JQuery

Although Prototype is the default Javascript Framework for CakePHP, using JQuery (or any other Ajax Framework) with Cake could not be easier. Perhaps the most difficult aspect of integrating JQuery with Cake was trying to find documentation on some of those little things that are necessary to return a result set without an error (see my post, CakePHP and Ajax: Missing View).

Note: I purposely wrote this post as if I were speaking to someone who has never used CakePHP. So some parts of this post may be common knowledge to the more experienced Bakers.

Continue reading

Checkout My New Site - T-shirts For Geeks

What Is Your Favorite IDE?

IDE

I have used Dreamweaver on my PC for many years. I think that it is the best IDE on the market. Why? Because both novice and seasoned web developers can use the same tool. And both will find it beneficial.

That being said, when I began to use my Mac for web development, I did not want to dish out the bucks for Dreamweaver, so I started using Aptana Studio.

I was moving deeply into Ajax development and I like the fact that Aptana Studio had built in support for many Javascript Frameworks (JQuery, YUI, Dojo, etc).

I also am a PHP developer, so Aptana Studio’s built in support for PHP was also a consideration. I’ve used this IDE when developing with CakePHP and CodeIgniter.

More recently, I have used Aptana Studio on my Ubuntu box while doing Django development (see my post: Setting Up Ubuntu For Web Development).

So what is your favorite IDE and Why?

Checkout My New Site - T-shirts For Geeks

JQuery Plugin: imBannerRotater

Ajax, plugins

Note: The imBannerRotater has been replaced with gpImageRotate.
I created simple JQuery plugin that rotates images on a page. Actually, there are three modes: random, rotate, carousel, and portfolio. In the default mode, random, the plugin will display a randomly selected image. In the rotate mode, the plugin will rotate images on a page (fading in/out). In this mode, you can select the speed of the rotation. In the carousel mode, the images will move to the left in a carousel effect. I recently added a portfolio mode that using the same carousel effect, but the images are displayed differently. The image data can be retrieved ajaxally (json or a comma separated list). If the data is Json, a url can be added for each image. You can also set the image title and set whether the url will appear in a separate window (target = ‘_blank’) or in the same window (target = ‘_self’).

Continue reading

Checkout My New Site - T-shirts For Geeks

YUI Dependency Configurator

Ajax, YUI

The YUI Depency Configurator is a tool that eliminates the need to try to remember which YUI files to load.

Select the components that you that you need by clicking on buttons labeled with each component ((interface widgets, css, utilities, etc) and the Configurator will create a url string that will load both js and css files.

So instead of:

<link rel="stylesheet" type="text/css" href="lib/yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/assets/skins/sam/skin.css"> 
<link rel="stylesheet" type="text/css" href="lib/yui/calendar/assets/skins/sam/calendar.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/datatable/assets/skins/sam/databale.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/accordionview/accordionview.css"> 
<link type="text/css" rel="stylesheet" href="lib/yui/autocomplete/assets/skins/sam/autocomplete.css">
 
<script type="text/javascript" src="lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="lib/yui/resize/resize-min.js"></script>
<script type="text/javascript" src="lib/yui/layout/layout-min.js"></script>
<script type="text/javascript" src="lib/yui/menu/menu-min.js"></script>
<script type="text/javascript" src="lib/yui/button/button-min.js"></script>
<script type="text/javascript" src="lib/yui/tabview/tabview-min.js"></script>
<script type="text/javascript" src="lib/yui/calendar/calendar-min.js"></script>
<script type="text/javascript" src="lib/yui/datasource/datasource-min.js"></script>
<script type="text/javascript" src="lib/yui/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="lib/yui/animation/animation-min.js"></script>
<script type="text/javascript" src="lib/yui/json/json-min.js"></script>
<script type="text/javascript" src="lib/yui/datatable/datatable-min.js"></script>
<script type="text/javascript" src="lib/yui/connection/connection-min.js"></script>
<script type="text/javascript" src="lib/yui/selector/selector-min.js"></script>

You can use the YUI Dependency Configurator to create::

<!-- Combo-handled YUI CSS files: --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts/reset-fonts.css&2.8.0r4/build/assets/skins/sam/skin.css"> 
<!-- Combo-handled YUI JS files: --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&2.8.0r4/build/datasource/datasource-min.js&2.8.0r4/build/autocomplete/autocomplete-min.js&2.8.0r4/build/container/container-min.js&2.8.0r4/build/menu/menu-min.js&2.8.0r4/build/button/button-min.js&2.8.0r4/build/calendar/calendar-min.js&2.8.0r4/build/datatable/datatable-min.js&2.8.0r4/build/resize/resize-min.js&2.8.0r4/build/selector/selector-min.js&2.8.0r4/build/tabview/tabview-min.js"></script>

Another advantage of using the YUI Dependency Configurator is that the these files are not loaded from your server. You can select to link to files in either the Yahoo or Google CDN’s.

You can also bookmark or email the configuration. JQuery UI Themeroller has a similar process. The major difference is that the ThemeRoller combines all selected components into a single file that is downloaed.

Checkout My New Site - T-shirts For Geeks

JQuery Plugin: imUpsideDownTabber

JQuery, plugins

While designing this blog, I decided that I wanted to use tabs to display certain pages. I needed a JQuery Plugin that worked similarly to jTabber except that I wanted the tabs to display underneath the content. In addition, I wanted the relevant content to slide down (animated) when the tab was clicked. I read somewhere that I could use jTabber to accomplish this, but I thought that it would be easier if I just created the plugin myself. So I created the JQuery Plugin, imUpsideDownTabber (I couldn’t think of a better name). Click on the menu items at the top of this page (about, links, recent) to see the plugin in action.

Continue reading

Checkout My New Site - T-shirts For Geeks

Dojo vs JQuery, Part 1

Dojo, JQuery

Although I had created a few code snippets using Scriptaculous/Prototype, Dojo Toolkit was the first Javascript Framework that I really learned. I had read about (and downloaded) it quite a few years before I actually used it. I purchased a couple of books (Mastering Dojo: JavaScript and Ajax Tools for Great Web Experiences (Pragmatic Programmers) and Dojo: The Definitive Guide) to help me get started. I was working on a project where web pages would be dynamically created. I have to admit, I struggled. Although Dojo is a  “Javascript” Framework, learning it was like learning a new language – before the discovery of the Rosetta Stone. While I was able to learn the basics from reading the books and looking at the examples on Dojo’s website, in many cases, I just could not find the documentation to do what I wanted to do (or how I wanted to do it). So I guessed. And guessed again. And continually guessed until, “Eureka!”. No that didn’t work either…

Continue reading

Checkout My New Site - T-shirts For Geeks

Moving From Flash to Ajax, Javascript Animation Class

Ajax, Javascript

After many years of creating Flash-enabled websites (and writing a lot of ActionScript), I decided to explore the use of Ajax. I had grown so accustom to developing websites where page refreshes weren’t required that I rarely created websites using HTML only. From everything that I read prior creating website using Ajax, I thought that it had the promise to replace Flash. My primary reason for exploring the use of Ajax to create websites was because, as I learned more about marketing a website (and how most search engines don’t/can’t index Flash-only sites), I decided that it was better to appear in a search engine’s listing than to have cool navigation (and animation!).

Continue reading

Checkout My New Site - T-shirts For Geeks