Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use existing .zoomImg element #55

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Use existing .zoomImg element #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b2e12ff
add git ignore
stewartknapman Jul 1, 2014
cde071a
setup grunt for linting and uglifying
stewartknapman Jul 1, 2014
8ee5009
use exsisting zoom element if we have it
stewartknapman Jul 1, 2014
f7b5873
setup image switching demo
stewartknapman Jul 1, 2014
9429032
use existsing image ele if we have it
stewartknapman Jul 1, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
bower_components
node_modules
70 changes: 70 additions & 0 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/*global module:false*/
module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
// Task configuration.
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
unused: true,
boss: true,
eqnull: true,
globals: {
document: true,
window: true,
console: true,
alert: true,
Image: true,
$: true,
jQuery: true
}
},
gruntfile: {
src: 'Gruntfile.js'
},
assets: {
src: ['jquery.zoom.js']
}
},
uglify: {
options: {
mangle: false
},
dist: {
files: {
'jquery.zoom.min.js': 'jquery.zoom.js'
}
}
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gruntfile']
},
jshint: {
files: '<%= jshint.assets.src %>',
tasks: ['jshint:assets']
},
uglify: {
files: 'jquery.zoom.js',
tasks: ['uglify']
}
}
});

// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');

// Default task.
grunt.registerTask('default', ['jshint', 'uglify']);
};
31 changes: 30 additions & 1 deletion demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@

#ex2 img:hover { cursor: url(grab.cur), default; }
#ex2 img:active { cursor: url(grabbed.cur), default; }

</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src='jquery.zoom.js'></script>
Expand All @@ -42,11 +43,25 @@
$('#ex1').zoom();
$('#ex2').zoom({ on:'grab' });
$('#ex3').zoom({ on:'click' });
$('#ex4').zoom({ on:'toggle' });
$('#ex4').zoom({ on:'toggle' });
$('#ex5').zoom();
});

$(document).on('click', '.switch-image', function(){
var
newSrc = $(this).find('img')[0].src,
mainImg = $('#ex5 img')[0];
if(mainImg.src !== newSrc){
mainImg.src = newSrc;
$('#ex5').zoom({ url: newSrc });
}
});
</script>
</head>
<body>
<h1>Zoom demo</h1>
<section>
<h2>Basic examples</h2>
<span class='zoom' id='ex1'>
<img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
<p>Hover</p>
Expand All @@ -63,5 +78,19 @@
<img src='roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
<p>Click to toggle</p>
</span>
</section>
<hr>
<section id="image-switching">
<h2>Image switching</h2>
<span class='zoom' id='ex5'>
<img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
</span>
<a href="#" class="switch-image">
<img src='daisy.jpg' width='139' height='80' alt='Daisy on the Ohoopee'/>
</a>
<a href="#" class="switch-image">
<img src='roxy.jpg' width='73' height='80' alt='Roxy on the Ohoopee'/>
</a>
</section>
</body>
</html>
42 changes: 21 additions & 21 deletions jquery.zoom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,26 +29,26 @@
position = $(target).css('position'),
$source = $(source);

// The parent element needs positioning so that the zoomed element can be correctly positioned within.
target.style.position = /(absolute|fixed)/.test(position) ? position : 'relative';
target.style.overflow = 'hidden';

img.style.width = img.style.height = '';

$(img)
.addClass('zoomImg')
.css({
position: 'absolute',
top: 0,
left: 0,
opacity: 0,
width: img.width * magnify,
height: img.height * magnify,
border: 'none',
maxWidth: 'none',
maxHeight: 'none'
})
.appendTo(target);
// The parent element needs positioning so that the zoomed element can be correctly positioned within.
target.style.position = /(absolute|fixed)/.test(position) ? position : 'relative';
target.style.overflow = 'hidden';
img.style.width = img.style.height = '';
$(img)
.addClass('zoomImg')
.css({
position: 'absolute',
top: 0,
left: 0,
opacity: 0,
width: img.width * magnify,
height: img.height * magnify,
border: 'none',
maxWidth: 'none',
maxHeight: 'none'
})
.appendTo(target);

return {
init: function() {
Expand Down Expand Up @@ -90,7 +90,7 @@
//source will provide zoom location info (thumbnail)
source = this,
$source = $(source),
img = document.createElement('img'),
img = $source.find('.zoomImg')[0] || document.createElement('img'),
$img = $(img),
mousemove = 'mousemove.zoom',
clicked = false,
Expand Down
8 changes: 1 addition & 7 deletions jquery.zoom.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 24 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"name": "zoom",
"version": "0.0.0",
"description": "A small jQuery plugin for zooming images on mouseover or mousedown. See the [project page](http://jacklmoore.com/zoom/) for documentation and a demonstration. Released under the [MIT license](http://www.opensource.org/licenses/mit-license.php).",
"main": "jquery.zoom.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/stewartknapman/zoom.git"
},
"author": "",
"license": "BSD-2-Clause",
"bugs": {
"url": "https://github.com/stewartknapman/zoom/issues"
},
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.7.2",
"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-uglify": "~0.3.2"
}
}