Codice PHP:
;(function($){
/**
* @author Ti ($.fn.retina) [url]http://3apaxi.com/[/url] [email]ti.bugmenot@gmail.com[/email]
* @author Martin Angelov (idea, example) [url]http://tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/[/url]
* @version 0.1 (07.10.2010)
*/
$.fn.retina = function(options) {
options = $.extend(true, {
// default options:
enable: true, // false to deattach retina
css: {}, // custom css
appendTo: 'body', //
src: null, // src of large iamge (else use rel, src or href attrs)
radius: null, // css radius (null - auto)
ie: {
css3pie: 'PIE.htc', // URI of css3pie (for IE)
cursor: 'blank.cur' // URI of blank.cur (for IE)
},
preload: false // preload large image?
}, options)
// attach
if (options.enable) {
this.each(function() {
if (this.retina) this.retina.deattach() // reattach retina
this.retina = new Retina(this, options.src || $(this).attr('rel') || $(this).attr('src') || $(this).attr('href'), options)
})
}
// deattach
else {
this.each(function() {
if (this.retina) {
this.retina.deattach()
delete this.retina
}
})
}
return this
}
var Retina = function(element, largeImage, options) {
var _this = this
var node = $(element)
var glass
var oldIe
var init = function() {
oldIe = $.browser.msie && /^[5-8]\./.test($.browser.version)
var getCursor = function() {
if (oldIe && options.ie.cursor) return 'url('+options.ie.cursor+'),crosshair'
if ($.browser.mozilla || $.browser.opera) return 'none'
var blankCur = 'AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAgICAAMDAwAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////w=='
if ($.browser.webkit) blankCur = blankCur.slice(0, 829)+'P'+blankCur.slice(830,1016)+'f'+blankCur.slice(1017)
return 'url(data:text/plain;base64,'+blankCur+'),none'
}
glass = $('<div></div>')
glass.css($.extend(true, {
display: 'none',
background: 'no-repeat center center white url('+largeImage+')',
border: '2px solid white',
/* Positioned absolutely, so we can move it around */
position: 'absolute',
top: 0,
left: 0,
height: 180,
width: 180,
/* CSS3 Box Shadow */
boxShadow: '0 0 5px #777, 0 0 10px #aaa inset',
'-webkit-box-shadow': '0 0 5px #777',
'-moz-box-shadow': '0 0 5px #777, 0 0 10px #aaa inset',
cursor: getCursor()
}, options.css))
glass.appendTo(options.appendTo)
var radius = options.radius || Math.min(glass.width(),glass.height())/2 +'px'
glass.css({
/* CSS3 rounded corners */
borderRadius: radius,
'-webkit-border-radius': radius,
'-moz-border-radius': radius
})
if (oldIe && options.ie.css3pie) glass.css('behavior', 'url('+options.ie.css3pie+')')
$(document).bind('mousemove', _this.move)
// on load image - recalculate size
node.find('img').add(node).load(_this.loadSize)
$(window).resize(_this.loadSize)
init = $.noop
}
var offset, width, height, glassWidth, glassHeight
_this.loadSize = function() {
offset = node.offset()
width = node.width()
height = node.height()
glassWidth = glass.width()
glassHeight = glass.height()
}
_this.show = function(e) {
init()
_this.loadSize()
if (oldIe && options.ie.css3pie) glass.show()
else glass.stop(true, true).fadeIn('fast')
_this.move(e)
}
_this.hide = function() {
if (oldIe && options.ie.css3pie) glass.hide()
else glass.stop(true, true).fadeOut('fast')
}
_this.move = function(e) {
// mouse out
if (e.pageX < offset.left || e.pageY < offset.top) return _this.hide()
if (offset.left + width < e.pageX) return _this.hide()
if (offset.top + height < e.pageY) return _this.hide()
glass.css({
// moving the retina div with the mouse
marginLeft: e.pageX - glassWidth/2, // left and top css not work in ie with css3pie!
marginTop: e.pageY - glassHeight/2,
// scrolling the background
backgroundPosition: ( (100/width) * (e.pageX - offset.left) )+'% '+( (100/height) * (e.pageY - offset.top) )+'%'
})
}
_this.deattach = function() {
node.unbind('mouseenter', _this.show)
if (glass) {
glass.remove()
$(document).unbind('mousemove', _this.move)
node.find('img').add(node).unbind('load', _this.loadSize)
$(window).unbind('resize', _this.loadSize)
}
}
node.bind('mouseenter', _this.show)
// preload
if (options.preload) $(new Image).attr('src', largeImage)
}
})(jQuery);
Rispondi quotando