Skip to content

Instantly share code, notes, and snippets.

@tantaman

tantaman/example_usage.markdown

Forked from lwe/example_usage.markdown
Created May 22, 2012 20:27
Download ZIP

Revisions

  1. tantaman revised this gist May 22, 2012. 1 changed file with 7 additions and 6 deletions.
    13 changes: 7 additions & 6 deletions jquery.slideview.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,10 +8,10 @@

    function init(element, slides, settings) {
    if ($.isFunction(slides)) slides = slides(element);
    size = settings.size || 75;
    var 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' })
    var $viewport = $(element).css({ overflow: 'hidden', width: size + 'px', height: size + 'px', position: 'relative' }).addClass('slideview-viewport').empty();
    var $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++) {
    @@ -21,9 +21,10 @@
    }

    $viewport.bind('mousemove.slideview', function(evt) {
    x = evt.pageX - this.offsetLeft;
    offset = Math.floor(x / (size / slides.length)) * size;
    $(this).animate({ scrollLeft: offset }, 10);
    var $this = $(this);
    var x = evt.pageX - $this.offset().left;
    var offset = Math.floor(x / (size / slides.length)) * size;
    $this.animate({ scrollLeft: offset }, 10);
    return false;
    });
    }
  2. @lwe lwe revised this gist May 26, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion jquery.slideview.js
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@
    if ($.isFunction(slides)) slides = slides(element);
    size = settings.size || 75;

    $viewport = $(element).css({ overflow: 'hidden', width: size + 'px', height: size + 'px' }).addClass('slideview-viewport').empty();
    $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);

  3. @lwe lwe revised this gist Sep 18, 2009. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion example_usage.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    in action: [](http://www.vimeo.com/6639381)
    in action: [http://www.vimeo.com/6639381](http://www.vimeo.com/6639381)

    javascript:

  4. @lwe lwe revised this gist Sep 18, 2009. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion example_usage.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    in action: http://www.vimeo.com/6639381
    in action: [](http://www.vimeo.com/6639381)

    javascript:

  5. @lwe lwe revised this gist Sep 18, 2009. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions example_usage.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    in action: http://www.vimeo.com/6639381

    javascript:

    var pp = "/images/test/images_";
  6. @lwe lwe created this gist Sep 18, 2009.
    12 changes: 12 additions & 0 deletions example_usage.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    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>
    31 changes: 31 additions & 0 deletions jquery.slideview.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,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' }).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);