Giter Site home page Giter Site logo

slidescale's Introduction

SlideScale
==========

DEPENDENCIES
------------
- jquery >= 1.4.2
- jquery.ui >= 1.8.0
- jquery.slidescale.js
- jquery.slidescale.css


DESCRIPTION
-----------

Scalable gallery image viewer, has the ability to take images already on page,
a list of urls passed in, or both to construct a gallery. Uses incremental
preloading to preload images to save bandwidth.

A user can define how many pictures to be preloaded (preload_num) past the
current image. This is configurable for both main photos and for thumbnails.

Tested in IE7+, FF3.6, Chrome.

If you're using the plugin, _send me an email_! It would be great to
know if people actually use it and where.


Events
------

SlideScale triggers and listens to some events that may be useful for
developers.

.SlideScale Container Events

Container is the object passed to slidescale on construction

next::
    If triggered, slidescale moves to the next image. Event is triggered right
    before slidesscale moves to next image.

prev::
    If triggered, slidescale moves to the previous image. Event is triggered 
    right before slidesscale moves to previous image.

setCurrent::
    Called on the image list list item prior to centering image.

unsetCurrent::
    Triggered on image list item prior to removal from center.


Options
-------

.SlideScale Options

css_transitions::
    Defaults to true if available.
control_fade_speed::
    Control fade speed, passed directly to animate, falsey for no fading. Only used if css transitions are not enabled.
thumb_height::
    height of thumbnail area
opacity::
    opacity for hovered buttons and inactive thumbnail opacity and photo opacity
load_num::
    num images left before preload is triggered
preload_num::
    number of photos to preload
load_thumb_num::
    number of thumbnails to preload
photo_dir::
    default photo directory
thumb_dir::
    default thumbnail directory
images::
    Array of ScImage option objects for creating images

.ScImage Options

name::
    image name to use for finding image in thumbdir and photodir
thumb_dir::
    the directory to look up name in for thumbnail
photo_dir::
    the directory to look up name in for photo
photo_path::
    overrides photodir finding with full path for photo
thumb_path::
    overrides photodir finding with full path for image
caption_link::
    link for the caption to go to when clicked
photo_link::
    link for when the photo is clicked
thumb_load_cb::
    function to call when thumbnail has loaded
image_load_cb::
    function to call when image has loaded

CSS
---

.Classes

ss-trans-bg::
    Transparency for caption backgrounds can be adjusted through overriding 
    this class

Examples
--------

    $('#gallery').slidescale({
        images: [
            {name: "sea-turtle.jpg",
                text: "Watch, the mighty Sea Turtle!"},
            {name: "yellow-fish.jpg",
                text: "Fish may want to be yellow too"}
        ]
    });

    $('#gallery').slidescale({
        images: [
            { photo_path: "http://imagepath.com/sea-turtle.jpg",
              thumb_path: "http://imagepath.com/thumb/sea-turtle.jpg",
              text: "Watch, the mighty Sea Turtle!"}
        ]
    });


License
-------

Dual licensed under the MIT or GPL Version 2 licenses.

Author
------
Ziling Zhao <[email protected]>

// vim: tw=78 :

slidescale's People

Contributors

zhaoz avatar apinstein avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.