Image Image Image Image Image

© Copyright 2012 ABCoder | Email | RSS

Scroll to Top

To Top

plugin

14

Jul
2010

2 Comments

In jQuery

By Saif Uddin

jQuery Mix Photo Gallery

On 14, Jul 2010 | 2 Comments | In jQuery | By Saif Uddin

Recently I coded an interesting photo gallery using jQuery. I’ve named it “jQuery Mix Photo Gallery”. I’ve included the screen-shots here.

You may have a look at the live demo here. The photo gallery is free to download. Here is the download link. You may modify it according to your need and use it in your commercial projects. Please drop a comment if you like it and suggest me how can I make it much better.

Tags | , , , , , , , , ,

06

Jan
2010

3 Comments

In plugins
wordpress

By abcoder

WPtouch iPhone Theme (part 2)

On 06, Jan 2010 | 3 Comments | In plugins, wordpress | By abcoder

This a continuation from my previous post on WPtouch. In that post I explained how to add additional user agent support by modifying the wptouch.php. Also I mentioned the pain associated with this method – each time you update the plugin you have to edit the $useragents array. I suggested to give an option in the admin panel to add extra user agents. I’m not sure – may be after seeing my post WPtouch decided to give an option for that in the admin panel ;)

Here is the good news – yes now you can add “Custom User-Agents” to WPtouch! Below is a screen-shot from ABCoder’s WPtouch settings:

WPtouch iPhone Theme - new settings for adding extra user agents

I’ve added these user-agents:

playstation, samsung, wap, windows ce, wm5 pie, iemobile, symbian, series60, series70, series80, series90, blackberry, midp, wml, brew, brew, xiino, blazer, pda, nitro, netfront, sonyericsson, ericsson, sec-sgh, docomo, kddi, vodafone

A really handy way to check whether it is working or not – add webkit at the end (certainly with a comma before it) and visit your site from Google Chrome. If you see the iPhone version everything is perfect! Don’t forget to remove “webkit” before you go live.

Tags | , , , , , , , ,

19

Sep
2009

15 Comments

In plugins

By abcoder

WPtouch iPhone Theme for ABCoder

On 19, Sep 2009 | 15 Comments | In plugins | By abcoder

WPtouch iPhone Theme pluginYesterday I logged into the wp admin panel of abcoder and on the dashboard I found link to WPtouch iPhone Theme plugin as the most popular plugin. I got interested and visited the plugin home page. At first look its simplicity attracted me. It seamlessly enables the mobile version of your wordpress blog without any hassle. Unlike other wp plugins’ homepage it has a very professional & clean look (FYI, it’s a free wordpress plugin) and illustration on installing and post installation configurations and FAQs & Documentation. Without any delay I installed it. Everything was fine, it’s time for testing now, but I don’t have an iPhone.

My cellphone is nokia n73, unfortunately this amazing plugin is only for iPhone by default. I browsed the site from my nokia phone and it’s still the same full version of the site, not the mobile(iPhone) version which sounds logical.
Hmmm… so it’s time to get dirty with some modifications in the source code ;)

One week ago I worked on a restaurant website ilpoggiolohinsdale.com, I used mdetect.js from hand-interactive for mobile phone detection and redirect the visitors to a mobile version of the site. WPtouch plugin detects the borwser/OS using php’s $_SERVER['HTTP_USER_AGENT']. The main file is wptouch.php under root folder of the plugin, on line 360 (may vary for upcoming versions) the browser (OS) detection part is done inside detectAppleMobile function definition.

function detectAppleMobile($query = '') {
	$container = $_SERVER['HTTP_USER_AGENT'];
	// The below prints out the user agent array. Uncomment to see it shown on the page.
	// print_r($container); 
	// Add whatever user agents you want here to the array if you want to make this show on another device.
	// No guarantees it'll look pretty, though!
		$useragents = array(		
		"iphone",  				 // Apple iPhone
		"ipod", 					 // Apple iPod touch
		"aspen", 				 // iPhone simulator
		"dream", 				 // Pre 1.5 Android
		"android", 			 // 1.5+ Android
		"cupcake", 			 // 1.5+ Android
		"blackberry9500",	 // Storm
		"blackberry9530",	 // Storm
		"opera mini", 		 // Experimental
		"webos",				 // Experimental
		"incognito", 			 // Other iPhone browser
		"webmate" 			 // Other iPhone browser
	);
	$devfile =  compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode';
	$this->applemobile = false;
	foreach ( $useragents as $useragent ) {
		if ( eregi( $useragent, $container ) || file_exists($devfile) ) {
			$this->applemobile = true;
		} 	
	}
}

You see there is no “symbian” in the array. I modified the function and changed the $useragents array. My edited detectAppleMobile function looks like this:

function detectAppleMobile($query = '') {
	$container = $_SERVER['HTTP_USER_AGENT'];
	// The below prints out the user agent array. Uncomment to see it shown on the page.
	// print_r($container); 
	// Add whatever user agents you want here to the array if you want to make this show on another device.
	// No guarantees it'll look pretty, though!
		$useragents = array(		
		"iphone",  				// Apple iPhone
		"ipod", 				// Apple iPod touch
		"aspen", 				// iPhone simulator
		"dream", 				// Pre 1.5 Android
		"android", 			 	// 1.5+ Android
		"cupcake", 			 	// 1.5+ Android
		"blackberry9500",	 		// Storm
		"blackberry9530",	 		// Storm
		"opera mini", 		 	// Experimental
		"webos",				// Experimental
		"incognito", 			// Other iPhone browser
		"webmate", 			// Other iPhone browser
		"playstation",			// Play Station
		"samsung",				// Samsung Mobile
		"wap",				// deviceWap
		"windows ce",			// deviceWinMob
		"wm5 pie",				// enginePie
		"iemobile",				// deviceIeMob
		"symbian",				// deviceSymbian
		"series60",				// deviceS60
		"series70",				// deviceS70
		"series80",				// deviceS80
		"series90",				// deviceS90
		"blackberry",			// deviceBB
		"midp",				// deviceMidp
		"wml",				// deviceWml
		"brew",				// deviceBrew
		"palm",				// devicePalm
		"xiino",				// engineXiino
		"blazer", 				// Old Palm
		"pda",					// devicePda
		"nitro",				// deviceNintendoDs
		//"webkit",				// engineWebKit, DO NOT use this on Google Chrome
		"netfront",				// engineNetfront
		"sonyericsson",			// manuSonyEricsson
		"ericsson",				// ericsson
		"sec-sgh",				// manuSamsung1
		"docomo",				// svcDocomo
		"kddi",				// svcKddi
		"vodafone"				// svcVodafone
	);
	$devfile =  compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode';
	$this->applemobile = false;
	foreach ( $useragents as $useragent ) {
		if ( eregi( $useragent, $container ) || file_exists($devfile) ) {
			$this->applemobile = true;
		} 	
	}
}

Note that I’ve commented out the “webkit”, cos from Google Chrome the output of $_SERVER['HTTP_USER_AGENT'] is

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/530.5 (KHTML, like Gecko) Chrome/2.0.172.43 Safari/530.5

So you are supposed to see the mobile version from chrome browser!

Now everything is ALMOST perfect from nokia and I’m happy with that :) . The home page is only about 30kb. Yeah! Brave New Code has really done a great brave new job. From my nokia n73 some javascript and ajax does not work, from Nokia 5800 it’s perfect, everything works nicely. Haven’t tested it from iPhone, but I’m sure it’s 100% okay from iPhone. I tried to use google adsense for mobile but no luck. May be it’s not supported for publishers from Bangladesh yet.

african people mobile phone

A recent survey shows that the volume of mobile internet users is increasing. Now it’s vital to provide a mobile version of your site whatever your site is about.

Mobile Internet users on the upswing

For wordpress WPtouch is really an ‘out of the box’ plugin to take the blogging platform to a new era. The ajax comment feature is appreciating and a must for mobile browsers to reduce data transfer. It has a different dashboard for configurations, you can play around there, the default setup is well but I check on the WPtouch in exclusive mode, it’ll turn off all other plugins & reduce the load and also check on to show the excerpts on home page. The most important part is your site loads super fast with WPtouch from mobile browsers, here is a comparison:

compare loading time with and without WPtouch iPhone theme

I think they should provide the option for enabling the theme for all mobile phones and not only limited to iPhone & android. The touch enabled browser of Nokia N97, 5800 is same powerful as iPhone touch browser. I hope they’ll think about it and enable the support for other mobile phones as well. Overall this is a very good work and keep it up.
If you have not installed the plugin yet, I’d like to recommend it. You may ask me for support if you need any.

Join testking CISM web development course to learn about PHP and WP plugins and become master using testking 642-975 tutorials and testking HP0-J33 live demos.

Tags | , , , , , , , , , , , , , , , , , , ,

22

Aug
2009

8 Comments

In jQuery

By abcoder

Advanced cycle plugin integration

On 22, Aug 2009 | 8 Comments | In jQuery | By abcoder

On my another post I mentioned that cycle is a great jQuery plugin. I use it very often for slideshow. Recently I used it on a project where the slideshow had many(20+) wallpaper sized images. So loading time was a great issue.

The default cycle integration includes all the images during page loading which is okay for small images, but highly affects the page loading time for high resolution images. cycle plugin is highly flexible! I fixed the issue by loading images dynamically one after another at the end of each slide, literally before the beginning of each slide.

Here is how I did it:

<div id="slideshow"><!-- slides will be added here --></div>
var gallery = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg", "images/7.jpg", "images/8.jpg", "images/9.jpg", "images/10.jpg", "images/11.jpg", "images/12.jpg", "images/13.jpg", "images/14.jpg"]; // and so on.. array of images
// Array clone function.
Array.prototype.clone = function () {
    var arr = new Array();
    for (var property in this) {
        arr[property] = typeof(this[property]) == 'object' ? this[property].clone() : this[property];
    }
    return arr;
}
var gal = null; // gal should be global as I'll use it inside onBefore function
$(function () {
    gal = gallery.clone(); // cloning the array is not mandatory, but doing so will keep the main array unchanged.
    $('#slideshow').empty().append('<img src="' + gal.pop() + '" /><img src="' + gal.shift() + '" /><img src="' + gal.shift() + '" />') // adding the last, first and second element of the array to the slideshow div, then start the cycle plugin.
    .cycle({
        startingSlide: 1,
        // this is required (1 is the 2nd slide) as the first slide is the last element of the array. if you use manual next/prev button clicking on #prev will show the first element.
        before: onBefore, // loads the next image at the beginning of each slide. (NOT all at once)
        next: "#next",
        prev: "#prev"
    });
    var totalSlideCount = 1 + gal.length;
    function onBefore(curr, next, opts, fwd){
        // at first addSlide is not defined, so we should return.
	if (!opts.addSlide) return;
	// if all the elements of the array are added no need to add them again!
        if (opts.slideCount == totalSlideCount) return; 
	// shift or pop from slide array
        var nextSlideSrc = fwd ? gal.shift() : gal.pop(); 
	// add next slide 
        opts.addSlide('<img src="' + nextSlideSrc + '" />', fwd == false);
    }
});

In this code above, cloning the array is optional. I used it as I needed the main array for later use. Probably you know if you use the global array reference to a local variable and apply pop()/shift()/push() functions to the local variable, the global one will be affected. cos the local variable is just a reference to the address of the global array variable.

At first the last, 1st and 2nd elements of the array are added to the #slideshow div and the cycle is started from the 2nd slide. Before starting of each slide onBefore function is called. The onBefore function adds new slide to the slideshow and stops when all the array elements are added to the slide.

You may use it for small size images also if you need to improve the page loading duration.

Tags | , , , , , , , , , , , , , , , , ,

14

Jun
2009

27 Comments

In jQuery

By abcoder

jQuery cycle plugin as carousel

On 14, Jun 2009 | 27 Comments | In jQuery | By abcoder

The jQuery cycle plugin is really amazing! I love this plugin for its huge options for image/div slide show. Right now I’m working on a project which has 3 slideshow on one page. One is simple fade effect with text divs, another one is also fade effect with div + image + text and play/pause, next/back option. The third one is a simple carousel with continuous play mode.

I implemented the first two easily with cycle plugin. But I got stuck with the carousel one. The play and the next state is fine as I used the “scrollLeft” fx. The problem is when I click previous button the fx should be “scrollRight” and not “scrollLeft”. I thought it may need a little complex customized function to do this job of applying different transition effect on previous and next event. I had no clue for it. Even no help from google search! I do not like using a lot of plugins at a time. I know there is jCarousel / jCarousel lite plugin for this, but I still believe there must be a way for doing this with cycle.

It took several hours to find out the simple solution. It’s already inside the cycle plugin, but kinda hidden! I am using the “scrollHorz” fx effect and it is fixed now. WOW! again I discovered that “cycle” is really a marvelous plugin of jQuery.

Here is the example on the malsup site: http://www.malsup.com/jquery/cycle/scrollhv.html

This is the simple code I used:

$('#carousels').cycle({
    prev: '#left-arrow',
    next: '#right-arrow',
    pause: 1,
    fx: 'scrollHorz',
    timeout: 6000
});

Tags | , , , , , , , ,

Using Dreamweaver Spry validation with jQuery ajax form plugin

On 08, Jun 2009 | 9 Comments | In Ajax, Core JavaScript, JavaScript, jQuery | By abcoder

Writing form validation code manually is a boring task. Not only that, editing or adding new fields each time and modifying the validation code accordingly is such a pain. When Dreamweaver added the Spry form validation with CS3 the nightmare is over. The greatest feature of using it is you can do the form validation work automatically with a couple of mouse clicks and no hand written code! And you can easily change/edit or add/remove the fields.

I know jQuery has simple validation plugin but you have to write the codes for it, which is time consuming. I always use the spry validation of dreamweaver as I learned using it for it’s simplicity. When I tried to use it with the jQuery ajax form submit plugin I got disappointed. It didn’t work! I didn’t stop trying. And finally I found the way which I’m gonna share with you :)

Here is the simple code that you need in the “beforeSubmit” parameter of $.ajaxForm

$("#formID").ajaxForm({
    url: "submit.php",
    beforeSubmit: function(formData, jqForm, options){
        if (Spry) { // checks if Spry is used in your page
            var r = Spry.Widget.Form.validate(jqForm[0]); // validates the form
            if (!r) 
                return r;
        }
    },
    success: successFunction,
    complete: completeFunction
});

Hope that’ll help a lot boosting your web development.

Tags | , , , , , , , , , , ,