While integrating jQuery in Magento, you might get some javascript conflict and errors as you will be using two javascript libraries (prototype and jQuery) at a time. This is caused because prototype also uses ‘$‘ as a function or variable name, just as jQuery does.

Well, jQuery has a solution for this conflict case. Here’s what jQuery has to say about the conflict:-

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery’s case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():

Here, I will explain you on how you can integrate jQuery in Magento without any conflict and error.

Below is the step-by-step guide to integrate jQuery with Magento:-

1) Download jQuery from jquery.com
2) Copy the jquery file to the following directory: skin/frontend/default/your_theme/js/
3) Open app/design/frontend/default/your_theme/layout/page.xml
4) In page.xml file, search for block with name ‘head‘ and add the following code inside it (I suppose that your jquery file name is jquery.js):-

	<action method="addItem"><type>skin_js</type><name>js/jquery.js</name></action>
	

5) Removing conflict between two javascript libraries (prototype and jquery):
- Open app/design/frontend/default/your_theme/template/page/head.phtml
- Add the following code at the end of this page:-

		<script type="text/javascript">
			jQuery.noConflict();
		</script>
		

6) That’s all. You are done. Now, you can use jQuery in your Magento website freely and without any conflict. :)

Hope this helps. Thanks.

Related posts:

1. jQuery: Grey out background and preview image as popup
2. jQuery: Print array and object
3. jQuery: Preview Image with Zoom Effect
4. jQuery: Animate and Transfer effect with Image
5. jQuery: Preview Image with Tooltip Effect

From jQuery, you can send values to php page as GET or POST parameters.

You can use load() function OR ajax() function of jQuery to accomplish the AJAX functionality.

View Demo || Download Code

In the example below, I will show you how you can send parameters as GET method with the load() jQuery function.

In this example, there is a selection list of countries. Upon selecting any country, AJAX is used and respective cities are fetched.

Using GET method and load() function

HTML code of selection list

Countries:
<select name="country">
	<option value="">Please Select</option>
	<option value="1">Nepal</option>
	<option value="2">India</option>
	<option value="3">China</option>
	<option value="4">USA</option>
	<option value="5">UK</option>
</select>

<div id="cityAjax" style="display:none">
	<select name="city">
		<option value="">Please Select</option>
	</select>
</div>

Using load() function to fetch cities with GET method

	jQuery(document).ready(function(){
		// when any option from country list is selected
		jQuery("select[name='country']").change(function(){	

			// path of ajax-loader gif image
			var ajaxLoader = "<img src='../ajax-loader.gif' alt='loading...' />";

			// get the selected option value of country
			var optionValue = jQuery("select[name='country']").val();		

			/**
			 * pass country value through GET method as query string
			 * the 'status' parameter is only a dummy parameter (just to show how multiple parameters can be passed)
			 * if we get response from data.php, then only the cityAjax div is displayed
			 * otherwise the cityAjax div remains hidden
			 */
			jQuery("#cityAjax")
				.html(ajaxLoader)
				.load('data.php', "country="+optionValue+"&status=1", function(response){
					if(response) {
						jQuery("#cityAjax").css('display', '');
					} else {
						jQuery("#cityAjax").css('display', 'none');
					}
			});
		});
	});

PHP code to populate cities selection list

<?php
$country = $_GET['country'];

if(!$country) {
	return false;
}

$cities = array(
			1 => array('Kathmandu','Bhaktapur','Patan','Pokhara','Lumbini'),
			2 => array('Delhi','Mumbai','Kolkata','Bangalore','Hyderabad','Pune','Chennai','Jaipur','Goa'),
			3 => array('Beijing','Chengdu','Lhasa','Macau','Shanghai'),
			4 => array('Los Angeles','New York','Dallas','Boston','Seattle','Washington','Las Vegas'),
			5 => array('Birmingham','Bradford','Cambridge','Derby','Lincoln','Liverpool','Manchester')
		);

$currentCities = $cities[$country];
?>

City:
<select name="city">
	<option value="">Please Select</option>
	<?php
	foreach($currentCities as $city) {
		?>
		<option value="<?php echo $city; ?>"><?php echo $city; ?></option>
		<?php
	}
	?>
</select>

Similarly, you can use POST method and load() function.

Using load() function to fetch cities with POST method

	jQuery(document).ready(function(){
		// when any option from country list is selected
		jQuery("select[name='country']").change(function(){	

			// path of ajax-loader gif image
			var ajaxLoader = "<img src='../ajax-loader.gif' alt='loading...' />";

			// get the selected option value of country
			var optionValue = jQuery("select[name='country']").val();		

			/**
			 * pass country value through POST method
			 * the 'status' parameter is only a dummy parameter (just to show how multiple parameters can be passed)
			 * if we get response from data.php, then only the cityAjax div is displayed
			 * otherwise the cityAjax div remains hidden
			 */
			jQuery("#cityAjax")
				.html(ajaxLoader)
				.load('data.php', {country: optionValue, status: 1}, function(response){
					if(response) {
						jQuery("#cityAjax").css('display', '');
					} else {
						jQuery("#cityAjax").css('display', 'none');
					}
			});
		});
	});

For AJAX use, jQuery also has another function called ajax().

Below is the code on how we can use it:-

Using ajax() function to fetch cities with GET method

	jQuery(document).ready(function(){
		// when any option from country list is selected
		jQuery("select[name='country']").change(function(){				

			// get the selected option value of country
			var optionValue = jQuery("select[name='country']").val();		

			/**
			 * pass country value through GET method as query string
			 * the 'status' parameter is only a dummy parameter (just to show how multiple parameters can be passed)
			 * if we get response from data.php, then only the cityAjax div is displayed
			 * otherwise the cityAjax div remains hidden
			 * 'beforeSend' is used to display loader image
			 * 'complete' is used to hide the loader image
			 */
			jQuery.ajax({
				type: "GET",
				url: "data.php",
				data: "country="+optionValue+"&status=1",
				beforeSend: function(){ jQuery("#ajaxLoader").show(); },
				complete: function(){ jQuery("#ajaxLoader").hide(); },
				success: function(response){
					jQuery("#cityAjax").html(response);
					jQuery("#cityAjax").show();
				}
			});
		});
	});

Using ajax() function to fetch cities with POST method

	jQuery(document).ready(function(){
		// when any option from country list is selected
		jQuery("select[name='country']").change(function(){				

			// get the selected option value of country
			var optionValue = jQuery("select[name='country']").val();		

			/**
			 * pass country value through POST method
			 * the 'status' parameter is only a dummy parameter (just to show how multiple parameters can be passed)
			 * if we get response from data.php, then only the cityAjax div is displayed
			 * otherwise the cityAjax div remains hidden
			 * 'beforeSend' is used to display loader image
			 * 'complete' is used to hide the loader image
			 */
			jQuery.ajax({
				type: "POST",
				url: "data.php",
				data: ({country: optionValue, status: 1}),
				beforeSend: function(){ jQuery("#ajaxLoader").show(); },
				complete: function(){ jQuery("#ajaxLoader").hide(); },
				success: function(response){
					jQuery("#cityAjax").html(response);
					jQuery("#cityAjax").show();
				}
			});
		});
	});

View Demo || Download Code

Hope this helps. Thanks.

Related posts:

1. Simple and easy jQuery tabs with AJAX and PHP
2. Creating selection list, using foreach and section loop in Smarty
3. Magento: Get country and region collection
4. Magento jQuery: How to use them together?
5. Multiple file upload with jQuery and php

View Demo || Download Code

The following code will centerlize the popup large image.

jQuery.fn.center = function () {
	this.css("position","absolute");
	this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
	this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
	return this;
}

The css id ‘background’ has black background color and initially it is hidden. When the thumbnail image is clicked, the div with the id ‘background’ is made visible with fadeIn effect. The opacity is set 0.7 which makes the div slightly transparent and somewhat grey in color.

The div with id ‘large’ is made to display at center with fadeIn effect. The large image is displayed in this div. The image source will be the href link of the thumbnail image. The rel tag is taken as the caption and is displayed just below the image.

$(document).ready(function() {
	$("#thumbnail img").click(function(e){

		$("#background").css({"opacity" : "0.7"})
						.fadeIn("slow");

		$("#large").html("<img src='"+$(this).parent().attr("href")+"' alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("rel")+"")
				   .center()
				   .fadeIn("slow");

		return false;
	});

	$(document).keypress(function(e){
		if(e.keyCode==27){
			$("#background").fadeOut("slow");
			$("#large").fadeOut("slow");
		}
	});

	$("#background").click(function(){
		$("#background").fadeOut("slow");
		$("#large").fadeOut("slow");
	});

	$("#large").click(function(){
		$("#background").fadeOut("slow");
		$("#large").fadeOut("slow");
	});

});

Here’s the full source code:

<html>
<head>
<title>jQuery: Image preview in popup with Grey out background</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" language="javascript">
	jQuery.fn.center = function () {
		this.css("position","absolute");
		this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
		this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
		return this;
	}

	$(document).ready(function() {
		$("#thumbnail img").click(function(e){

			$("#background").css({"opacity" : "0.7"})
							.fadeIn("slow");

			$("#large").html("<img src='"+$(this).parent().attr("href")+"' alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("rel")+"")
					   .center()
					   .fadeIn("slow");

			return false;
		});

		$(document).keypress(function(e){
			if(e.keyCode==27){
				$("#background").fadeOut("slow");
				$("#large").fadeOut("slow");
			}
		});

		$("#background").click(function(){
			$("#background").fadeOut("slow");
			$("#large").fadeOut("slow");
		});

		$("#large").click(function(){
			$("#background").fadeOut("slow");
			$("#large").fadeOut("slow");
		});

	});
</script>
<style>
img {
	border: none;
}
#thumbnail img {
	cursor: pointer;
}
#large {
	display: none;
	position: absolute;
	background: #FFFFFF;
	padding: 5px;
	z-index: 10;
	min-height: 200px;
	min-width: 200px;
	color: #336699;
}
#background{
	display: none;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: #000000;
	z-index: 1;
}
</style>
</head>
<body>
<div align="center">
   <div id="thumbnail">
		<h3>Click on the image</h3>
	    <a href="hills.jpg"><img src="hills-thumb.jpg" alt="hills" rel="Hills Image" /></a>
		<a href="lilies.jpg"><img src="lilies-thumb.jpg" alt="lilies" rel="Lilies Image" /></a>
		<a href="sunset.jpg"><img src="sunset-thumb.jpg" alt="sunset" rel="Sunset Image" /></a>
		<a href="winter.jpg"><img src="winter-thumb.jpg" alt="winter" rel="Winter Image" /></a>
		<p id="large"></p>
   </div>
   <div id="large"></div>
<div id="background"></div>
</div>
</body>
</html>

View Demo || Download Code

Related posts:

1. jQuery: Preview Image with Tooltip Effect
2. jQuery: Preview Image with Zoom Effect
3. jQuery: Animate and Transfer effect with Image
4. jQuery: A simple Tooltip
5. jQuery: Set time interval between events with queue function

View Demo || Download Code

As you can see below, I have kept the large image link in the alt tag. The description/caption for the image is kept in rel tag.

<img src="hills-thumb.jpg" alt="hills.jpg" rel="Hills Image" />
<img src="lilies-thumb.jpg" alt="lilies.jpg" rel="Lilies Image" />
<img src="sunset-thumb.jpg" alt="sunset.jpg" rel="Sunset Image" />
<img src="winter-thumb.jpg" alt="winter.jpg" rel="Winter Image" />

When the mouse is hovered over the image, I just have switched the src and alt tag’s value. Then the width of the image is increased by 30% with the animate function. Everything is brought back to normal (default state) when the cursor is taken away from the image.

The source of the image is changed before zoom, so that it is not blurred when zoomed with larged width.

$(document).ready(function() {
	var oldWidth = $("#thumbnail img").width();
	$("#thumbnail img").hover(function(){
		var src = $(this).attr("src");
		$(this).attr("src",$(this).attr("alt"));
		$(this).animate({width: "30%"},1000);
		$(this).attr("alt",src);
	}, function(){
		$(this).animate({width: oldWidth},1000);
		var src = $(this).attr("src");
		$(this).queue(function(){
			$(this).attr("src",$(this).attr("alt"));
			$(this).attr("alt",src);
			$(this).dequeue();
		});
	});
});

Here’s the full source code:

<html>
<head>
<title>jQuery: Image Preview With Zoom Effect</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" language="javascript">
	$(document).ready(function() {
		var oldWidth = $("#thumbnail img").width();
		$("#thumbnail img").hover(function(){
			var src = $(this).attr("src");
			$(this).attr("src",$(this).attr("alt"));
			$(this).animate({width: "30%"},1000);
			$(this).attr("alt",src);
		}, function(){
			$(this).animate({width: oldWidth},1000);
			var src = $(this).attr("src");
			$(this).queue(function(){
				$(this).attr("src",$(this).attr("alt"));
				$(this).attr("alt",src);
				$(this).dequeue();
			});
		});
	});
</script>
<style>
img {
	border: none;
}
#thumbnail img {
	cursor: pointer;
	width: 100px;
	padding: 2px;
	float: left;
}
#large {
	display: none;
	position: absolute;
	color: #FFFFFF;
	background: #333333;
	padding: 5px;
}
</style>
</head>
<body>
<div id="thumbnail">
	<h3>Hover over the image</h3>
	<img src="hills-thumb.jpg" alt="hills.jpg" rel="Hills Image" />
	<img src="lilies-thumb.jpg" alt="lilies.jpg" rel="Lilies Image" />
	<img src="sunset-thumb.jpg" alt="sunset.jpg" rel="Sunset Image" />
	<img src="winter-thumb.jpg" alt="winter.jpg" rel="Winter Image" />
	<p id="large"></p>
</div>
</body>
</html>

View Demo || Download Code

Related posts:

1. jQuery: Preview Image with Tooltip Effect
2. jQuery: Grey out background and preview image as popup
3. jQuery: Animate and Transfer effect with Image
4. jQuery: How to replace string, div content and image src?
5. jQuery: A simple Slideshow

View Demo || Download Code

As you can see in the js code, I have positioned the top and left for large image with e.pageY and e.pageX. Then, image is added with the img tag. After that, the image is displayed slowly with fadeIn(“slow”). Large image is made hidden with fadeOut function when the cursor is moved away from the thumbnail image.

$(document).ready(function() {
	$("#thumbnail img").hover(function(e){
		$("#large").css("top",(e.pageY+5)+"px")
			      .css("left", e.pageX+5)+"px")
			      .html("<img src="+ $(this).attr("alt") +" alt='Large Image' /><br/>"+$(this).attr("rel"))
			      .fadeIn("slow");
	}, function(){
		$("#large").fadeOut("fast");
	});		

});

Here’s the full source code:

<html>
<head>
<title>jQuery: Image Preview With Tooltip Effect</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" language="javascript">
	$(document).ready(function() {
		$("#thumbnail img").hover(function(e){
			$("#large").css("top",(e.pageY+5)+"px")
					.css("left",(e.pageX+5)+"px")
					.html("<img src="+ $(this).attr("alt") +" alt='Large Image' /><br/>"+$(this).attr("rel"))
					.fadeIn("slow");
		}, function(){
			$("#large").fadeOut("fast");
		});		

	});
</script>
<style>
img {
	border: none;
}
#thumbnail img {
	cursor: pointer;
}
#large {
	display: none;
	position: absolute;
	color: #FFFFFF;
	background: #333333;
	padding: 5px;
}
</style>
</head>
<body>
<div align="center">
   <div id="thumbnail">
		<h3>Hover over the image</h3>
	    <img src="hills-thumb.jpg" alt="hills.jpg" rel="Hills Image" />
		<img src="lilies-thumb.jpg" alt="lilies.jpg" rel="Lilies Image" />
		<img src="sunset-thumb.jpg" alt="sunset.jpg" rel="Sunset Image" />
		<img src="winter-thumb.jpg" alt="winter.jpg" rel="Winter Image" />
		<p id="large"></p>
   </div>
</div>
</body>
</html>

View Demo || Download Code

Related posts:

1. jQuery: Preview Image with Zoom Effect
2. jQuery: Grey out background and preview image as popup
3. jQuery: Animate and Transfer effect with Image
4. jQuery: A simple Tooltip
5. jQuery: How to replace string, div content and image src?

I have a href link. I will show you, how to show tooltip when you hover your mouse over the link. The title of the href link will be shown as tooltip.

View Demo || Download Code

In the demo, I have kept two links. One without tooltip and the other with tooltip.

<h2>Tooltip</h2>
<a href="#" title="Save Earth and Be Happy!">Save the planet Earth</a><br/> (only with title but No tooltip)<br/><br/>
<a class="tooltip" href="#" title="Save Earth and Be Happy!">Save the planet Earth</a><br/> (with tooltip)<br/><br/>
<p id="tip"></p>

Tooltip is shown when the link is hovered. The title of the href link is shown as tooltip. The tooltip position is set with e.PageY and e.PageX. The tooltip is shown slowly with fadeIn(“slow”). And the tooltip is made hidden with fadeOut(“fast”) when we don’t hover over the link or move the cursor away from the link.

$(function(){
	var tip = $("#tip");

	$("a.tooltip").hover(function(e){

		// assign the <a> title to tip
		tip.text($(this).attr("title"));

		// empty <a> title
		$(this).attr("title", "");

		// set the position of tooltip and then display it
		tip.css("top",(e.pageY+5)+"px")
		   .css("left",(e.pageX+5)+"px")
		   .fadeIn("slow");

	}, function(){

		// hide tooltip
		$("#tip").fadeOut("fast");

		// set the <a> title with tootip content
		$(this).attr("title", tip.html());
	});
});

View Demo || Download Code

Related posts:

1. jQuery: Preview Image with Tooltip Effect
2. jQuery: Grey out background and preview image as popup
3. jQuery: Print array and object
4. jQuery: How to replace string, div content and image src?
5. Simple and easy jQuery tabs with AJAX and PHP

You need jQuery Library and the jQuery easing plugin. But you need not worry, I have zipped them all in the download file.

View Demo || Download Code

Basically, there are 3 parts – CSS, HTML and Javascript.

Here is the HTML part:-

<div id="container" align="center">
	<h2>Bouncing Navigation</h2>

	<div id="navigation">
		<a class="home" href="#">Home</a>
		<a class="contact" href="#">Contact</a>
		<a class="links" href="#">Links</a>
		<a class="about" href="#">About</a>
	</div>
	<br/>

	<div class="content home"><h3>Home</h3></div>
	<div class="content contact hide"><h3>Contact</h3></div>
	<div class="content links hide"><h3>Links</h3></div>
	<div class="content about hide"><h3>About</h3></div>		

</div>
<div style="border-bottom: 1px solid #CCCCCC"></div>

In the HTML part, the div with id=navigation contains menus. And the div with the class=content contains the content data related with each menu. By default, only the home content is shown. The rest of others are made hidden.

The displaying, hiding, padding, maintaining width, height, font color, background color, etc. are controlled by CSS. Here is the CSS part:-

#container {
	padding: 10px;
	min-height: 350px;
}
#navigation a {
	text-decoration: none;
	padding: 10px;
	color: #F3F3F3;
}
#navigation a:hover {
	text-decoration: underline;
}
.home {
	background: #0292C0;
}
.contact {
	background: #6AA63B;
}
.links {
	background: #D52100;
}
.about {
	background: #FBC700;
}
.content {
	border: 1px solid #336699;
	width: 300px;
	height: 300px;
	padding: 10px;
	color: #F3F3F3;
}
.hide {
	display: none;
}

The bouncing effect is performed through Javascript.

$(function(){
	$("#navigation a").click(function(){
		$(".content."+$(this).attr("class")).animate({height: "1px"},50);
		$("[class^=content]").addClass("hide");
		$("[class^=content]").removeAttr("style");
		$(".content."+$(this).attr("class")).animate({height: "300px"},{duration: 1000, easing: "easeOutBounce"});
	});
});

In the JS code above, the effect is performed when the a href link of div id=navigation is clicked. Here are the steps performed:-
– make the height of content to 1px with animate function.
– add class hide to all div with class content
– remove style attribute from the div with class content
– animate the div content to the height 300px with easeOutBounce effect (This effect is one of the effects of jQuery easing plugin. This gives the bouncing effect.)

That’s all we need for the cool bouncing navigation effect.

View Demo || Download Code

Cheers,

Related posts:

1. jQuery: Grey out background and preview image as popup
2. Blogspot: How to hide or remove Blogger top navigation bar?
3. jQuery: Animate and Transfer effect with Image
4. Making a tree navigation menu in PHP
5. Simple and easy jQuery tabs with AJAX and PHP

The Transfer effect can be used with effect() method. This Transfers the outline of an element to another element. Very useful when trying to visualize interaction between two elements.

With the animate() method, I have just changed the opacity of the image. When you click the thumbnail or large image, then you can see the Transfer effect working. The images are changed with some fade in and out.

View Demo || Download Code

I have well commented the code for better understanding. Here is the full source code:

<html>
<head>
<title>Image transfer</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" language="javascript">
	$(document).ready(function() {
		/**
		 *	Using transfer effect when large image is clicked
		 */
		$(".large").click(function () {
			var thumbRel = $(this).attr("rel");
			$(this).effect("transfer",{ to: $(".thumbnail img[rel='"+thumbRel+"']") }, 1000);
		});

		/**
		 * Using transfer effect when thumbnail image is clicked
		 */
		$(".thumb").click(function () {
			/**
			 * Remove class 'current' if exists
			 */
			$(".thumbnail [class^='thumb']").removeClass("current");

			/**
			 * Add class 'current' to highlight the selected thumbnail image
			 */
			$(this).addClass("current");

			/**
			 * Change the 'rel' of large image with that of the thumbnail image
			 */
			$(".large").attr("rel", $(this).attr("rel"));				

			/**
			 * Use transfer effect
			 */
			$(this).effect("transfer",{ to: $(".large") }, 1000);

			/**
			 * Fade out the current large image
			 */
			$(".large").animate({opacity: 0.3}, 1000);

			/**
			 * The functions inside queue() is used after the above animate and other functions get completed
			 */
			$(this).queue(function(){
				/**
				 * Change the src of large image
				 * Here, thumb image is hills-thumb.jpg then large image is hills.jpg
				 */
				$(".large").attr("src", $(this).attr("src").replace("-thumb", ""));

				/**
				 * Fade in the large image
				 */
				$(".large").animate({opacity: 1}, 1000);
				$(this).dequeue();
			});
		});
	});
</script>
<style>
	.main {
		padding: 4px;
		position: relative;
	}
	.thumbnail {
		padding: 10px;
		position: relative;
	}
	.thumbnail .thumb {
		padding: 2px;
	}
	.current {
		border: 1px solid red;
	}
	.ui-effects-transfer {
		border: 2px solid black;
	}
</style>
</head>
<body>
<div align="center">
   <p><strong>Click thumbnail or large image:</strong></p>
   <div class="main">
		<img class="large" src="hills.jpg" alt="image" rel="hills" />
   </div>
   <div class="thumbnail">
	   <img class="thumb" src="hills-thumb.jpg" alt="image" rel="hills" />
	   <img class="thumb" src="lilies-thumb.jpg" alt="image" rel="lilies" />
	   <img class="thumb" src="sunset-thumb.jpg" alt="image" rel="sunset" />
	   <img class="thumb" src="winter-thumb.jpg" alt="image" rel="winter" />
   </div>
</div>
</body>
</html>

View Demo || Download Code

Cheers,

Related posts:

1. jQuery: Preview Image with Tooltip Effect
2. jQuery: Preview Image with Zoom Effect
3. jQuery: Grey out background and preview image as popup
4. jQuery: How to replace string, div content and image src?
5. jQuery: A simple Slideshow

View Demo || Download Code

I have used animate() jQuery function for fade in and out. queue() and dequeue() functions along with setTimeout() function are used to set time interval between fade in and fade out. The images are stored in javascript array.

I have well commented the code so that it would be easy to understand. Here comes the full source code.

<html>
<head>
<title>jQuery: Slideshow</title>
<script src="jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		/**
		 * Array of images
		 */
		var arr = [ "hills.jpg", "lilies.jpg", "sunset.jpg", "winter.jpg", "slideshow.jpg" ];

		/**
		 * When play button is clicked
		 */
		$("#play").click(function(){
			/**
			 * Foreach loop
			 */
			$.each(arr, function(i, val) {
				/**
				 * Changing div opacity to 0. 1000 is the time in ms.
				 */
				$("#sImage").animate({opacity: 0.0}, 1000);
				/**
				 * Queue function will place the event in queue
				 * Changing image src after the above animate function is completed
				 */
				$("#sImage").queue(function(){
					$("#sImage").attr("src", val);
					$("#sImage").dequeue();
				});
				/**
				 * Changing div opacity to 1. 1000 is the time in ms.
				 */
				$("#sImage").attr("src", val).animate({opacity: 1.0}, 1000);
				/**
				 * Queue function will place the event in queue
				 * Here, queue function is used to hold the changing image for 1 second display
				 */
				$("#sImage").queue(function(){
					setTimeout(function(){
						$("#sImage").dequeue();
					}, 1000);
				});
			});
		});
	});
</script>
</head>
<body>
<div align="center">
	<button id="play"> Play </button>
	<div class="slideshow">
		<img id="sImage" src="slideshow.jpg" alt="slideshow" rel="slideshow" />
	</div>
</div>
</body>
</html>

View Demo || Download Code

Cheers,

Related posts:

1. jQuery: Set time interval between events with queue function
2. jQuery: Animate and Transfer effect with Image
3. jQuery: Preview Image with Zoom Effect
4. jQuery: Grey out background and preview image as popup
5. jQuery: Print array and object

You can do this by replace() function in jQuery.

View Demo || Download Code

Here is the code to replace string. This will replace the ‘smile’ text with ‘be happy’.

var oldText = "Save Earth and smile!";
var newText = oldText.replace("smile", "be happy");

Here is the code to replace image src. The following code replaces ‘hills’ with ‘sunset’.

$(".img").attr("src").replace("hills", "sunset");

Here is the code to replace div content. The following code replaces the text ‘First’ with ‘This is the first’.

$("#one").text().replace("First", "This is the first");

Here is the full source code:

<html>
<head>
<title>jQuery: Replace</title>
<script src="jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		$("#change").click(function(){
			var newSrc = $(".img").attr("src").replace("hills", "sunset");
			$(".img").attr("src", newSrc);			

			var oneDiv = $("#one").text().replace("First", "This is the first");
			$("#one").text(oneDiv);

			var oldText = "Save Earth and smile!";
			var newText = oldText.replace("smile", "be happy");
			$("#two").text(newText);
		});

		$("#refresh").click(function(){
			location.reload();
		});

	});
</script>
<style>
	#one {
		border: 1px solid #CCCCCC;
		margin: 10px;
		width: 300px;
	}
	#two {
		border: 1px solid #CCCCCC;
		margin: 10px;
		width: 300px;
	}
</style>
</head>
<body>
<div align="center">
	<img class="img" src="hills-thumb.jpg" alt="image" />

	<div id="one">
	First div.
	</div>

	<div id="two">
	Second div.
	</div>

	<button id="change"> Change </button>
	<button id="refresh"> Refresh </button>
</div>
</body>
</html>

View Demo || Download Code

Cheers,

Related posts:

1. jQuery: Grey out background and preview image as popup
2. jQuery: Animate and Transfer effect with Image
3. jQuery: Preview Image with Tooltip Effect
4. jQuery: Preview Image with Zoom Effect
5. jQuery: A simple Slideshow