magnifier-rails 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +15 -0
- data/README.md +42 -0
- data/Rakefile +3 -0
- data/lib/generators/magnifier/install_generator.rb +15 -0
- data/lib/magnifier-rails.rb +5 -0
- data/lib/magnifier/rails.rb +8 -0
- data/lib/magnifier/rails/engine.rb +6 -0
- data/lib/magnifier/rails/version.rb +5 -0
- data/vendor/assets/javascripts/jquery.imageWarp.js +75 -0
- data/vendor/assets/javascripts/jquery.js +9789 -0
- data/vendor/assets/javascripts/jquery.magnifier.js +136 -0
- metadata +82 -0
@@ -0,0 +1,136 @@
|
|
1
|
+
/* jQuery Image Magnify script v1.1
|
2
|
+
* This notice must stay intact for usage
|
3
|
+
* Author: Dynamic Drive at http://www.dynamicdrive.com/
|
4
|
+
* Visit http://www.dynamicdrive.com/ for full source code
|
5
|
+
|
6
|
+
* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
|
7
|
+
* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)
|
8
|
+
*/
|
9
|
+
|
10
|
+
jQuery.noConflict()
|
11
|
+
|
12
|
+
jQuery.imageMagnify={
|
13
|
+
dsettings: {
|
14
|
+
magnifyby: 3, //default increase factor of enlarged image
|
15
|
+
duration: 500, //default duration of animation, in millisec
|
16
|
+
imgopacity: 0.2 //opacify of original image when enlarged image overlays it
|
17
|
+
},
|
18
|
+
cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
|
19
|
+
zIndexcounter: 100,
|
20
|
+
|
21
|
+
refreshoffsets:function($window, $target, warpshell){
|
22
|
+
var $offsets=$target.offset()
|
23
|
+
var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()}
|
24
|
+
warpshell.attrs.x=$offsets.left //update x position of original image relative to page
|
25
|
+
warpshell.attrs.y=$offsets.top
|
26
|
+
warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2
|
27
|
+
warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2
|
28
|
+
if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left?
|
29
|
+
warpshell.newattrs.x=winattrs.x+5
|
30
|
+
}
|
31
|
+
else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right?
|
32
|
+
warpshell.newattrs.x=winattrs.x+5
|
33
|
+
}
|
34
|
+
if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top?
|
35
|
+
warpshell.newattrs.y=winattrs.y+5
|
36
|
+
}
|
37
|
+
},
|
38
|
+
|
39
|
+
magnify:function($, $target, options){
|
40
|
+
var setting={} //create blank object to store combined settings
|
41
|
+
var setting=jQuery.extend(setting, this.dsettings, options)
|
42
|
+
var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()}
|
43
|
+
var newattrs={}
|
44
|
+
newattrs.w=(setting.magnifyto)? setting.magnifyto : Math.round(attrs.w*setting.magnifyby)
|
45
|
+
newattrs.h=(setting.magnifyto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.magnifyby)
|
46
|
+
$target.css('cursor', jQuery.imageMagnify.cursorcss)
|
47
|
+
if ($target.data('imgshell')){
|
48
|
+
$target.data('imgshell').$clone.remove()
|
49
|
+
$target.css({opacity:1}).unbind('click.magnify')
|
50
|
+
}
|
51
|
+
var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)
|
52
|
+
$clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with
|
53
|
+
$target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs})
|
54
|
+
$target.bind('click.magnify', function(e){ //action when original image is clicked on
|
55
|
+
var $this=$(this).css({opacity:setting.imgopacity})
|
56
|
+
var imageinfo=$this.data('imgshell')
|
57
|
+
jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
|
58
|
+
var $clone=imageinfo.$clone
|
59
|
+
$clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible', display:'block'})
|
60
|
+
.animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
|
61
|
+
function(){ //callback function after warping is complete
|
62
|
+
//none added
|
63
|
+
}) //end animate
|
64
|
+
}) //end click
|
65
|
+
$clone.click(function(e){ //action when magnified image is clicked on
|
66
|
+
var $this=$(this)
|
67
|
+
var imageinfo=$this.data('$relatedtarget').data('imgshell')
|
68
|
+
jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images
|
69
|
+
$this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h}, setting.duration,
|
70
|
+
function(){
|
71
|
+
$this.hide()
|
72
|
+
$this.data('$relatedtarget').css({opacity:1}) //reveal original image
|
73
|
+
}) //end animate
|
74
|
+
}) //end click
|
75
|
+
}
|
76
|
+
};
|
77
|
+
|
78
|
+
jQuery.fn.imageMagnify=function(options){
|
79
|
+
var $=jQuery
|
80
|
+
return this.each(function(){ //return jQuery obj
|
81
|
+
var $imgref=$(this)
|
82
|
+
if (this.tagName!="IMG")
|
83
|
+
return true //skip to next matched element
|
84
|
+
if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined
|
85
|
+
jQuery.imageMagnify.magnify($, $imgref, options)
|
86
|
+
}
|
87
|
+
else if (this.complete){ //account for IE not firing image.onload
|
88
|
+
jQuery.imageMagnify.magnify($, $imgref, options)
|
89
|
+
}
|
90
|
+
else{
|
91
|
+
$(this).bind('load', function(){
|
92
|
+
jQuery.imageMagnify.magnify($, $imgref, options)
|
93
|
+
})
|
94
|
+
}
|
95
|
+
})
|
96
|
+
};
|
97
|
+
|
98
|
+
jQuery.fn.applyMagnifier=function(options){ //dynamic version of imageMagnify() to apply magnify effect to an image dynamically
|
99
|
+
var $=jQuery
|
100
|
+
return this.each(function(){ //return jQuery obj
|
101
|
+
var $imgref=$(this)
|
102
|
+
if (this.tagName!="IMG")
|
103
|
+
return true //skip to next matched element
|
104
|
+
|
105
|
+
})
|
106
|
+
|
107
|
+
};
|
108
|
+
|
109
|
+
|
110
|
+
//** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs
|
111
|
+
//** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image
|
112
|
+
|
113
|
+
jQuery(document).ready(function($){
|
114
|
+
var $targets=$('.magnify')
|
115
|
+
$targets.each(function(i){
|
116
|
+
var $target=$(this)
|
117
|
+
var options={}
|
118
|
+
if ($target.attr('data-magnifyto'))
|
119
|
+
options.magnifyto=parseFloat($target.attr('data-magnifyto'))
|
120
|
+
if ($target.attr('data-magnifyby'))
|
121
|
+
options.magnifyby=parseFloat($target.attr('data-magnifyby'))
|
122
|
+
if ($target.attr('data-magnifyduration'))
|
123
|
+
options.duration=parseInt($target.attr('data-magnifyduration'))
|
124
|
+
$target.imageMagnify(options)
|
125
|
+
})
|
126
|
+
var $triggers=$('a[rel^="magnify["]')
|
127
|
+
$triggers.each(function(i){
|
128
|
+
var $trigger=$(this)
|
129
|
+
var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]'
|
130
|
+
$trigger.data('magnifyimageid', targetid)
|
131
|
+
$trigger.click(function(e){
|
132
|
+
$('#'+$(this).data('magnifyimageid')).trigger('click.magnify')
|
133
|
+
e.preventDefault()
|
134
|
+
})
|
135
|
+
})
|
136
|
+
})
|
metadata
ADDED
@@ -0,0 +1,82 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: magnifier-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.2
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Ghayathri
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2014-01-07 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: bundler
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ~>
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '1.3'
|
20
|
+
type: :development
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - ~>
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '1.3'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: rake
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - ! '>='
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '0'
|
34
|
+
type: :development
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - ! '>='
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '0'
|
41
|
+
description: image magnifier
|
42
|
+
email:
|
43
|
+
- aghayathri@hotmail.com
|
44
|
+
executables: []
|
45
|
+
extensions: []
|
46
|
+
extra_rdoc_files: []
|
47
|
+
files:
|
48
|
+
- lib/generators/magnifier/install_generator.rb
|
49
|
+
- lib/magnifier/rails/engine.rb
|
50
|
+
- lib/magnifier/rails/version.rb
|
51
|
+
- lib/magnifier/rails.rb
|
52
|
+
- lib/magnifier-rails.rb
|
53
|
+
- vendor/assets/javascripts/jquery.imageWarp.js
|
54
|
+
- vendor/assets/javascripts/jquery.js
|
55
|
+
- vendor/assets/javascripts/jquery.magnifier.js
|
56
|
+
- Rakefile
|
57
|
+
- README.md
|
58
|
+
homepage: https://github.com/Ghayathri/magnifier-rails
|
59
|
+
licenses:
|
60
|
+
- MIT
|
61
|
+
metadata: {}
|
62
|
+
post_install_message:
|
63
|
+
rdoc_options: []
|
64
|
+
require_paths:
|
65
|
+
- lib
|
66
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
67
|
+
requirements:
|
68
|
+
- - ! '>='
|
69
|
+
- !ruby/object:Gem::Version
|
70
|
+
version: '0'
|
71
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
72
|
+
requirements:
|
73
|
+
- - ! '>='
|
74
|
+
- !ruby/object:Gem::Version
|
75
|
+
version: '0'
|
76
|
+
requirements: []
|
77
|
+
rubyforge_project:
|
78
|
+
rubygems_version: 2.1.11
|
79
|
+
signing_key:
|
80
|
+
specification_version: 4
|
81
|
+
summary: gem for image magnifier
|
82
|
+
test_files: []
|