Making a photo gallery with jQuery Tools – Overlay and Tabs:
Why jQuery tools? It’s a great library that uses minimal code and is very light to load. If you want to use a big heavy light-box photo gallery then disregard this post.
jQuery Tools Tabs:
The tabs are pretty easy to setup.
For each gallery you need a tab and the photos will show up in the pane associated with that tab.
Using JQuery and getting the selector right.
doing the jQuery thing
When redesigning Ben’s Heart there were a few things that I wanted to add functionally to make the site feel nicer. One of these things was the “lightbox” effect when clicking an image. This is a great and simple effect that makes navigating images easier. I’m not one to go recreate a function like this from scratch; why reinvent the wheel? So we used the lightbox created by Leandro Pinho found here.
Another tool we wanted to do was to insert the last tweet by Ben’s Heart on twitter and display it in the footer. For this we used another simple JQuery plug that we’ve used before, information on this found here.
We ran into a problem which is becoming more and more relevant with many using these prebuilt plugins. JQuery liberties and styles of writing can differ from one coder to the next and this can cause a conflict like the one we encountered.
What did we do to solve this problem? Well at first we prioritized. If you are that interested in seeing the last tweet from Ben’s Heart you can always go to there twitter page. Displaying the images in a lightbox though was important to the functionality of the site. So we left the twitter-feed broken and kept the lightbox working.
This morning as I’m checking in on some of my favorite sites I noticed this article from Digging into WordPress. It seems that WordPress users are having the same problems with loading plugins.
Simply put, the easy way to declare JQuery is with a “$” sign. If you are getting errors switch the “$” sign to say “jQuery” instead. I quickly opened the code for Ben’s Heart and gave it a shot. voila, it works!
Ben’s Heart Redesign
Ben's Heart Foundation
Ben’s Heart foundation is a non-profit I established in honor of my son, Benjamin Moore.
While he was in the hospital I used an existing template that I built for a car dealer for the Ben’s Heart website. I finally got around to updating the site and giving it a more individual feel.
As you’ll see in the site, we still are not taking donations. If anyone has any suggestions for us on how to move forward with online donations, please feel free to share.
Technology used:
- HTML5
- Progressive CSS
- JQuery
- Social Media Plugins
AmpNet HTML5 Conversion
HTML5, CSS3, and iPhone Conversion
We are moving forward rapidly working with new web technologies and standards. There is a lot of confusion out there on what exactly qualifies as HTML5 and CSS3; we’ll be offering a post later about this.
This post is to show a few technologies that went into converting the ampnet media website.
What we’ve used:
- HTML5
- CSS3
- JQuery
- iPhone integration
- asp.net
Check out some screenshots:
iPhone-
Full Site-
Review and Video: txGarage 2011 Ford Raptor
2011 Ford F-150 SVT Raptor reviewed by txGarage
The review and video are up on txGarage.com of the 2011 Ford F-150 SVT Raptor. This is one amazing truck, take the time to read the full review and watch the video HERE.
On this project we wanted to take the Raptor off-road obviously because it’s an off-road capable truck. The team at txGarage did some great work with shooting video and photos in my absence that day. Getting all the raw footage back at the office and putting together the video, I really wasn’t sure on the direction I wanted to go with this video. There wasn’t a great amount of footage to work with but I think what we ended with, including the music produced was a good match.
Skills and Technology used:
Canon Rebel XTi – Digital Photography
Sanyo Xacti HD1010 – Video
iMovie – Video Editing
GarageBand – Audio Editing
Photoshop – Photo Editing
HTML5 reset for WordPress:
HTML5 Reset for WordPress
We have been using more and more HTML5 and CSS3 in our designs and sites. When we design a site for wordpress though, we have still been using a blank theme from Digging Into WordPress. We have just downloaded and started playing with a new blank theme made in conjunction with DIW that is a HTML5 reset.
This is something we’ve been looking for and even thinking about making on our own. If you are looking for something like this too, find it HERE.
txGarage review 2012 Ford Focus
2012 Ford Focus Titanium Sedan by txGarage
I have never officially reviewed the Ford Focus before the 2012 year model yet I’ve driven almost every generation. This one though warrants a full review. It is not merely another American Ford Focus, it’s the world Focus and that makes all the difference!
Check out the review HERE to see why this Focus is some much more special and see what I really thought after a week of driving.
Importance of Semantic Markup
CSS-Tricks Screencast screenshot
I just got finished watching a video from Chris Coyier at CSS-Tricks.com called “Let’s Write Semantic Markup.” I really enjoyed the video as I enjoy pretty much everything that Chris does, but it really got me thinking about “semantic” code writing. In HTML and CSS it has always been a pretty open language where you could write it just about any way you wanted and somehow the browser figures it out. So what’s the point in taking the time to make your code clean and presentable?
A lot of work we do here at ampnet(media) is reworking a companies site. Not very often do we completely start from scratch to rebuild a site. Confusing and non-semantic code is the worst. It makes you spend a lot of time trying to figure out what you’re looking at rather than just getting the job done. Even going back and looking at a site that you designed from a few months ago can be a task if your code looks sloppy.
Company tip:
Just a quick tip. If you are hiring a design/developer as a temporary project, one good question to ask is how semantic their code writing is. It’ll make all the difference when you are ready to update or redesign your site.
Designers tip:
watch the video HERE
Fiat 500 and Optima turbo on txGarage
I have 2 new Quick Drive reviews up on txGarage.com.
Fiat 500 Quick Drive Review on txGarage
The all new to America Fiat 500. This little car has brought with it a lot of hype. Is it warranted? Check out the review HERE.
2011 Kia Optima turbo reviewed by txGarage
The 2011 Kia Optima is one of my favorite sedans in it’s price rang. Did adding a turbo make it that much better or did Kia do a sporty sedan wrong? Find out in the review HERE.
New Post txGarage: Quick Review Infiniti G37 IPL
That’s right! A quick drive review of the Infiniti G37 IPL in my own words posted on txGarage.com.
The Quick Drive reviews are just a quick hip-shot thoughts of the cars I’ve gotten to drive. A 15 minute drive in a car isn’t enough to really get a full review out of the car, although most automotive journalists do. This Infiniti was driven at the Texas Auto Roundup hosted by the Texas Auto Writers Association to which I’m a part.
Check it out HERE to see the review and some great photos. Continue reading