Hungred Dot Com - Page 50 of 60 - save life through coding since 2009

jQuery Plugin: RAWR! Image Effect Gallery (RIEG)

RAWR image effect gallery(RIEG) is a flexible and fully customize image gallery which can be adjusted to fill your need. It is design so that it is simple to use without much complexity on the usage of the plugin. Currently, RIEG plugin provides 7 fixed and a custom effect with different combination of easing which can be configured within the plugin using George easing plugin. RIEG is currently released on alpha testing and i will try to update it in the future with more effect and feature.

Information

Current version: 1.0 (Alpha)
Licensing: MIT

Browser Tested

Firefox 3.0.7
IE 7.0.5730.13
Opera 9.64
Google Chrome
Safari

Dependencies

lightbox by Warren Krewenki (optional),
Easing plugin by George McGinley Smith
jQuery 1.31

Documentation

Here listed the entire variable you can use to customize RIEG. There are some example which should be easy enough to understand how to use this plugin.

1.0 Example

All you need is a HTML tag which should be placed on the bottom of your HTML file.

<div id="rawr">
<img id="gallery" src="images/start.jpg"/></div>
</div>

import all the dependency library,plugin and stylesheet

<script type="text/javascript" src="js/library.js"></script>
<script type="text/javascript" src="js/jquery.RIEG.js"></script>
<script type="text/javascript" src="js/easing.js"></script>

Finally, initialize RIEG. (click on plain text for better view)

$("#gallery").RIEG({
url: [
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/h/hanging-laundry-1203294-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/m/madidi-trees-646088-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/j/jellyfish-swarm-palau-131157-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/s/shark-kingman-reef-1166392-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/h/havasu-creek-waterall-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/p/polar-bears-svalbard-1205962-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/p/pictured-rocks-lakeshore-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/hibiscus-petals-758680-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/swirling-aurora-754878-sw.jpg",
"http://gallery.photo.net/photo/6922516-md.jpg",
"http://gallery.photo.net/photo/6823111-md.jpg",
"http://gallery.photo.net/photo/7360351-md.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/v/volcano-winter-521567-sw.jpg",
"http://www.studio7designs.com/_media/images/photography_portfolio_01.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/m/mangroves-bali-1047803-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/arctic-rainbow-nicklen-673279-sw.jpg",
"http://science.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Science/Images/Content/sedimentary-slope-a2wd32-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/green-landscape-haas-1093772-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/suruga-bay-doubilet-101053-sw.jpg",
"http://photo.net/photo/pcd0787/san-galgano-19.4.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/cherry-blossom-tree-monument-720322-sw.jpg",
]
});

This is the simplest way to initialize RIEG without adjusting the default setting. You can adjust the setting according such as this one which change the screen size and effect. (click on plain text for better view)

$("#gallery").RIEG({
url: [
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/h/hanging-laundry-1203294-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/m/madidi-trees-646088-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/j/jellyfish-swarm-palau-131157-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/s/shark-kingman-reef-1166392-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/h/havasu-creek-waterall-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/p/polar-bears-svalbard-1205962-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/p/pictured-rocks-lakeshore-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/hibiscus-petals-758680-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/swirling-aurora-754878-sw.jpg",
"http://gallery.photo.net/photo/6922516-md.jpg",
"http://gallery.photo.net/photo/6823111-md.jpg",
"http://gallery.photo.net/photo/7360351-md.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/v/volcano-winter-521567-sw.jpg",
"http://www.studio7designs.com/_media/images/photography_portfolio_01.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/m/mangroves-bali-1047803-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/arctic-rainbow-nicklen-673279-sw.jpg",
"http://science.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Science/Images/Content/sedimentary-slope-a2wd32-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/green-landscape-haas-1093772-sw.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/suruga-bay-doubilet-101053-sw.jpg",
"http://photo.net/photo/pcd0787/san-galgano-19.4.jpg",
"http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/Content/cherry-blossom-tree-monument-720322-sw.jpg",
],
effect: "zoom",
inEasing:"linear",
outEasing: "linear",
duration: 500,
screenW: screen.width/2,
screenH: screen.height/2.2

});

2.0 Section Description

description file on each section

3.0 RIEG API

api in Excel SpreadSheet

Variable name	Type	Default Value	Limitation	Description
url	array string	none	IMAGE PATH ONLY	array of string used in RIEG
loadingURL	string	http://www.sofa-framework.org/design/loading_wh.gif	IMAGE PATH ONLY	loading image used in RIEG

flipWidth	int	0	SCREEN WIDTH	width length of flip effect

fadeIn	decimal	1	1	fade in opacity amount
fadeOut	decimal	0	1	fade out opacity amount

zoomW	int	10	SCREEN WIDTH	zoom width
zoomH	int	10	SCREEN HEIGHT	zoom height

effect	string	slideRight	slideRight slideLeft slideUp slideDown custom flip zoomfade	This is case sensitive, only the following limitation are allow
inEasing	string	easeInBounce	SECTION 3.0	This is case sensitive, only the following limitation are allow
outEasing	string	easeOutBounce	SECTION 3.0	This is case sensitive, only the following limitation are allow

customLeft	int	0	INTEGER ONLY	css left
customTop	int	0	INTEGER ONLY	css left
customWidth	int	0	INTEGER ONLY	css width
customHeight	int	0	INTEGER ONLY	css height

duration	int	1000	INTEGER ONLY	duration of animation effect

screenH	int	400	INTEGER ONLY	image screen height, can use mathematical calculation
screenW	int	600	INTEGER ONLY	image screen width, can use mathematical calculation

thumbnailH	int	30	INTEGER ONLY	thumbnail height, can use mathematical calculation
thumbnailW	int	30	INTEGER ONLY	thumbnail width, can use mathematical calculation

rawrgallery	string	#rawr	STRING ONLY	css id value
galleryContainer	string	#rawr-gallery-container	STRING ONLY	css id value
navigation	string	#rawr-images	STRING ONLY	css id value
navRight	string	#rawr-right	STRING ONLY	css id value
navLeft	string	#rawr-left	STRING ONLY	css id value
mainNav	string	#rawr-nav	STRING ONLY	css id value
mainControl	string	#rawr-control	STRING ONLY	css id value
controlPrev	string	#rawr-prev	STRING ONLY	css id value
controlNext	string	#rawr-next	STRING ONLY	css id value
controlNav	string	#rawr-nav-visibility	STRING ONLY	css id value
controlSlideShow	string	#rawr-slideshow	STRING ONLY	css id value

controlPrevDesc	string	Previous	STRING ONLY	description fo previous icon
controlNextDesc	string	Next	STRING ONLY	description for next icon
controlNavDesc	string	Disable Navigation Bar	STRING ONLY	description for navigation icon
controlSlideShowDesc	string	Start/Stop Slideshow	STRING ONLY	description for slideshow icon

navEasing	string	linear	SECTION 3.0	easing functionality of navigation bar
navSpeed	int	1500	INTEGER ONLY	speed of animation of the navigation bar

nav_border	string	#787878 solid 1px	STRING ONLY	CSS declaration for border
gborderSize	int	10	INTEGER ONLY	the frame size of the gallery
gborderColor	string	#F0F0F0	STRING ONLY	the color of the gallery border, white in default

navLeftButton	string	images/left.png	IMAGE PATH ONLY	The navigation left arrow button
navRightButon	string	images/right.png	IMAGE PATH ONLY	The navigation right arrow button

nav_screenH	int	50	INTEGER ONLY	the navigation screen height, can use mathatical calculation
nav_screenW	int	500	INTEGER ONLY	the navigation screen width, can use mathatical calculation

elementHeight	int	20	INTEGER ONLY	controller icon height on the top right hand corner
elementWidth	int	20	INTEGER ONLY	controller icon width on the top right hand corner
controlWidth	int	60	INTEGER ONLY	controller container width
controlHeight	int	20	INTEGER ONLY	controller container height

controlSlideShowInPath	string	images/play.png	IMAGE PATH ONLY	controller icon play
controlSlideShowOutPath	string	images/stop.png	IMAGE PATH ONLY	controller icon stop
controlPrevPath	string	images/prev.png	IMAGE PATH ONLY	controller icon previous
controlNextPath	string	images/next.png	IMAGE PATH ONLY	controller icon next

navigationShow	string	visible	visible/hidden	to enable visibility of the navigation bar located on the bottom of RIEG
autoSlideShow	boolean	FALSE	TRUE/FALSE	the slideshow will not be on in default
slideShowSpeed	int	4000	INTEGER ONLY	the speed of the slide show
popOut	boolean	TRUE	TRUE/FALSE	whether to add on click function on the image to display the original size image
imageNext	boolean	FALSE	TRUE/FALSE	whether to add in the event on the image so that when clicked it will go to the next image

4.0 Easing capability

This is taken from George McGinley Smith easing plugin. It is case sensitive.

swing
linear
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

Support

Please post questions to the jQuery discussion list, putting [validate] into the subject of your post, making it easier to spot it and respond quickly. Keep your question short and succinct and provide code when possible; a test page makes it much more likely that you get an useful answer in no time. Alternatively, you can also post your question on the update post or email me at [email protected].
Please post bug reports and other contributions (enhancements, features, etc.) to [email protected] and i will try to get back to you asap. You can also try post it on jQuery plugin page.

Donation

`[donate]`

Update

Updated test site to include fade effect.

File

Download (Uncompressed)
Changelog
Demo

IE, Opera and Netscape issues on ‘Stop page loading’ with javascript

In case you don't know what i am referring on the topic, i really mean to stop the page from loading on the background of the browser. Usually, pressing STOP icon in the browser will stop any activity in a browser. Background activity that we are interested are uploading, preloading, retrieving and etc. of any dynamic activity that the browsers are dealing with when the page fire up ajax functionality. There are only three browser that are in my concern list because these are the browsers that are being used today.

Netscape

Netscape browsers are Mozilla Firefox, Google Chrome and Safari. These are Netscape browser which most developers or Mac users used when developing web application and design. Obviously, finding a solution for Netscape page load function is pretty easy and we can also manually press the X button on the top of the browser to stop all activity in a netscape browser. Ultimately, we will know that there is a function in Netscape browser that can stop all activity since the stop button on the browser is performing such action. In case you are still wondering what the heck is the javascript code,

window.stop();

The above will stop all activity which include stopping the page from loading and preventing any uploading to occurs. Any preload of image will also be stop by this javascript method.

Internet Explorer (IE)

IE having the majority users in the world is still lagging such function. It is possible to stop page from loading by using the following javascript code.

document.execCommand('Stop')

which will return you an empty page when executed during page load. However, this will only stop the page from loading! Other activity such as uploading and preloading of images will still occur. There is practically no way to stop the background activity in an IE browser. If you fire up an ajax application in an IE browser, you won't see any 'activity' at the bottom of the page indicating it is retrieving the request. Pressing stop button won't disable IE from retrieving unless you escape the page which a dynamic web site do not want it. In short, once a request is fired to IE, there is no cancellation for that request.

Opera

Opera work quitte similiar with IE. Although by interface and efficiency, Opera is much MUCH superior than IE, it still doesn't gain much market share in the browser industry. So how do we stop activity in Opera? There are definitely some way of stopping the activity in Opera which i personally believe. However, due to the small community available for Opera, you won't find any good answer avaliable in Google. However, Opera can use event bubbling to stop certain event from happening. (this mean it cannot stop event that has already happen)

Summary

The reason for this article is to prevent people like ME who hunt for such solution so that my RIEG jQuery plugin test site can work perfectly in all browser. And the reason why people will want to stop activity in the background of the browser is because in a dynamic environment, we will want to remove the existing DOM element and replace these DOM element with a new one. However, as existing request is still being sent through the browser, it is necessary to stop those existing request before sending out the new request so that the display will be flawless! Unfortunately, this cannot be done. (sad)

Tutorial: How to stop caching with jQuery and javascript

There are many reason people want to disable or stop caching by broswer. Especially when we are dealing with dynamic content that required the latest version to be displayed on the browser. However, due to security reason there are no perfect methods in javascript that can disabled caching for all browsers. In this tutorial, i will demonstrate a few way both javascript and jQuery used to stop or disable caching by browsers.

jQuery

On the later version of jQuery v1.2 above, jQuery has provided a method to stop caching by browser with its ajax class. You can visit jQuery website to see the list of update on v1.2 and you will notice that they have now included a function to disable caching! You can either choose to control the way each individual dynamic content cached by setting the properties to true/false or you can just set a default to disabled all browser caching.

In order to determine each ajax call caching properties,

$.ajax({
url: 'test.html',
cache: false,
success: function(html){
$('#results').append(html);
}
});

which is being reflected on the jQuery example. And in order to disable all caching by the browser we can do the following,

$.ajaxSetup({cache: false}});

This will have to be placed on top of the script in order for it to work.

Javascript

The reason why browsers are able to cache a particular document is due to the url being passed to the browser are identical. In order to make it unique for each passes, we can place in a random number behind the url as shown below,

var img.src = 'www.hungred.com'+'?'+Math.random()*Math.random();
return $(img).load(function()
{
alert('completed!');
});

This method will ensure all document to be unique for every dynamic passes you throw to the browser which i find it more reliable and useful as this method has been there for quite sometimes and almost all of the browser will support such way of retrieving dynamic content.

HTML (16/04/2009)

You can also disable or stop caching using the following meta tag,

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

This will prevent the whole page from being cached by the browser as well.

How to draw a rainbow with Adobe Illustrator

straight line with illustrator using pen tool

1. First, using the pen tool, draw a straight line with three anchors. I had a radius of 297 px so a total distance of 594px

rainbow2

2. Next, using the direct selection tool (A) click on the middle anchor and drag it upwards. I dragged up about 150 px from the original distance.

rainbow3

3. Using the curve handle (under the pen tool), drag the middle anchor sideways so you get a nice curve.

duplicate 7 times

4. Duplicate this seven times, one for every colour of the rainbow 😉 Be sure to reduce the gaps as you go along because red is the most visible the purple the least. You might want to use the direct selection tool to bend the curves a bit as you go along arranging the curves.

fill in colour

5. Colour each stroke from the top to the bottom as follows: Red>orange>yellow>green>blue>indigo>violet. No brownie points given as to why.

select all

6. Using the selection tool (V), select all the paths

rainbow8

7. Next, go to Object>Blend>Blend options and choose smooth colour. Then, go to Object>Blend>Make (Alt+Ctrl+B)

rainbow

There you have it, your own rainbow!

Tutorial: How to optimize wordpress plugin for SEO

This tutorial demonstrate a simple way to optimize your wordpress plugin for SEO purposes. It is always better to optimize some of your plugin if they are not doing their job properly.

What plugin required to optimize?

As we all know that the most important things should be placed on the header of the page. If our plugin place a script or a style on the header, it is important to bring them down so that search engine don't look at them as important. The most appropriate place is on the footer where the search engine spider prioritize the lowest among other section. ( unless you place your side bar below footer, footer usually is placed as lowest priority).

Identifying wordpress plugin that are not optimize

Identifying wordpress plugin that are not optimized for SEO can be both easy and difficult. If the plugin provided clues for your changes, it will be easily known which plugin has caused this mistake. However, if the instruction have no inserted any code to identify which plugin does the instruction belong, it will be more tricky than usual. In order to do this, i have illustrate it below.

1. Go to your website and right click on your page. Select view source to look at the source of your page to identify any unnecessary instruction that you do not want the search engine spider to see first.

2. notice that the source code i have provided above has a style tag with all its style in it? This is the plugin that should be updated to optimize for SEO. In the style tag, there are classes that indicate that it is from addtoany, with this i can identify that the plugin is "Add to Any: Share/Save/Bookmark Button".

How to optimize my wordpress plugin?

Optimizing your wordpres plugin for SEO is not that difficult. We just have to instruct the affected plugin to list those script or style to the footer as wordpress has provided a method wp_footer while your plugin most probability is using wp_head which caused it to place those unnecessary instruction on the header instead. After we identify our plugin, it is time to move those style sheet to the footer!

3. Go to your wordpress control panel and select plugin->editor->Add to Any: Share/Save/Bookmark Button

4. press Ctrl-F or edit->find in your browser and search for the word wp_head

5. change the found wp_head to wp_footer and click update

6. search for any other wp_head and change them all to wp_footer if necessary.

7. look at your home page source code again and it should have disappeared and went down to footer.

Note

There are things to take note about when trying to do the above steps. For all style it can be placed on the footer with no problem. However, for those javascript, please check properly before placing javascript or <script> tag to the bottom of the page as it will cause problem for some of the plugin since the methods are being called in the body before your scripts have imported into the page. Therefore, it cannot find those javascript methods if it is placed on the bottom. So we must check that the script has been imported before calling it within the body tag if we want to move the script tag to the bottom of the page.