Skip to content

@lwe /example_usage.markdown
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
iPhoto-like preview batches (Video in action: http://www.vimeo.com/6639381)

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>
(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

Unfortunately it doesn't work on IE7...

@lwe
Owner

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

@dora-gt

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();

@lwe
Owner

added, thx.

@dora-gt

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

@lwe
Owner

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.