Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

iPhoto-like preview batches (Video in action: http://www.vimeo.com/6639381)

View example_usage.markdown

in action: http://www.vimeo.com/6639381

javascript:

var pp = "/images/test/images_";
var images_p1 = [ pp + '1.jpg', pp + '2.jpg', pp + '3.jpg', pp + '4.jpg', pp + '5.jpg' ];
var images_p2 = [ pp + '6.jpg', pp + '7.jpg', pp + '8.jpg', pp + '9.jpg', pp + '10.jpg' ];

$('.preview').slideview(function(e) { return e.id == "p1" ? images_p1 : images_p2; }, { size: 75 });

html:

<div id="p1" class="preview"></div>
<div id="p2" class="preview"></div>
View example_usage.markdown
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
(function($) {
$.fn.slideview = function(slides, settings) {
return this.each(function() {
init(this, slides, settings);
});
}
function init(element, slides, settings) {
if ($.isFunction(slides)) slides = slides(element);
size = settings.size || 75;
$viewport = $(element).css({ overflow: 'hidden', width: size + 'px', height: size + 'px', position: 'relative' }).addClass('slideview-viewport').empty();
$container = $('<div></div>').css({ overflow: 'hidden', margin: 0, padding: 0, border: 0, height: size + 'px', width: (size*slides.length) + 'px' })
.addClass('slideview-container').appendTo($viewport);
for (i = 0; i < slides.length; i++) {
$('<div><img src="' + slides[i] + '" alt=""/></div>')
.css({ margin: 0, padding: 0, width: size + 'px', height: size + 'px', overflow: 'hidden', 'float': 'left', border: 0 })
.addClass('slideview-slide').appendTo($container);
}
$viewport.bind('mousemove.slideview', function(evt) {
x = evt.pageX - this.offsetLeft;
offset = Math.floor(x / (size / slides.length)) * size;
$(this).animate({ scrollLeft: offset }, 10);
return false;
});
}
})(jQuery);
dora-gt commented

Unfortunately it doesn't work on IE7...

Owner
lwe commented

To be honest... it could also be an incompatibility with the latest jQuery. Any chance you might come up with a fix?

dora-gt commented

Yes, I've just come up with a solution.
Could you change the line 13 to the following?
I remedied my local source and it worked well on IE7 with jQuery 1.6.1.

$viewport = $(element).css({ overflow: 'hidden', width: size + 'px', height: size + 'px', position: "relative" }).addClass('slideview-viewport').empty();

Owner
lwe commented

added, thx.

dora-gt commented

Thank you and sorry not to notice using " instead of '.

Owner
lwe commented

no worries there ;) thanks for the fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.