Created
March 18, 2011 03:23
-
-
Save c1b3rh4ck/875567 to your computer and use it in GitHub Desktop.
Zoom modificado de @barreto nice !
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*script para realizar un zoom con javascript | |
by barreto modificado para propositos educativos by c1b3rh4ck | |
*/ | |
1. insertar lo siguiente dentro del head | |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> | |
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script> | |
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script> | |
2. tambien las css | |
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" /> | |
<link rel="stylesheet" href="style.css" /> | |
3.luego este script | |
<script type="text/javascript"> | |
$(document).ready(function() { | |
/* | |
* Examples - images | |
*/ | |
$("a#example1").fancybox({ | |
'titleShow' : false | |
}); | |
$("a#example2").fancybox({ | |
'titleShow' : false, | |
'transitionIn' : 'elastic', | |
'transitionOut' : 'elastic' | |
}); | |
$("a#example3").fancybox({ | |
'titleShow' : false, | |
'transitionIn' : 'none', | |
'transitionOut' : 'none' | |
}); | |
$("a#example4").fancybox(); | |
$("a#example5").fancybox({ | |
'titlePosition' : 'inside' | |
}); | |
$("a#example6").fancybox({ | |
'titlePosition' : 'over' | |
}); | |
$("a[rel=example_group]").fancybox({ | |
'transitionIn' : 'none', | |
'transitionOut' : 'none', | |
'titlePosition' : 'over', | |
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { | |
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>'; | |
} | |
}); | |
/* | |
* Examples - various | |
*/ | |
$("#various1").fancybox({ | |
'titlePosition' : 'inside', | |
'transitionIn' : 'none', | |
'transitionOut' : 'none' | |
}); | |
$("#various2").fancybox(); | |
$("#various3").fancybox({ | |
'width' : '75%', | |
'height' : '75%', | |
'autoScale' : false, | |
'transitionIn' : 'none', | |
'transitionOut' : 'none', | |
'type' : 'iframe' | |
}); | |
$("#various4").fancybox({ | |
'padding' : 0, | |
'autoScale' : false, | |
'transitionIn' : 'none', | |
'transitionOut' : 'none' | |
}); | |
}); | |
</script> | |
4. enumerar las imagenes para el script | |
asi : | |
<a id="example1" href="./example/1_b.jpg"><img alt="example1" src="./example/1_s.jpg" /></a> | |
donde la primer imagen es la grande y la segunda es la pequeña |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment