Archive

Archive for the ‘Javascript’ Category

Siliconera Image Gallery

February 4th, 2010 kaheidt No comments

Siliconera Image GalleryMy task for this project was to create a WordPress image gallery plugin that displays thumbnails of all images in a post along with a main full-size image.  This project was actually quite enjoyable simply because all throughout the project, different situations popped up that forced me to go deeper down the WordPress rabbit hole than ever before.

The front-end of the gallery itself is fairly standard as far as image galleries go.  The gallery part of the page is a specific size, and the thumbnail area displays a minimum of 1 row and maximum of 3 rows at one time.  If there are more than 3 rows of thumbnails, then thumbnail-viewer control buttons come up for sliding the thumbnail area up or down.  If the “UP” button is pressed when the thumbnail area is already at the top, then it wraps to the last 3 rows, ditto for “DOWN”.  There’s also some hover animations for the thumbnails.

The back-end of the gallery is a different story.  The “postgallery” plugin has two different tasks that it needs to complete:

  1. When a single post is being displayed, modify the content of the post so that the images in it become links to the postgallery page, which includes the postID so that the postgallery page knows what post it needs to display as well as the index of each individual image in the order that they appear in the post
  2. When the postgallery page is being displayed, get the content for the postID that was passed, and then pull out and prep information from that post for the actual displaying of the postgallery page content

Needless to say, regular expressions are used for these two tasks in many places and in a variety of ways.

Going into this project, I had a solid typical-Wordpress-plugin approach that I was going to take, which initially I had actually followed through on and completed.  But once this initial plugin was put in place on the client’s test site, one by one, obstacles popped up that altered how I had to approach what I was trying to accomplish.  In addition, there were some specific requests that the client had for how different functions should be done that differed from how I initially programmed.  In the end, the final product is actually completely different from my initial plan of attack, which is pretty “that’s so how it is” with programming.

Oh, it also didn’t help that my IP was temporarily banned by the client’s hosting company because of the number of times and the different ways I was trying to access the FTP folder that the client had set up.  Luckily it really was only temporary.

Categories: All Projects, CSS, JQuery, Javascript, PHP, Wordpress Tags:

Delayed Link Opening

November 16th, 2009 kaheidt No comments

Depending on the type of animations and actions you have in your site, you might be interested in having an anchor link perform some kind of animation that finishes before opening the link in the href attribute. For example, I’m currently working on a site that has a colored box behind the navigation link of the current page. Then when another link in the navigation is clicked, the colored box slides to be behind that link. So I wouldn’t want the url for that second navigation link to open until the colored box is done moving. I’ll cover two ways to do this.

The first method is the validation method. You’ll see this a lot with forms, where a validation function must be returned as true in order for a form to be submitted. If it’s returned false, then the form won’t be submitted. This will also work for anchor tags, and is all made possible by the two event models. Here’s an example of the javascript code that would be called.

< script src=”http:/ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=”text/javascript”>< /script>
< script type=”text/javascript”>
function validate(field){
$(field).animate({“top”:”100px”}, 1000,”",function(){
if ($(field).attr(“target”)==”_blank”){
window.open($(field).attr(“href”));
}else{
location.href=$(field).attr(“href”);
}
});
return false;
}< /script>

And here’s the anchor html code that would be used:

< a id="link1" class="link" onclick="return validate(link1)" name="link1" href="http://www.google.com/" target="_blank">Google< / a>

The second method is very similar, except we don’t need to use inline javascript event handling, which is nice for dynamic page management. So here’s what the javascript would look like:

< script src="http:/ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">< /script>
< script type="text/javascript">
$(document).ready(function(){
$(".link").live("click",function(event){
event.preventDefault();
$(this).animate({"top":"100px"}, 1000,"",function(){
if ($(this).attr("target")=="_blank"){
window.open($(this).attr("href"));
}else{
location.href=$(this).attr("href");
}
});
});
});
< /script>

And here’s what the anchor HTML code would look like:

< a class="link" href="http://www.google.com/" target="_blank">Google< / a>

You can see how it would be much easier to not have to maintain unique IDs for each link that you want to open. The “live” function of JQuery takes care of every anchor that has a class of “link” applied to it. The other nice thing about this is that if you click the link with your middle mouse button to force it to open into a new page or tab, it will do so right away without waiting for animations or anything.

Categories: JQuery, Javascript Tags:

Philly Coaches Vs Cancer

October 10th, 2009 kaheidt 2 comments

phillycoachesvscancer.com

I was contracted to redesign phillycoachesvscancer.com at the beginning of the 4th quarter in 2008 for the American Cancer Society.

Categories: All Projects, HTML, JQuery, Javascript, PHP Tags:
Contact Form Powered By : XYZScripts.com