How to start using jQuery in 3 Minutes

How to start using jQuery in 3 Minutes

admin

09/10/2019 0 Comment

If you have salivated over all the cool jQuery widgets you’ve seen online in the last couple years and never had the time to figure out how to do it yourself, today’s your lucky day.

I’m gonna demystify it and you’ll be up and running with your first jQuery installation in about 3 minutes.

First, download these two jQuery classes:

jquery.js
jquery.innerfade.js

Then put this code in between your HEAD tags:

This way the jQuery classes can be available to your page. The first file ‘jquery.js’ is the main jQuery javascript library and the second file is the one that does the specific animation effect that we want to do… in this case, the innerfade carousel.

	
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.innerfade.js"></script>

Next, paste this into the BODY of your page.

It’s an unorderelist list with three images and associated URLs in it, but can you add as many list items as you like! Obviously you should replace the HREFs with the URLs you want to use and the image paths should point to images on your own server.

<ul id="rotator"> 
	<li>
		<a href="/store/tm-templates/search.html?type=17">
		  <img src="/images/blog/jquery-image1.jpg"/>
		</a>
	</li>
	<li>
		<a href="/blog.html">
		  <img src="/images/blog/jquery-image2.jpg"/>
		</a>
	</li> 
	<li>
		<a href="/design-ideas.html">
		  <img src="/images/blog/jquery-image3.jpg"/>
		</a>
	</li> 
</ul>

Next, paste this JS call into your page below the list item.

Notice it has some tweakable parameters, more info on those below.

<script type="text/javascript">
	$(document).ready(
		function(){

			$('#store_ad_rotate').innerfade({
				speed: 'normal',
				timeout: 3000,
				type: 'sequence',
				containerheight: '220px'
			});

		}
	);
</script>

There are some parameters you can tweak, and here’s the spec on what you can do with the params:

<!–
$(‘ID or class of the element containing the fading objects’).innerfade({
animationtype: Type of animation ‘fade’ or ‘slide’ (Default: ‘fade’),
speed: Fadingspeed in milliseconds or keywords (slow, normal or fast)(Default: ‘normal’),
timeout: Time between the fades in milliseconds (Default: ‘2000’),
type: Type of slideshow: ‘sequence’, ‘random’ or ‘random_start’ (Default: ‘sequence’),
containerheight: Height of the containing element in any css-height-value (Default: ‘auto’)
runningclass: CSS-Class which the container get’s applied (Default: ‘innerfade’)
});
–>