html自动变换图片,jQuery实现的全屏背景图片动态自动切换效果_脚本之家

jbgallery 2.0 BETA

jbgallery is a UI widget webpage written in javascript on top of the jQuery library.

Its function is to show a single big image, multiple images, multiple galleries, slideshows, as a site's background, in a "dialog" mode or as a common pop-up.

jbgallery has two basic menus: the first one has music player buttons while the other one links directly to single images.

I added a "complex" menu on the 2.0 version, which in inspired by the flickr slider-equipped slideshow that allows to scroll the thumbnail previews.

jbgallery provides a pubblic API to remote control the component, so it would be easier to bind also with a more complex menu.

Examples:

Installation

Download and extract

Download single files :

Extra files :

jbpicasa.js : source - test adapter that you can use building an html structure, getting data from an external rss feed.

js and css (include in head tag)

rel="stylesheet" media="javascript-screen" />

HTML structure (minimal menu)

HTML structure (thumbnails - menu with slider)

HTML structure (caption)

JS

jQuery(document).ready(function(){

jQuery(".jbgallery").jbgallery();

});

OPTIONS & DEFAULTS

Write options HERE :

jQuery(".jbgallery").jbgallery({HERE});

DEFAULTS

{

style : "centered",//centered, zoom, original

menu : 'slider', //false, numbers, simple, slider

shortcuts : [37,39],

slideshow : false,

fade : true,

popup : false,

caption : true, //NEW 2.0

autohide : false, //NEW 2.0

clickable : false, //NEW 2.0

current : 1, //NEW 2.0

webkit : (navigator.userAgent.toLowerCase().search(/webkit/) != -1),

ie6 : (/MSIE 6/i.test(navigator.userAgent)),

ie7 : (/MSIE 7/i.test(navigator.userAgent)),

labels : {

play : "play",

next : "next",

prev : "prev",

stop : "stop",

close: "close",

info : "info"

},

timers : {

fade : 400,

interval : 7000,

autohide : 7000

},

delays : {

mousemove : 200,

resize : 500,

mouseover : 800

},

close : function(){},

before : function(){},

after : function(ev){},

load : function(ev){},

ready : function(){}

}

OPTIONS

style : string ('zoom'/'centered'/'original')

slideshow : boolean (true/false)

menu : string/boolean ('slider'/'simple'/'numbers'/false)

caption : boolean (show info button in menu - NEW)

autohide: boolean (autohide interface - NEW)

clickable: boolean (NEW)

current: number (set the initial photo NEW)

fade : boolean (false/true)

shortcuts : array (keycodes for trigger events left/right via keyboard)

before: function (callback)

load : function(ev) (callback - native image load event)

after : function (callback)

ready : function (callback - interface ready)

popup : boolean (show close button)

close : function(ev) (callback after click close button. i.e. window.close())

labels: object - default:

{

play : "play",

next : "next",

prev : "prev",

stop : "stop",

close: "close",

info : "info"

}

timers: object - default:

{

fade : 400, //fadeIn-Out timer

interval : 7000, //slideshow timer

autohide : 7000 //autohide timer

}

delays: object - default:

{

mousemove : 200,

resize : 500,

mouseover : 800

}

API (developers/designers)

jQuery("#jbgallery").jbgallery(); // build object FIRST

jQuery("#jbgallery").jbgallery("go" , 2); // go to photo 2 if exist

jQuery("#jbgallery").jbgallery("left"); // prev photo

jQuery("#jbgallery").jbgallery("right"); // next photo

jQuery("#jbgallery").jbgallery("play"); // autoplay start

jQuery("#jbgallery").jbgallery("stop"); // autoplay stop

jQuery("#jbgallery").jbgallery("destroy"); // destroy object, events, expando

jQuery("#jbgallery").jbgallery("current"); // return number of current photo

CONTENTS/FURTHER ELEMENTS

To add to the image further contents or other kind of elements you can use the following div. Otherwise you can add other divs copying the styles below.

#docs{width:500px;right:200px;top:15%;position:absolute;z-index:1000;}

#docs .wrapper{padding:10px;margin:10px;background:#fff;}

BROWSERS TESTED

Firefox 3.5 (winxp/linux)

Safari 3.2, 4, 5 (winxp)

Chrome/Chromium (winxp/linux)

Opera 9/10 (winxp/linux)

Internet Explorer 6/7/8 (winxp)

DESIGN/GRAPHIC

This component is published with a minimalist graphic layout.

You are free to customize css and to ask me any change to add classes to the simple menus edited by me.

If you use API or design more complex menus, or if you write plugins populating html lists via ajax by flickr

or similar services, please share with me for the next version of this plugin.

CREDITS

This work is inspired by http://www.ringvemedia.com/ and Chicca

The slider is inspired by http://www.flickr.com/search/show/

Depends on jQuery (1.3.2/1.4.2) by John Resig.

Thanks to Simone Parato, Aaron Hutten, Alain Bourgeoa, Steffen Wenzel

COMMENTS & CONTACTS

Post a comment in my blog.

http://maxb.net/blog/

LICENSE

Copyright (c) 2010 Massimiliano Balestrieri

Licensed GPL licenses:

http://www.gnu.org/licenses/gpl.html