.


Shutter Effect with jQuery

Wednesday, April 20, 2011 Posted by Unknown


This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website which displays a set of featured photos with a camera shutter effect.

jquery.shutter.css



<style>
#container{
 width:640px;
 height:400px;
 margin:0 auto;
 border:5px solid #fff;
 overflow:hidden;
 -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#container ul{
 list-style:none;
padding:0;
margin:0;
}
#page{
 width:650px;
height:400px;
}
#container img{
padding:0;
}
.shutterAnimationHolder .film canvas{
 display: block;
    margin: 0 auto;
}

.shutterAnimationHolder .film{
 position:absolute;
 left:50%;
 top:0;
}

.shutterAnimationHolder{
 position:absolute;
 overflow:hidden;
 top:0;
 left:0;
 z-index:1000;
}
</style>

jQuery



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script src=".../jquery.shutter.js"></script>

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

 var container = $('#container'),
  li = container.find('li');

 // Using the tzShutter plugin. We are giving the path
 // to he shutter.png image in the plugin folder and two
 // callback functions.

 container.tzShutter({
  imgSrc: 'assets/jquery.shutter/shutter.png',
  closeCallback: function(){

   // Cycling the visibility of the li items to
   // create a simple slideshow.

   li.filter(':visible:first').hide();
   
   if(li.filter(':visible').length == 0){
    li.show();
   }
   
   // Scheduling a shutter open in 0.1 seconds:
   setTimeout(function(){container.trigger('shutterOpen')},100);
  },
  loadCompleteCallback:function(){
   setInterval(function(){
    container.trigger('shutterClose');
   },4000);
   
   container.trigger('shutterClose');
  }
 });
 
});
    </script>

Generated HTML



<div id="page">

 <h1>Shutter Folio Photography</h1>

 <div id="container">
     <ul>
            <li><img src=".../img/1.jpg" width="640" height="400" /></li>
            <li><img src=".../img/2.jpg" width="640" height="400" /></li>
            <li><img src=".../img/3.jpg" width="640" height="400" /></li>
            <li><img src=".../img/4.jpg" width="640" height="400" /></li>
        </ul>
    </div>

</div>

The Final Code



<head>
<style>
#container{
 width:640px;
 height:400px;
 margin:0 auto;
 border:5px solid #fff;
 overflow:hidden;
 -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#container ul{
 list-style:none;
padding:0;
margin:0;
}
#page{
 width:650px;
height:400px;
}
#container img{
padding:0;
}
.shutterAnimationHolder .film canvas{
 display: block;
    margin: 0 auto;
}

.shutterAnimationHolder .film{
 position:absolute;
 left:50%;
 top:0;
}

.shutterAnimationHolder{
 position:absolute;
 overflow:hidden;
 top:0;
 left:0;
 z-index:1000;
}
</style>
</head>

<body>
<div id="page">

 <h1>Shutter Folio Photography</h1>

 <div id="container">
     <ul>
            <li><img src=".../img/1.jpg" width="640" height="400" /></li>
            <li><img src=".../img/2.jpg" width="640" height="400" /></li>
            <li><img src=".../img/3.jpg" width="640" height="400" /></li>
            <li><img src=".../img/4.jpg" width="640" height="400" /></li>
        </ul>
    </div>

</div>

<script type='text/javascript'>
//<![CDATA[
(function(){
 
 // Creating a regular jQuery plugin:
 
 $.fn.tzShutter = function(options){
  
  // Checking for canvas support. Works in all modern browsers:
  var supportsCanvas = 'getContext' in document.createElement('canvas');

  // Providing default values:

  options = $.extend({
   openCallback:function(){},
   closeCallback:function(){},
   loadCompleteCallback:function(){},
   hideWhenOpened:true,
   imgSrc: 'http://dl.dropbox.com/u/13256471/jquery.shutter/assets/jquery.shutter/shutter.png'
  },options);
  
  var element = this;
 
  if(!supportsCanvas){
   
   // If there is no support for canvas, bind the
   // callack functions straight away and exit:
   
   element.bind('shutterOpen',options.openCallback)
       .bind('shutterClose',options.closeCallback);
   
   options.loadCompleteCallback();

   return element;
  }
  
  window.setTimeout(function(){
 
   var frames = {num:15, height:1000, width:1000},
    slices = {num:8, width: 416, height:500, startDeg:30},
    animation = {
     width : element.width(),
     height : element.height(),
     offsetTop: (frames.height-element.height())/2
    },
    
    // This will calculate the rotate difference between the
    // slices of the shutter. (2*Math.PI equals 360 degrees in radians):
    
    rotateStep = 2*Math.PI/slices.num, 
    rotateDeg = 30;

   // Calculating the offset   
   slices.angleStep = ((90 - slices.startDeg)/frames.num)*Math.PI/180;
   
   // The shutter slice image:
   var img = new Image();
  
   // Defining the callback before setting the source of the image:
   img.onload = function(){

    window.console && console.time && console.time("Generating Frames");
    
    // The film div holds 15 canvas elements (or frames).
    
    var film = $('<div>',{
     className: 'film',
     css:{
      height: frames.num*frames.height,
      width: frames.width,
      marginLeft: -frames.width/2, // Centering horizontally
      top: -animation.offsetTop
     }
    });

    // The animation holder hides the film with overflow:hidden,
    // exposing only one frame at a time.
    
    var animationHolder = $('<div>',{
     className: 'shutterAnimationHolder',
     css:{
      width:animation.width,
      height:animation.height
     }
    });
    
    for(var z=0;z<frames.num;z++){
 
     // Creating 15 canvas elements.
 
     var canvas = document.createElement('canvas'),
      c  = canvas.getContext("2d");
 
     canvas.width=frames.width;
     canvas.height=frames.height;
 
     c.translate(frames.width/2,frames.height/2);
 
     for(var i=0;i<slices.num;i++){
      
      // For each canvas, generate the different
      // states of the shutter by drawing the shutter
      // slices with a different rotation difference.
      
      // Rotating the canvas with the step, so we can
      // paint the different slices of the shutter.
      c.rotate(-rotateStep);
      
      // Saving the current rotation settings, so we can easily revert
      // back to them after applying an additional rotation to the slice.
      
      c.save();
      
      // Moving the origin point (around which we are rotating
      // the canvas) to the bottom-center of the shutter slice.
      c.translate(0,frames.height/2);
      
      // This rotation determines how widely the shutter is opened.
      c.rotate((frames.num-1-z)*slices.angleStep);
      
      // An additional offset, applied to the last five frames,
      // so we get a smoother animation:
      
      var offset = 0;
      if((frames.num-1-z) <5){
       offset = (frames.num-1-z)*5;
      }
      
      // Drawing the shutter image
      c.drawImage(img,-slices.width/2,-(frames.height/2 + offset));
      
      // Reverting back to the saved settings above.
      c.restore();
     }
     
     // Adding the canvas (or frame) to the film div.
     film.append(canvas);
    }
    
    // Appending the film to the animation holder.
    animationHolder.append(film);
    
    if(options.hideWhenOpened){
     animationHolder.hide();
    }
    
    element.css('position','relative').append(animationHolder);
    
    var animating = false;
    
    // Binding custom open and close events, which trigger
    // the shutter animations.
    
    element.bind('shutterClose',function(){
     
     if(animating) return false;
     animating = true;
     
     var count = 0;
     
     var close = function(){
      
      (function animate(){
       if(count>=frames.num){
        animating=false;
        
        // Calling the user provided callback.
        options.closeCallback.call(element);
        
        return false;
       }
       
       film.css('top',-frames.height*count - animation.offsetTop);
       count++;
       setTimeout(animate,20);
      })();
     }
     
     if(options.hideWhenOpened){
      animationHolder.fadeIn(60,close);
     }
     else close();
    });
    
    element.bind('shutterOpen',function(){
     
     if(animating) return false;
     animating = true;
     
     var count = frames.num-1;
     
     (function animate(){
      if(count<0){
       
       var hide = function(){
        animating=false;
        // Calling the user supplied callback:
        options.openCallback.call(element);
       };
       
       if(options.hideWhenOpened){
        animationHolder.fadeOut(60,hide);
       }
       else{
        hide();
       }
       
       return false;
      }
      
      film.css('top',-frames.height*count - animation.offsetTop);
      count--;
      
      setTimeout(animate,20);
     })();
    });

    // Writing the timing information if the
    // firebug/web development console is opened:
    
    window.console && console.timeEnd && console.timeEnd("Generating Frames");
    options.loadCompleteCallback();
   };
   
   img.src = options.imgSrc;
   
  },0);
  
  return element;  
 };
 
})(jQuery);
//]]>
</script>

</body>

With this Shutter Effect is complete!


Read More Add your Comment 0 comments


Fading and Spinning Icons with CSS3 and jQuery

Wednesday, April 20, 2011 Posted by Unknown


The post detailed how you could leverage CSS3's transformations and opacity properties, as well as the magical MooTools JavaScript framework, to create spinning, fading, animated icons. Due to popular request, I've duplicated the effect with another popular JavaScript toolkit: jQuery.

The HTML


<div style="padding:20px 0;position:relative;">
<div id="followIcons">
<a style="top: 0.653561px; left: 132.318px; z-index: 1022; opacity: 0.6; -moz-transform: rotate(36.7188deg);" href="http://feeds.feedburner.com/TemplateForYourBlog" rel="nofollow" id="iconRSS">RSS Feed</a>
<a style="top: 38.5985px; left: 200.085px; z-index: 1023; opacity: 0.6; -moz-transform: rotate(74.7156deg);" href="http://twitter.com/bambangwi" rel="nofollow" id="iconTwitter">@Bambang Wicaksono Twitter</a>
<a style="top: 2.87457px; left: 131.284px; z-index: 1012; opacity: 0.6; -moz-transform: rotate(191.92deg);" href="http://www.stumbleupon.com/bambangwi" rel="nofollow" id="iconstumbleupon">@Bambang Wicaksono Stumbleupon</a>
<a style="top: 29.391px; left: 245.218px; z-index: 1000; opacity: 0.6; -moz-transform: rotate(295.304deg);" href="http://www.delicious.com/bambang_wicaksono" rel="nofollow" id="iconDelicious">Bambang Wicaksono de.licio.us</a>
<a style="top: 33.1283px; left: 248.676px; z-index: 1024; opacity: 0.6; -moz-transform: rotate(78.0497deg);" href="http://facebook.com/masbambangwicaksono" rel="nofollow" id="iconFacebook">Bambang Wicaksono Facebook</a>
<a style="top: 15.11px; left: 93.4135px; z-index: 1017; opacity: 0.6; -moz-transform: rotate(346.566deg);" href="http://www.reddit.com/bambangwi" rel="nofollow" id="iconreddit">Bambang Wicaksono Reddit</a>
<a style="top: 28.4499px; left: 47.2333px; z-index: 1020; opacity: 0.6; -moz-transform: rotate(65.6721deg);" href="http://www.digg.com/users/bambangwi" id="icondigg">Bambang Wicaksono Digg</a>
<a style="top: 13.7949px; left: 36.0966px; z-index: 1021; opacity: 0.6; -moz-transform: rotate(210.147deg);" href="mailto:bambang_wicaksono@yahoo.com" id="iconMail">Bambang Wicaksono Email</a>
<a style="top: 24.9191px; left: 393.534px; z-index: 1019; opacity: 0.6; -moz-transform: rotate(264.417deg);" href="http://www.google.com/reader/view/feed/http%3A%2F%2Ffeeds.feedburner.com%2FTemplateForYourBlog" rel="nofollow" id="iconfavorite">Bambang Wicaksono Feed</a>
</div>
</div>

The links are as standard as they come. These will be turned into dynamic icons.

The CSS

The first part of the process is using standard CSS to move the text off screen and instead use the icons as background images for the link:


<style type="text/css">
#followIcons a{ 
display:inline-block;
width:48px;
height:48px;
text-indent:-3000px;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
position:absolute;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
#iconRSS{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-KJtyRfscm6BKWKgvYsALanYeLbStHB3kvF65wink_JRq-90Z1PxlrpdpoTIEczcLJktN0i-n6FpuntadkekmB5aBhmK8BvvgsGMXfO_DMIta6nvV7pSfRUJsBmeu9-PTvGQL5txaxtq_/s1600/rss.png); }
#iconTwitter{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr2LepL1A6TN1N-5xjQSXqXW5-rYPU10RxZmHBR2CFCvuDsxcOW4iemzVoYgOhkQ1qVM6JHE-OiWQdq5Pd4FT_pGuF-UwMnG3s5iXWlrdKpzipPfnORcpb8hos15x_vjHwL-yyem_OtRpU/s1600/twitter_bird.png); }
#iconstumbleupon{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7owk_NkO0Oe-HyiSqpaOB_10mdEtP6WmqhtmfslTpCrDFtogefpA-IJCXP9oTZ1nafDSplZZUEkfIz8Yv9xDmJrcoRMcbMW1YkSFPORnYljGbjLQhmPGEEUPjowwBAM1jAhT6N3kf3oui/s1600/stumbleupon.png); }
#iconDelicious{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxMXZebFRg4d4i-w6a227prWzXobZj_BzKuHyWu9MO1ccTGv438ymb-o6bYdkm_3smqlQ1Y5kp8hLAPAu6bJDgQeLJG7ZLaSGAfi7aqQtop7_7EQoPnDn-69GExTqtRyCZKXtdd1SOy2v/s1600/delicious.png); }
#iconFacebook{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMngMnXlbvxY-nYFWUvIRJbVzaI18K3h10eGtsKTo6fkyVltNxeMSjVGCX_NkMi1aTuaHtxa5kDfuPMAdhkFrbODTqzCkEz6_hn49KuutKyk7q1GsLqrALaSpwLR5d0onUqJnk6_AvjCTb/s1600/facebook.png); }
#iconreddit{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO63v5IVnhyphenhyphenIXdggESFldsINq4AjyvnmD0s2gV52C6vPGUjwZc6MOKmPRTSH4lopWebTYtKGUqphQIT0KX_nh-r-9P-9wDXdimfTC_hymCjve77xu4EPCylH6zdh4iDHt9tU7iq9OZqw7c/s1600/reddit.png); }
#icondigg{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnvEIs2Ihyphenhypheng8J5byglGyZ8-VbgIvQT_5f9ofkogXEhc7LGUWhI5iFvABGUyj8xZUMXm7emN_S2CTTVvPOhl8Us_OTY_tnBEz18130TwTEVat0rBOcEAXO_rkNJARk7RfYC5uL9KNupsDQD/s1600/digg.png); }
#iconMail{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4HaWKzsEr5OCeknuHtmT9YdB87SfxAzceg4IDQojh5n4o5N9SneS55jyqwBsBU46QVJhrQafxRU3ckIViB1GA6XLWjpZoCT2L0eZ85bf10ZvLdsqyMTbrUZUcKYiArbfBAG_gwl7P0rn8/s1600/mail.png); }
#iconfavorite{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDiKESJFbDppDAGH4O3xGUWZnqivuAOrailEQH_Be9ogaQsyutkiKWdf0FcipaO4MyKLcAsrzVw9pgOm-8NLvdGy7VgZ7t3oXsu0ve3-53aAWqZHzLQBiCaW9NaAReFNKHZ1_7WWbblzZ/s1600/favorite.png); }
 </style>

The transition duration will be 0.8 seconds and transition property will be a basic transform. You can change the transform duration to any duration you'd like. Too fast or too slow will ruin the effect.

The jQuery JavaScript

The first part is randomly positioning each node/icon within the container. It's important to know the container's width and height, then subtract the icon width and height from that to know the true area you can fit the icon into. Nothing would be more lame than a piece of the icon hidden. The next step of the process is adding mouseenter and mouseleave events to make the images rotate and fade in during each respective event.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

 <script>
jQuery(document).ready(function() {

 // "Globals" - Will make things compress mo-betta
 var $random = function(x) { return Math.random() * x; };
 var availableWidth = 400, availableHeight = 40;
 
 // Get the proper CSS prefix
 if(jQuery.browser.webkit) {
  cssPrefix = "webkit";
 }
 else if(jQuery.browser.mozilla) {
  cssPrefix = "moz";
 }
 else if(jQuery.browser.opera) {
  cssPrefix = "o";
 }

 // Apply opacity
 var zIndex = 1000;
 
 // Randomize each link
 jQuery.each(jQuery("#followIcons a"),function(index) {
  var startDeg = $random(360);
  var element = jQuery(this);
  var resetPlace = function() {
   element.fadeTo(250,0.6).css("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
  };
  element.attr("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex).hover(function() {
   element.fadeTo(250,1).css("zIndex",++zIndex).css("-" + cssPrefix + "-transform","rotate(0deg)");
  },resetPlace);
  resetPlace();
 });
});
 </script>

When the mouseenter event occurs, the rotation is animated to 0, no rotation. When the mouse leaves the element, the element animates to its initial random rotation. You'll also note that I've used opacity to add to the subtle effect.

source article : davidwalsh.name/fade-spin-css3-jquery


Read More Add your Comment 0 comments


Circulate jQuery Plugin

Saturday, April 09, 2011 Posted by Unknown

circulate

Circulate, a jQuery plugin make your images circulate around your page. This plugin requires the jQuery library as well as the easing plugin, just include a small piece of code to get the images circulate.


Read More Add your Comment 0 comments


Dojo Lightbox

Wednesday, April 06, 2011 Posted by Unknown

dojo

The dojox.image.Lightbox resource has many cool features:
  • Integrated theming and images
  • Keyboard accessible
  • Resizes when the viewport changes
  • Flexible with numerous options
  • Declarative or Programmatic instance creation
  • Works with Dojo data stores
Let me show you just how easy it is to use Dojo's Lightbox solution!

The CSS

dojox.image.Lightbox doesn't require any of the Dijit themes but does require its own CSS file:


<style type="text/css">
/* post styles */
#imageHolder img { width:200px; }
/* Lightbox styles */
.tundra .dijitDialogUnderlay, 
.nihilo .dijitDialogUnderlay,
.soria .dijitDialogUnderlay {
 background-color:#000; 
}
.claro .dojoxLightbox .dijitDialogCloseIconHover,
.nihilo .dojoxLightbox .dijitDialogCloseIconHover,
.tundra .dojoxLightbox .dijitDialogCloseIconHover, 
.tundra .dojoxLightbox .dijitDialogCloseIconActive,
.nihilo .dojoxLightbox .dijitDialogCloseIconActive,
.claro .dojoxLightbox .dijitDialogCloseIconActive {
    background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/close.png') no-repeat 0 0;
}
.claro .dojoxLightbox,
.soria .dojoxLightbox,
.nihilo .dojoxLightbox,
.tundra .dojoxLightbox {
 position:absolute;
 z-index:999;
 overflow:hidden;
 width:100px;
 height:100px; 
 border:11px solid #fff !important; 
 background:#fff url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/loading.gif') no-repeat center center;
 
 -webkit-box-shadow: 0px 6px 10px #636363; 
 -webkit-border-radius: 3px;
 -moz-border-radius:4px;
 border-radius: 4px;
}
.dojoxLightboxContainer {
 position:absolute;
 top:0; left:0;
 background-color:#fff;
}
.dojoxLightboxFooter {
 padding-bottom:5px;
 position:relative;
 bottom:0;
 left:0;
 margin-top:8px;
 color:#333;
 z-index:1000;
 font-size:10pt;
}
.dojoxLightboxGroupText {
 color:#666; 
 font-size:8pt;
}
.LightboxNext,
.LightboxPrev,
.LightboxClose {
 float:right;
 width:16px;
 height:16px;
 cursor:pointer;
}
.claro .LightboxClose,
.nihilo .LightboxClose,
.LightboxClose {
 background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/close.png') no-repeat center center;
}
.di_ie6 .claro .LightboxClose,
.di_ie6 .nihilo .LightboxClose,
.dj_ie6 .tundra .LightboxClose {
 background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/images/close.gif') no-repeat center center;
}
.claro .LightboxNext, 
.nihilo .LightboxNext,
.LightboxNext {
 background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/right.png') no-repeat center center;
}
.dj_ie6 .claro .LightboxNext,
.dj_ie6 .nihilo .LightboxNext,
.dj_ie6 .tundra .LightboxNext {
 background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/images/right.gif') no-repeat center center;
}
.claro .LightboxPrev,
.nihilo .LightboxPrev,
.LightboxPrev {
 background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/images/left.png') no-repeat center center;
}
.dj_ie6 .claro .LightboxPrev,
.dj_ie6 .nihilo .LightboxPrev,
.dj_ie6 .tundra .LightboxPrev {
 background:url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/images/left.gif') no-repeat center center;
}
.soria .LightboxClose,
.soria .LightboxNext,
.soria .LightboxPrev {
 width:15px;
 height:15px;
 background:url('chrome://interclue/content/cluecore/skins/default/sprites.png') no-repeat center center;
 background-position:-60px;
}
.soria .LightboxNext {
 background-position:-30px 0;
}
.soria .LightboxPrev {
 background-position:0 0;
}
.dojoxLightboxText {
 margin:0; padding:0; 
}

     </style>

All of the imagery required comes via the CSS file -- no need to add your own styles.

The HTML and JavaScript

The first step in using any Dojo resources is adding a SCRIPT tag with a path to Dojo within the page and requiring the desired Dojo Toolkit resources:


<script>
  // Parse the page upon load
  djConfig = { parseOnLoad: true };
  // When the DOM is ready and resources are loaded...
        dojo.ready(function() {
     // Create an instance
     var lightbox = new dojox.image.Lightbox({ title:"My Sons", group:"My Sons", href:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJ7ZoJ-Dsi1Y3J90HqKJnqq_7aRGrGL1ButPqR1tlyNDvCWTPHFMeur_Rzn3LE1jeOucYK4JQG23VqGVftxH-61plAPPyygj5L26CfAnjl0u28DHG0wcTvpdBVjnEwHXFbnu_YAp1bhEw/s1600/My+Sons+1_490x395.jpg" });
     // Start it up!
     lightbox.startup();
        })
     </script>
 <!--bring in the lightbox CSS 
<link href='http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/Lightbox.css' rel='stylesheet' type='text/css'/>-->
 <!--bring in the claro theme
<link href='http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css'/>-->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript"></script>
     <script type="text/javascript">
  // Request dependencies
  dojo.require("dojox.image.Lightbox");
     </script>

With parseOnLoad in place, you can add links to the page with the data-dojo-type attribute set to dojox.image.Lightbox and instance-specific options within the data-dojo-props attribute.  Here's a sample:


<div id="imageHolder">
<a href="http://bambang-wicaksono.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJ7ZoJ-Dsi1Y3J90HqKJnqq_7aRGrGL1ButPqR1tlyNDvCWTPHFMeur_Rzn3LE1jeOucYK4JQG23VqGVftxH-61plAPPyygj5L26CfAnjl0u28DHG0wcTvpdBVjnEwHXFbnu_YAp1bhEw/s1600/My+Sons+1_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJ7ZoJ-Dsi1Y3J90HqKJnqq_7aRGrGL1ButPqR1tlyNDvCWTPHFMeur_Rzn3LE1jeOucYK4JQG23VqGVftxH-61plAPPyygj5L26CfAnjl0u28DHG0wcTvpdBVjnEwHXFbnu_YAp1bhEw/s320/My+Sons+1_490x395.jpg" alt="My Sons" /></a>
<a href="http://template4.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQxDh5TMGemmTEJ_IttLolot_e6lwW9dQfkjBQYsXrcrL-dTi29-npf2TCEaGTfBALpH-hJOMYpaJLgBhyphenhyphenPy22wZihUFJvbWid5RNg94xaNBfYo9iuP2bbdFqwE1FhBH-9mF92TedA4do/s1600/My+Sons+4_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQxDh5TMGemmTEJ_IttLolot_e6lwW9dQfkjBQYsXrcrL-dTi29-npf2TCEaGTfBALpH-hJOMYpaJLgBhyphenhyphenPy22wZihUFJvbWid5RNg94xaNBfYo9iuP2bbdFqwE1FhBH-9mF92TedA4do/s320/My+Sons+4_490x395.jpg" alt="My Sons" /></a>
<a href="http://template4ublog.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvau1rv67x7MnkgGD7RRdUnBHzRJl0VtlD8QnQSkVRloFtM4YdlHGukzJOgpkTTcn6suLQn2RAUDs-BZZ-0v05802JyBzZUCpTOVzzDRWo8G44v3q_06qwKFgc4KgaHziV6reWx9cJfyu1/s1600/My+Sons+2_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvau1rv67x7MnkgGD7RRdUnBHzRJl0VtlD8QnQSkVRloFtM4YdlHGukzJOgpkTTcn6suLQn2RAUDs-BZZ-0v05802JyBzZUCpTOVzzDRWo8G44v3q_06qwKFgc4KgaHziV6reWx9cJfyu1/s320/My+Sons+2_490x395.jpg" alt="My Sons" /></a>
<a href="http://template4.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjds1JBSqKzZs56MiyZSRlsOiVr4HYpGWKXRBdqLT4b6NoCyyN7gnXLTJbGQMOjS5-K-wiDY9OpV63vk2z_D5gwFWc7lp40s1C9Hi5yh6RhSYUZ3kilXPTRbbr7Qiw6D9sR4t-8diTi4rmY/s1600/My+Sons+3_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjds1JBSqKzZs56MiyZSRlsOiVr4HYpGWKXRBdqLT4b6NoCyyN7gnXLTJbGQMOjS5-K-wiDY9OpV63vk2z_D5gwFWc7lp40s1C9Hi5yh6RhSYUZ3kilXPTRbbr7Qiw6D9sR4t-8diTi4rmY/s320/My+Sons+3_490x395.jpg" alt="My Sons" /></a>
<a href="http://template4ublog.blogspot.com/" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'My Sons',title:'My Sons',href:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQxDh5TMGemmTEJ_IttLolot_e6lwW9dQfkjBQYsXrcrL-dTi29-npf2TCEaGTfBALpH-hJOMYpaJLgBhyphenhyphenPy22wZihUFJvbWid5RNg94xaNBfYo9iuP2bbdFqwE1FhBH-9mF92TedA4do/s1600/My+Sons+4_490x395.jpg'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQxDh5TMGemmTEJ_IttLolot_e6lwW9dQfkjBQYsXrcrL-dTi29-npf2TCEaGTfBALpH-hJOMYpaJLgBhyphenhyphenPy22wZihUFJvbWid5RNg94xaNBfYo9iuP2bbdFqwE1FhBH-9mF92TedA4do/s320/My+Sons+4_490x395.jpg" alt="My Sons" /></a>
</div>

Groups allow you to have images available within...groups... with next and previous buttons.  The title property provides a ...title... and the href property provides the content which should load within the lightbox. You may have any number of groups on the page.  That's all that's needed to create a simple Dojo Lightbox declaratively!

With your instance created, start adding more images:


// Add another image by using the lightbox's _attachedDialog method...
lightbox._attachedDialog.addImage({
 title:"My Sons 2", 
 group:"My Sons",  // Can be same group or different!
 href:"MySons.jpg"
});

Regardless of declarative or programmatic implementation, you can show or hide the lightbox with the respective methods:


// Show the lightbox
lightbox.show();
// Hide the lightbox!
lightbox.hide();

As you'd expect with any Dojo Toolkit resource, dojox.image.Lightbox provides the usual onShow, onHide, and other utility methods that are helpful in customizing the Lightbox usage.

dojox.image.Lightbox and dojox.image.LightboxDialog are great resources available within Dojo's "treasure chest", DojoX. Other classes within the dojox.image namespace include Gallery, Slideshow, and Magnifier.

source article: David Walsh


Read More Add your Comment 0 comments


Exploding Logo with CSS3 and jQuery

Tuesday, April 05, 2011 Posted by Unknown



Ryan's CSS animation library, available with vanilla JavaScript, MooTools, or jQuery, and can only be described as a fucking work of art. His animation library is mobile-enabled, works a variety of A-grade browsers, and is very compact.

The HTML

The exploding element can be of any type, but for the purposes of this example, we'll use an A element with a background image:


<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJF8_HvqT5tDnoXoxYASpnTyJVw0VRB-0101zOF-cVVKHCk4bqIDMn1zZZsc720408lrX5xx2aN0D7B9nyW2IHMI_AqvlQJinffojMWOouWOxQd1bFXGTau0byY3SIJ3rYrneeWw4A3eY/s320/Wayang+Kulit.jpg" id="homeLogo">Deviation</a>

Make sure the element you use is a block element, or styled to be block.

The CSS

The original element should be styled to size (width and height) with the background image that we'll use as the exploding image:


<style type="text/css">
a#homeLogo { 
 width:300px; 
 height:233px; 
 text-indent:-3000px; 
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJF8_HvqT5tDnoXoxYASpnTyJVw0VRB-0101zOF-cVVKHCk4bqIDMn1zZZsc720408lrX5xx2aN0D7B9nyW2IHMI_AqvlQJinffojMWOouWOxQd1bFXGTau0byY3SIJ3rYrneeWw4A3eY/s200/Wayang+Kulit.jpg) 0 0 no-repeat; 
 display:block; 
 z-index:2; 
}
a#homeLogo span { 
 float:left;
 display:block;
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJF8_HvqT5tDnoXoxYASpnTyJVw0VRB-0101zOF-cVVKHCk4bqIDMn1zZZsc720408lrX5xx2aN0D7B9nyW2IHMI_AqvlQJinffojMWOouWOxQd1bFXGTau0byY3SIJ3rYrneeWw4A3eY/s200/Wayang+Kulit.jpg); 
 background-repeat:no-repeat;
}
.clear { clear:both; }
</style>

Remember to set the text-indent setting so that the link text will not display.  The explosion shards will be JavaScript-generated SPAN elements which are displayed as in block format.  Note that the SPAN has the same background image as the A element -- we'll simply modify the background position of the element to act as the piece of the logo that each SPAN represents.

The jQuery JavaScript

Ryan also wrote the CSS animation code in jQuery so you can easily create a comparable effect with jQuery!


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://compbenefit.co.cc/wp-content/uploads/cssanimation/CSSAnimation.js"></script>
<script src="http://compbenefit.co.cc/wp-content/uploads/cssanimation/CSSAnimation.jQuery.js"></script>

<script>
Number.random = function(min, max){
 return Math.floor(Math.random() * (max - min + 1) + min);
};

var zeros = {x:0, y:0, z:0};

jQuery.extend(jQuery.fn, {

 scatter: function(){
  return this.translate({
   x: Number.random(-1000, 1000),
   y: Number.random(-1000, 1000),
   z: Number.random(-500, 500)
  }).rotate({
   x: Number.random(-720, 720),
   y: Number.random(-720, 720),
   z: Number.random(-720, 720)
  });
 },

 unscatter: function(){ 
  return this.translate(zeros).rotate(zeros);
 },

 frighten: function(d){
  var self = this;
  this.setTransition('timing-function', 'ease-out').scatter();
  setTimeout(function(){
   self.setTransition('timing-function', 'ease-in-out').unscatter();
  }, 500);
  return this;
 },

 zoom: function(delay){
  var self = this;
  this.scale(0.01);
  setTimeout(function(){
   self.setTransition({
    property: 'transform',
    duration: '250ms',
    'timing-function': 'ease-out'
   }).scale(1.2);
   setTimeout(function(){
    self.setTransition('duration', '100ms').scale(1);
   }, 250)
  }, delay);
  return this;
 },

 makeSlider: function(){
  return this.each(function(){
   var $this = $(this),
    open = false,
    next = $this.next(),
    height = next.attr('scrollHeight'),
    transition = {
     property: 'height',
     duration: '500ms',
     transition: 'ease-out'
    };
   next.setTransition(transition);
   $this.bind('click', function(){
    next.css('height', open ? 0 : height);
    open = !open;
   });
  })
 },

 fromChaos: (function(){
  var delay = 0;
  return function(){
   return this.each(function(){
    var element = $(this);
    //element.scatter();
    setTimeout(function(){
     element.setTransition({
      property: 'transform',
      duration: '500ms',
      'timing-function': 'ease-out'
     });
     setTimeout(function(){
      element.unscatter();
      element.bind({
       mouseenter: jQuery.proxy(element.frighten, element),
       touchstart: jQuery.proxy(element.frighten, element)
      });
     }, delay += 100);
    }, 1000);
   })
  }
 }())

});

// When the DOM is ready...
$(document).ready(function() {
 
 // Get the proper CSS prefix
 var cssPrefix = false;
 if(jQuery.browser.webkit) {
  cssPrefix = "webkit";
 }
 else if(jQuery.browser.mozilla) {
  cssPrefix = "moz";
 }
 
 // If we support this browser
 if(cssPrefix) {
  // 300 x 233
  var cols = 10; // Desired columns
  var rows = 8; // Desired rows
  var totalWidth = 300; // Logo width
  var totalHeight = 233; // Logo height
  var singleWidth = Math.ceil(totalWidth / cols); // Shard width
  var singleHeight = Math.ceil(totalHeight / rows); // Shard height
  
  // Remove the text and background image from the logo
  var logo = jQuery("#homeLogo").css("backgroundImage","none").html("");
  
  // For every desired row
  for(x = 0; x < rows; x++) {
   var last;
   //For every desired column
   for(y = 0; y < cols; y++) {
    // Create a SPAN element with the proper CSS settings
    // Width, height, browser-specific CSS
    last = jQuery("<span />").attr("style","width:" + (singleWidth) + "px;height:" + (singleHeight) + "px;background-position:-" + (singleHeight * y) + "px -" + (singleWidth * x) + "px;-" + cssPrefix + "-transition-property: -" + cssPrefix + "-transform; -" + cssPrefix + "-transition-duration: 200ms; -" + cssPrefix + "-transition-timing-function: ease-out; -" + cssPrefix + "-transform: translateX(0%) translateY(0%) translateZ(0px) rotateX(0deg) rotateY(0deg) rotate(0deg);");
    // Insert into DOM
    logo.append(last);
   }
   // Create a DIV clear for row
   last.append(jQuery("<div />").addClass("clear"));
  }
  
  // Chaos!
  jQuery("#homeLogo span").fromChaos();
 }
});
</script>

and you are done

source article : davidwalsh.name/css-explode


Read More Add your Comment 0 comments


Create a Spinning Effect with CSS3

Tuesday, April 05, 2011 Posted by Unknown



They're smooth, less taxing than JavaScript, and are the future of node animation within browsers. Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects is the spinning, zooming CSS animation.

The CSS

The first task is creating the base animation with @-webkit-keyframes:


@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}

The -webkit-transform property is the animator in this animation. Define that at 0% the element is at 0 rotation and scaled to 1 -- that is the original state of the element. At 50% of the animation, the element should be rotated 360 degress (a complete spin), and the element should grow twice in size.  At 100%, the element should return to its original scale and rotate to 720 degrees, thus looking the same as it started.

With our named animation created, it's time to apply the animation to an element upon its hover state:


a.advert:hover { 
  -webkit-animation-name:rotater; 
  -webkit-animation-duration:500ms; 
  -webkit-animation-iteration-count:1; 
  -webkit-animation-timing-function:ease-out;
  -moz-transform:rotate(720eg) scale(2); 
  -moz-transition-duration:500ms; 
  -moz-transition-timing-function: ease-out;
}

The event is assigned using the -webkit-animation-name property. Additional properties are assigned: -webkit-animation-duration makes the animation last 500 milliseconds, -webkit-animation-iteration-count directs the animation to occur only once, and -webkit-animation-timing-function sets the easing transition to ease-out.

Highly recommend using this effect with fixed-size DOM nodes, with background images. Using this effect with simple DOM nodes doesn't look great.

source article: David Walsh


Read More Add your Comment 0 comments


Creating Gradients with CSS3 and HTML5

Tuesday, April 05, 2011 Posted by Unknown




DIVs with Rounded Corners in CSS3



Tutorial about creating Gradients with CSS3.


How to create rounded corners with CSS3.

5 Useful CSS3 Properties You Need to Know


Brief review of useful CSS3 properties.

Border Radius: CSS Rounded Corners Without Images


One more tutorial about CSS3 Rounded corners

CSS Browser Extensions: Vendor Specific Properties


This article tells about specific properties of various browsers.

Fun with CSS3 and Border-Radius


This articles describes botder-radius feature in details.

Tutorial: CSS3 & Tooltips!


Tutorial about creating tooltips with CSS3.

Pure CSS3 Flexbox Tutorial


From this tutoorial you will learn how to create custom flexbox with CSS3.

Playing with CSS 3 - Animations, Rotate and Scale


This article coverss some interesting CSS3 features.

Create the accordion effect using CSS3


Tutorial about creating accordion with pure CSS3.

Custom radio and checkbox inputs using CSS


This tutorial will teach you how to style Checkoxes with CSS3.

Halftone Navigation Menu With jQuery & CSS3


Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Deal-breaker problems with CSS3 multi-columns


This article will tell you about new multi-column properties in CSS3.

CSS effect: space images out to match text height


In this tutorial you will read about interesting resing effect, creted with CSS3.

Foreground images that scale with the layout


Simple CSS techniques can make the content images inside your liquid or elastic pages scale with the layout.


Read More Add your Comment 0 comments


The use of jQuery

Tuesday, April 05, 2011 Posted by Unknown



Overlay-like Effect with jQuery


 Today we will create a slick overlay effect with jQuery that does not use an overlay.


Fullscreen Gallery with Thumbnail Flip


 In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. 


Making a Flickr-powered Slideshow


Today we will be developing a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets. 


Converting jQuery Code to a Plugin


When it comes to efficiently organizing jQuery code, one of the best options is turning certain parts of it into a plugin. There are many benefits to this - your code becomes easier to modify and follow, and repetitive tasks are handled naturally. This also improves the speed with which you develop, as plugin organization promotes code reuse.


jQuery fancy Draggable Captcha


Tutorial about creating captcha with jQuery.


Rounded Menu with CSS3 and jQuery


In this tutorial we will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.


jQuery Advanced Ajax validation with CAPTCHA



One more tutorial about creating captcha with jQuery.


Populate Select Boxes


It's the age old (well, in webby terms) issue of how to populate one select box based on another's selection. It's actually quite easy compared with the bad old days, and incredibly easy with jQuery and a dash of Ajax. 


A Snazzy Animated Pie Chart with HTML5 and jQuery


Tutorial about creating animated chart with jQuery.


Spotlight: Constrained Stickies with jQuery


This tutorial will show you how to use stickyFloat plugin.


Fun with jQuery Templating and AJAX


In this tutorial, we'll take a look at how jQuery's beta templating system can be put to excellent use in order to completely decouple our HTML from our scripts. We?ll also take a quick look at jQuery 1.5's completely revamped AJAX module.


Think Right-to-Left with jQuery


As English speakers, our minds are geared toward interpreting data and text from left-to-right. However, as it turns out, many of the modern JavaScript selector engines (jQuery, YUI 3, NWMatcher), and the native querySelectorAll, parse selector strings from right to left. 


Reveal extra form fields using a select box with jQuery


Sometimes we need to include a feedback form but without making it too obtrusive to the user so we only want to add options when he is actually using it. In this tutorial we're going to learn how to reveal hidden fields in a form when an option in a select combo box is selected using jQuery, the JavaScript library.


Add a character counter for the excerpt in WordPress

The excerpt is great for magazine sites where only a small bunch of words can be displayed on the home page. However, the lack of a character counting functionality for the field makes it hard to know how many you already typed in. In this tutorial we will learn how to easily add a character counter for the excerpt.


Featured posts slider in WordPress using sticky posts and jQuery


In this post we will learn how to create a featured posts section, using WordPress sticky posts and how to integrate them in a slider, using jQuery Cycle.


How to hide Personal Options in WordPress User Profile


Even though WordPress might not the friendliest CMS for user management, provides a good amount of customization for users meta information and profiles. However, one thing that is a bit rough right now is the Personal Options block in the User Pofile: you can't hide it by removing an action hook or even filter it. In this tutorial we?re going to learn how to removing it using jQuery.


Yahoo Instant Search with jQuery and Ajax


Tutorial about Yahoo instant search implementing with Yahoo Search Boss API using jQuery and Ajax. 


Gravity Registration Form with jQuery


Tutorial about creating animated login form.


Typing Game with jQuery


Tutorrial about creating simple game with jQuery.


Read More Add your Comment 0 comments


 

About Me

© 2010 jQuery World All Rights Reserved Thesis WordPress Theme Converted into Blogger Template by Hack Tutors.info