How to create an image rotator with jquery and css

Whenever you need to display random images (more than 1 image) ,
you can do it using simple jquery cycle plugin.

Here is the small explanation :-


<script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.cycle.all.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 $('#<em><strong>imagediv</strong></em>').cycle({
 fx:    'fade',
 speed:  2500
 });
 });
 </script>

<div id="<em><strong>imagediv</strong></em>">
 <img src="image1.jpg"  alt="image1" />
 <img src="image2.jpg" alt="image2" />
 <img src="image3.jpg alt="image3" />
 <img src="image4.jpg  alt="image4" />
 <img src="image5.jpg alt="image5" />
 </div>
  1. Download jquery.js from http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
  2. Download jquery.cycle.all.js from http://malsup.github.com/jquery.cycle.all.js
  3. Include both .js files in header .
  4. add following CSS
    .pics {
    height: 117px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 354px;
    }
    

There are many options to set time for fading effect & all..

You can refer http://jquery.malsup.com/cycle for more option & customization jQuery cycle plugin.

Thats it ..

Done.. Enjoy !!!

Disabling Right Click (context menu) with jQuery

Whenever you need to disable “Right Click” in browse you can do it easily using little jQuery.


<script type="text/javascript">
 $(document).ready(function()
 {
 $(document).bind("contextmenu",function(e){
 return false;
 });
 });
 </script>

.after( content ) :- Insert content, specified by the parameter, after each element in the set of matched elements.

When we need to insert some html content after specified element,we can achieve it using after() method.

Example :-

<html>
<head>
<style>
p { background:yellow; }
</style>
<script src=”http://code.jquery.com/jquery-1.5.js”></script&gt;
</head>
<body>
<p>I would like to say: </p>
<script>
$(“p”).after(“<b>Hello</b>”);
</script>
</body>
</html>

Output :-

jquery after method
jquery after method

.addClass( className ) :- Adds the specified class(es) to each of the set of matched elements

.addClass() method is used to add class to some elements.

Example :-

<style>

.myclass { color:red; font-size:25px; }

.paragraph { color:blue; font-size:20px; }

</style>

<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.5.js”></script&gt;

<script type=”text/javascript”>

$(document).ready(function (){

$(‘div’).addClass(‘myclass’);

$(‘p’).addClass(‘paragraph’);

});

</script>

<div align=”center”>I am div1</div>

<p align=”center”>I am paragraph</div>

<div align=”center”>I am div2</div>

Output :-

.add( selector ) :- Add elements to the set of matched elements

add() method is used to assign some property to some elements .

<html>
<head>
<script src=”http://code.jquery.com/jquery-1.5.js”></script&gt;
</head>
<body>
<p>I am just a paragraph</p>
<span id=”a”>I am span</span>
<script>
$(“p”).add(document.getElementById(“a”)).css(“background”, “yellow”).css(“font-size”, “25px”);
</script>
</body>
</html>

Output :-

Add elements to the set of matched elements