 |
|
ในไฟล์ easySlider1.7.js มันไม่มีฟั่งชั้น orientation นะครับ คือผมจะเอาฟังชั่น orientation ที่มีอยู่ในไฟล์easySlider.js มาใส่ให้ครับ easySlider1.7.js ซึ่งยังไม่มีฟั่งชั้น orientation อยู่ ใครพอจะทำได้บ้างครับผมลองทำแล้วไม่ได้สักที
โค้ดทั้งสองครับ
อันนี้มีแบบ numeric
easySlider1.7.js **************************************************************************************************************************************
/*
* Easy Slider 1.7 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
*
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
*/
/*
* markup example for $("#slider").easySlider();
*
* <div id="slider">
* <ul>
* <li><img src="images/01.jpg" alt="" /></li>
* <li><img src="images/02.jpg" alt="" /></li>
* <li><img src="images/03.jpg" alt="" /></li>
* <li><img src="images/04.jpg" alt="" /></li>
* <li><img src="images/05.jpg" alt="" /></li>
* </ul>
* </div>
*
*/
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: false,
numeric: false,
numericId: 'controls'
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var s = $("li", obj).length;
var w = $("li", obj).width();
var h = $("li", obj).height();
var clickable = true;
obj.width(w);
obj.height(h);
obj.css("overflow","hidden");
var ts = s-1;
var t = 0;
$("ul", obj).css('width',s*w);
if(options.continuous){
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
$("ul", obj).css('width',(s+1)*w);
};
if(!options.vertical) $("li", obj).css('float','left');
if(options.controlsShow){
var html = options.controlsBefore;
if(options.numeric){
html += '<ol id="'+ options.numericId +'"></ol>';
} else {
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
};
html += options.controlsAfter;
$(obj).after(html);
};
if(options.numeric){
for(var i=0;i<s;i++){
$(document.createElement("li"))
.attr('id',options.numericId + (i+1))
.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
.appendTo($("#"+ options.numericId))
.click(function(){
animate($("a",$(this)).attr('rel'),true);
});
};
} else {
$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});
};
function setCurrent(i){
i = parseInt(i)+1;
$("li", "#" + options.numericId).removeClass("current");
$("li#" + options.numericId + i).addClass("current");
};
function adjust(){
if(t>ts) t=0;
if(t<0) t=ts;
if(!options.vertical) {
$("ul",obj).css("margin-left",(t*w*-1));
} else {
$("ul",obj).css("margin-left",(t*h*-1));
}
clickable = true;
if(options.numeric) setCurrent(t);
};
function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};
var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
{ queue:false, duration:speed, complete:adjust }
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
{ queue:false, duration:speed, complete:adjust }
);
};
if(!options.continuous && options.controlsFade){
if(t==ts){
$("a","#"+options.nextId).hide();
$("a","#"+options.lastId).hide();
} else {
$("a","#"+options.nextId).show();
$("a","#"+options.lastId).show();
};
if(t==0){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
} else {
$("a","#"+options.prevId).show();
$("a","#"+options.firstId).show();
};
};
if(clicked) clearTimeout(timeout);
if(options.auto && dir=="next" && !clicked){;
timeout = setTimeout(function(){
animate("next",false);
},diff*options.speed+options.pause);
};
};
};
// init
var timeout;
if(options.auto){;
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
};
if(options.numeric) setCurrent(0);
if(!options.continuous && options.controlsFade){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
};
});
};
})(jQuery);
อันนี้จะมี fade
easySlider.js ************************************************************************************************************************************
/*
* Enhanced Easy Slider
*
* Built off of the Easy Slider - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
*
* enhancements by Joseph Pecoraro
* email: [email protected]
* http://blog.bogojoker.com
*
* The Easy Slider Copyrights:
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
*/
/*
* Quick Documentation of New Features
*
* * Non-Autogenerated Pagination - set the autogeneratePagination
* option to false in the easySlide options and be sure to provide
* id's in the prevId and nextId options. Those provided ids will
* unobtrusively get the easySlide actions applied to them.
*
* * Looping - just set the loop option to true in the easySlide
* options and you will be able to navigate forward/backward around
* the ends smoothly.
*
* * Autoplay - just set the autoplayDuration to a non-zero value
* in the easySlide options and the content will slide on its own.
* The value you provide will only be the value between animations,
* so you don't have to compensate for the speed of transitions,
* that is handled automatically. Autoplaying works fine with
* looping.
*
* If you have pagination buttons, when the user clicks a button
* the autoplay will suspend for a little while. The restartDuration
* value specifies the amount of time since the last user
* interruption to wait before restarting the autoplay.
*
* * Hovering - just set hover to true and pagination will trigger
* when hovering instead of clicking. The slides will continue to
* transition as long as you hover over the pagination element.
* Hovering works fine with looping.
*
* If you want a pause between slides you can set the hoverPause
* value to an integer greater than 0. That specifies the time
* to wait between transitions.
*
* * Linear or Swing easing - jQuery offers two different styles
* of animations. Just set the easing option to 'linear' or
* 'swing' (default)and it will use that easing style.
*
* * Pauseable - Pause autoplay by hovering over an image. Likewise
* you can extend this to pause when hovering the buttons as well.
*
* * Fade Orientation - Not Vertical or Horizontal Slideing, but Fading!
* Just provide orientation: 'fade' for fading to happen.
*
* * Callbacks - You are allowed to provide your own functions for
* events triggered by the slider. You can provide a function
* for 'beforeTransition' and 'afterTransition'. Their signature
* is as follows:
*
* function callback( slideNumber, jQuery_li, jQuery_ul )
* ^ ^ ^
* | | |
* int of the slide number ----- | |
* jQuery wrapper for the now showing <li> -- |
* jQuery wrapper for the entire <ul> of all slides ---
*
* For example, to get the explicit DOM <li> Node you could do
*
* function after(num, $li, $ul) {
* dom_li = $li[0];
* console.log(dom_li);
* }
*
*/
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn', // id of the element to apply prev rules to
nextId: 'nextBtn', // id of the element to apply next rules to
prevText: 'Previous', // text for autogenerated prev link
nextText: 'Next', // text for autogenerated next link
autogeneratePagination: false, // will automatically generate pagination links
orientation: '', // 'vertical', 'fade', or anything else will assume horizontal
speed: 800, // duration of a transition
autoplayDuration: 0, // auto-play if non-zero, this is the time between transitions
restartDuration: 2500, // time to restart autoplay after a user interupts and autoplay
loop: false, // loop around the content
hoverPause: 0, // when hovering, the time between transitions
hover: false, // on hover instead of onclick
easing: null, // jQuery animation settings 'linear' or 'swing' (default)
pauseable: false, // pause autoplay when hovering the image
pauseButtons: false, // hovering over the cuttons will pause as well
beforeTransition: null, // callback before transitioning
afterTransition: null // callback after transitioning
};
var options = $.extend(defaults, options);
return this.each(function() {
// Setup Measurements and Options
var obj = $(this),
totalSlides = $("li", obj).length,
slideWidth = obj.width(),
slideHeight = obj.height(),
lastSlide = totalSlides-1,
current = 0;
// States
var vertical = (options.orientation == 'vertical'),
fade = (options.orientation == 'fade'),
horizontal = (!vertical && !fade),
autogen = options.autogeneratePagination,
pauseable = options.pauseable,
loop = options.loop,
speed = options.speed,
easing = options.easing,
hover = options.hover,
hoverPause = options.hoverPause,
buttonsPause = options.pauseButtons,
restartDuration = options.restartDuration,
autoplayDuration = Math.max(options.autoplayDuration,25)+speed,
autoplay = (options.autoplayDuration > 0),
beforeTransition = options.beforeTransition,
afterTransition = options.afterTransition;
interval = null,
restart = null;
// Autogenerate Pagination
if (autogen) {
$(obj).after( '<span id="'+options.prevId+'"><a href=\"javascript:void(0);\">'+options.prevText+'</a></span> '+
'<span id="'+options.nextId+'"><a href=\"javascript:void(0);\">'+options.nextText+'</a></span>');
}
// Important Elements
var $ul = $("ul", obj),
$next = $("#"+options.nextId),
$prev = $("#"+options.prevId);
// Loop - Duplicate the First Slide onto the end
if (loop) {
$ul.append( $("li:first", obj).clone() );
totalSlides += 1;
lastSlide += 1;
}
// Horizontal - Make them float left and set the width of the ul (for all slides)
if (horizontal) {
$("li", obj).css('float','left');
$ul.css('width', totalSlides * slideWidth);
}
// Fade - Hide all but the first slide so they can fadeIn from nothing
if (fade) {
$ul.find("li:not(:first)").hide();
}
// Reusable Closure to pause the autoplay timer
var pauseFunc = function() {
clearInterval(interval);
clearTimeout(restart);
}
// Reusable Closure to restart the autoplay timers using the restartDuration
var restartFunc = function() {
restart = setTimeout(function() {
interval = setInterval(auto, autoplayDuration);
}, restartDuration);
};
// Pauseable (should be autoplay only, but would have no effect otherwise)
// On Hover: cancel the autoplay timers
// On Leave: restart the autoplay timers
if ( pauseable && autoplay ) {
$(obj).hover(pauseFunc, restartFunc);
if ( buttonsPause ) {
$next.hover(pauseFunc, restartFunc);
$prev.hover(pauseFunc, restartFunc);
}
}
// Add Actions to Next and Prev Buttons
// If Not Hover Mode made it click(), if it is Hover Mode, make it hover()
// When in autoplay mode make next/prev reset the autoplay timers
if ( !hover ) {
$next.click(function(){
if (autoplay) {
pauseFunc();
if ( !buttonsPause ) {
restartFunc();
}
};
animate("next");
});
$prev.click(function(){
if (autoplay) {
pauseFunc();
if ( !buttonsPause ) {
restartFunc();
}
};
animate("prev");
});
} else {
var hoverNext = false,
hoverPrev = false,
isAnimating = false;
$next.hover(
function() {
var tfunc = arguments.callee;
hoverNext = true;
if ( !isAnimating ) {
isAnimating = true;
animate("next", function() {
isAnimating = false;
if ( hoverNext ) { tfunc(); }
});
}
},
function() {
hoverNext = false;
}
);
$prev.hover(
function() {
var tfunc = arguments.callee;
hoverPrev = true;
if ( !isAnimating ) {
isAnimating = true;
animate("prev", function() {
isAnimating = false;
if ( hoverPrev ) { tfunc(); }
});
}
},
function() {
hoverPrev = false;
}
);
}
//
// Enclosed Slide Animation
//
// This handles all of the sliding/faiding animation
// @param dir the direction "next" or "prev"
// @param cb the callback function
//
function animate(dir, cb) {
// Before Transition, Guarantee
if ( beforeTransition ) {
beforeTransition( current, $ul.find('li:eq('+current+')'), $ul );
}
// After Transition, Guarantee
// Setup the next have
// NOTE: That current will be the new value when this is called
// due to it being a closure!
var newcb = function() {
if ( cb != null ) {
( hoverPause == 0 ) ? cb() : setTimeout(cb, hoverPause);
}
if ( afterTransition ) {
afterTransition( current, $ul.find('li:eq('+current+')'), $ul );
}
}
// cur, nex, and update "current"
// cur is the old current slide, the slide we are currently on
// nex is the new current slide, the slide we are transitioning too
// current is a global value that gets updated right here
var cur = current;
if ( loop ) {
if ( dir == 'next' ) {
current = (current==lastSlide) ? 1 : current+1;
} else {
current = (current==0) ? lastSlide-1 : current-1;
}
} else {
if (dir == "next") {
current = (current>=lastSlide) ? lastSlide : current+1;
} else {
current = (current<=0) ? 0 : current-1;
}
}
var nex = current;
// Special Case for looping
// If at the end and going forward, instantaneous jump to the first slide
// If at the start and going backward, instantaneous jump to the last slide
// NOTE: The instantaneous jump is an animate() so jQuery handles it in tune
// with the rest of the animations, and is -1 (not 0) time so its instant.
if ( loop ) {
if ( (dir == "next") && (cur == lastSlide) ) {
(vertical) ?
$ul.animate({marginTop:0}, -1) :
$ul.animate({marginLeft:0}, -1);
} else if ( (dir == "prev") && (cur == 0) ) {
(vertical) ?
$ul.animate({marginTop:(totalSlides-1)*slideHeight*-1}, -1) :
$ul.animate({marginLeft:(totalSlides-1)*slideWidth*-1}, -1);
}
}
// Dispatch jQuery Animation for the transition
// Slide horizontally, vertically, or fade
if ( horizontal ) {
$ul.animate( { marginLeft: (nex*slideWidth*-1) }, speed, easing, newcb );
} else if ( vertical ) {
$ul.animate( { marginTop: (nex*slideHeight*-1) }, speed, easing, newcb );
} else {
var curli = 'li:eq(' + cur + ')';
var nexli = 'li:eq(' + nex + ')';
$ul.find(curli).fadeOut("slow", function() {
$ul.find(nexli).fadeIn("slow", newcb);
});
}
// Correctly show the Next/Prev links
// When looping they always show, so we can ignore that
// If at the end, hide the next link
// If at the start, hide the previous link
// Any other case we can show both links
if ( !loop ) {
if ( nex <= 0 ) {
$prev.fadeOut();
} else if ( nex >= lastSlide ) {
$next.fadeOut();
} else {
$next.fadeIn();
$prev.fadeIn();
}
}
};
//
// Autoplay
//
// Note that autoplayDuration already has the transitionDuration
// added to it (to prevent doing the addition over and over).
// However that means that the first invokation would take
// autoplayDuration+transitionDuration. We remove that extra
// wait by first doing a single setTimeout with the correct
// time, followed by the correct setInterval.
//
if ( autoplay ) {
var auto = function() {
animate('next');
if ( !loop && current>=lastSlide ) {
clearInterval(interval);
}
}
restart = setTimeout(function() {
auto();
interval = setInterval(auto, autoplayDuration);
}, autoplayDuration-speed);
}
// Initially Hide both buttons
$next.hide();
$prev.hide();
// Finally, Display the Next Link if more then one slide
if (totalSlides>1) {
$next.fadeIn();
if(loop) { $prev.fadeIn(); }
}
});
};
})(jQuery);
Tag : PHP
|
ประวัติการแก้ไข
2011-02-10 15:47:10
2011-02-10 16:33:46
2011-02-10 17:25:12
2011-02-10 17:27:30
|
 |
 |
 |
 |
| Date :
2011-02-10 15:45:10 |
By :
looktevada |
View :
1287 |
Reply :
1 |
|
 |
 |
 |
 |
|
|
|
|
 |
