jQuery Toggle Handlers(Image Resize)

jQuery provides a few event-related convenience methods that makes it easier to use interaction behaviour 
on our pages.
toggle() method establishes a circular progression of click event handlers that are applied on successive click events.
On first click event first registered handler is called, on second click, the second is called, on third third is called and so on..
The function given below demonstrates a progression of event handlers. 

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

        $('img[src*=small]').toggle(
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/small/,'medium'));
            },
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/medium/,'large'));
            },
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/large/,'small'));
            }
        );

      });
    </script>

 Using it with HTML we have:
<!DOCTYPE html>
<html>
  <head>
    <title>jQuery .toggle() Example</title>
    <link rel="stylesheet" type="text/css" href="../styles/core.css"/>
    <script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
    <script type="text/javascript">
      $(function(){

        $('img[src*=small]').toggle(
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/small/,'medium'));
            },
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/medium/,'large'));
            },
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/large/,'small'));
            }
        );

      });
    </script>
    <style type="text/css">
      img {
        cursor: pointer;
      }
    </style>
  </head>

  <body>

    <div>Click on the image to change its size.</div>
    <div>
      <img src="hibiscus.small.jpg" alt="Hibiscus"/>
    </div>  </body>
</html>

small




















large
Advertisements

One thought on “jQuery Toggle Handlers(Image Resize)

  1. Glynis says:

    This is a comment to the webmaster. Your website:https://sumitpathak.wordpress.com/2012/10/14/jquery-toggle-handlersimage-resize/ is missing out on at least 300 visitors per day. I discovered this page via Google but it was hard to find as you were not on the first page of search results. I have found a website which offers to dramatically increase your traffic to your website: http://voxseo.com/traffic/. I managed to get over 10,000 visitors per month using their services, you could also get lot more targeted traffic than you have now. Hope this helps 🙂 Take care.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s