阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.fullsizable 中文API文档

      插件 jQuery.fullsizable 中文API文档 https://github.com/MSchmidt/jquery-fullsizable

      jQuery fullsizable plugin

      jQuery plugin to make use of the full available browser space for enjoyable image viewing. Also supports the native HTML5 fullscreen API in modern browsers.

      jQuery Plugin page: http://plugins.jquery.com/fullsizable/

      Demo

      Look at the demo section on http://mschmidt.github.io/jquery-fullsizable to see jquery-fullsizable in action.

      Installation

      You can install jquery-fullsizable by using Bower.

      bower install jquery-fullsizable
      

      Example Usage

      Use with default settings:

      $('a.fullsizable').fullsizable();
      // while a.fullsizable are links to big images
      

      Example with options:

      $('a.fullsizable').fullsizable({
        detach_id: 'wrapper',
        clickBehaviour: 'next'
      });
      

      Options

      detach_id (optional, defaults to null) - id of an element that will temporarily be set to display: none after the curtain loaded. This can be used to hide scrollbars on long pages by e.g. detaching a wrapper element.

      navigation (optional, defaults to true) - show next and previous links when working with a set of images. Style links with #fullsized_go_prev and #fullsized_go_next

      closeButton (optional, defaults to true) - show a close link. Style with #fullsized_close

      fullscreenButton (optional, defaults to true) - show full screen button for native HTML5 fullscreen support in supported browsers. Style with #fullsized_fullscreen

      openOnClick (optional, defaults to true) - set to false to disable default behaviour which fullsizes an image when clicking on a thumb.

      clickBehaviour (optional, ‘next’ or ‘close’, defaults to ‘close’) - whether a click on an opened image should close the viewer or open the next image.

      preload (optional, defaults to true) - lookup selector on initialisation, set only to false in combination with reloadOnOpen: true or fullsizable:reload event.

      reloadOnOpen (optional, defaults to false) - lookup selector every time the viewer opens.

      loop (optional, defaults to false) - don’t hide prev/next button on first/last image, so images are looped

      Styling

      The packaged fullsizable.css stylesheet provides only the bare bones to make fullsizable work. Everything else (basically the look of the buttons) is up to you. The simple.html example contains a few styles to give you an idea:

      #fullsized_go_prev, #fullsized_go_next, #fullsized_close, #fullsized_fullscreen {
        position: absolute;
        top: 50%;
        display: block;
        width: 30px;
        height: 30px;
        background-color: red;
      }
      #fullsized_go_prev {
        left: 25px;
      }
      #fullsized_go_next {
        right: 25px;
      }
      #fullsized_close {
        top: 0;
        right: 0;
      }
      #fullsized_fullscreen {
        top: 0;
        right: 40px;
        background-color: green;
      }
      :fullscreen #fullsized_fullscreen { background-color: blue; }
      :-webkit-full-screen #fullsized_fullscreen { background-color: blue; }
      :-moz-full-screen #fullsized_fullscreen { background-color: blue; }
      

      Included theme

      Since v2.0 there is also an ready-to-use theme bundled as jquery-fullsizable-theme.css. Have a look at the themed_with_touch.html example.

      Advanced Usage

      Dynamic loading (e.g for pages built with a MVC framework)

      By default, fullsizable checks the selector fullsizable() was called on in the beginning and stores the found images internally. In case some images get added, remove or reordered on the page, fullsizable won’t know about the change and may behave unexpected.

      For this situation fullsizable includes the reloadOnOpen option. With this options set to true the selector will be run every time a user enters the fullsized view. Since this is true for the first opened image as well you should disable the preload option too to save the browser from doing the same work twice:

      $('#gallery a').fullsizable({
        preload: false,
        reloadOnOpen: true
      });
      

      Adding touch events

      Because of the variety of mobile and touch devices and their quirks, fullsizable doesn’t add it’s own touch events. It would add too much code to the otherwise small library. Also if you are planning to make your page touch-ready, you’ve most likely included a touch-framework like Hammer.js already.

      Use such a touch-framework in combination with the provided fullsizable triggers and event.

      Here is an example for adding swipe events with TouchSwipe: (from themed_with_touch.html example)

      $('a').fullsizable({
        detach_id: 'container'
      });
      
      $(document).on('fullsizable:opened', function(){
        $("#jquery-fullsizable").swipe({
          swipeLeft: function(){
            $(document).trigger('fullsizable:next')
          },
          swipeRight: function(){
            $(document).trigger('fullsizable:prev')
          },
          swipeUp: function(){
            $(document).trigger('fullsizable:close')
          }
        });
      });
      

      Custom triggers and events

      When using fullsizable in combination with a javascript MVC or any other advanced framework you may want to customize the whole flow of loading images, opening the viewer, etc.

      Therefor the following triggers and events are available:

      Events: fullsizable:opened

      Triggers: fullsizable:open, fullsizable:close, fullsizable:next, fullsizable:prev, fullsizable:reload

      Changelog

      • 2.1.0 - 25.06.2015

        • allow custom function for clickBehaviour option (thanks to MatoTominac)
        • add loop option (thanks to pohlaniacz)
        • add bower support
      • 2.0.2 - 03.09.2014

        • fullsizable:opened returns selector of element which triggered the viewer
      • 2.0.1 - 15.07.2014

        • hiding UI elements works more reliably now
      • 2.0 - 13.07.2014

        • add events and triggers for more advanced usage (e.g. adding touch events)
        • hide UI elements while navigating with keyboard or other events
        • better defaults for most common use case of having a gallery with multiple images
        • clean up DOM after the viewer is closed
        • remove dynamic mode and add options to achieve the same
        • fix distortion issue in IE11 (#3)
      • 1.6 - 26.02.2013

        • open sourced under MIT, no technical changes
      • 1.5 - 12.04.2012

        • add allowFullscreen option (native HTML5 fullscreen support)
      • 1.4 - 10.04.2012

        • add closeButton option
        • add clickBehaviour option
        • bugfix: remember scroll position when using detach option
      • 1.3 - 25.08.2011

        • add openOnClick option to enable/disable default behavior
        • add dynamic mode for advanced usage scenarios
        • bugfix: closing curtain too early left blank page
        • bugfix: spinner appeared too late
        • bugfix: first image appeared uncropped sometimes
      • 1.2 - 11.08.2011

        • add navigation option to enable next and previous links
      • 1.1 - 29.05.2011

        • first stable version
        • keyboard support
        • intelligent preloading

      Contributing

      This plugin is written in CoffeeScript and then “compiled” into JavaScript. Please try to make changes to the jquery-fullsizable.coffee file directly and compile with coffee -c js/jquery-fullsizable.coffee.

      (c) 2011-2015 Matthias Schmidt http://m-schmidt.eu/ & http://pixelflush.com/

      目录
      目录