Develop Reference

Adding a SetInterval function in jquery

So I have this code from here: j360
This code is perfect for what I want: an html wich has a draggable 360º product image view, but it lacks one thing: a button for auto rotation.
I already have the button into the html, but I can't, for more that I try, to make a function or anything to make the images go by itself, and not only when I drag it over the screen.
Here is the code I have in the moment.
(function($){
$.fn.j360 = function(options) {
var defaults = {
clicked: false,
currImg: 1
}
var options = jQuery.extend(defaults, options);
return this.each(function() {
var $obj = jQuery(this);
var aImages = {};
$obj.css({
'margin-left' : 'auto',
'margin-right' : 'auto',
'text-align' : 'center',
'overflow' : 'hide'
});
$overlay = $obj.clone(true);
$overlay.html('<img src="images/loader.gif" class="loader" style="margin-top:' + ($obj.height()/2 - 15) + 'px" />');
$overlay.attr('id', 'view_overlay');
$overlay.css({
'position' : 'absolute',
'z-index': '5',
'top' : $obj.offset().top,
'left' : $obj.offset().left,
'background' : '#fff'
});
$obj.after($overlay);
$obj.after('<div id="colors_ctrls"></div>');
jQuery('#colors_ctrls').css({
'width' : $obj.width(),
'position' : 'absolute',
'z-index': '5',
'top' : $obj.offset().top + $obj.height - 50,
'left' : $obj.offset().left
});
var imageTotal = 0;
jQuery('img', $obj).each(function() {
aImages[++imageTotal] = jQuery(this).attr('src');
preload(jQuery(this).attr('src'));
})
var imageCount = 0;
jQuery('.preload_img').load(function() {
if (++imageCount == imageTotal) {
$overlay.animate({
'filter' : 'alpha(Opacity=0)',
'opacity' : 0
}, 100);
$obj.html('<img src="' + aImages[1] + '" />');
$overlay.bind('mousedown touchstart', function(e) {
if (e.type == "touchstart") {
options.currPos = window.event.touches[0].pageX;
} else {
options.currPos = e.pageX;
}
options.clicked = true;
return false;
});
jQuery(document).bind('mouseup touchend', function() {
options.clicked = false;
});
jQuery(document).bind('mousemove touchmove', function(e) {
if (options.clicked) {
var pageX;
if (e.type == "touchmove") {
pageX = window.event.targetTouches[0].pageX;
} else {
pageX = e.pageX;
}
var width_step = 50;
if (Math.abs(options.currPos - pageX) >= width_step) {
if (options.currPos - pageX >= width_step) {
options.currImg++;
if (options.currImg > imageTotal) {
options.currImg = 1;
}
} else {
options.currImg--;
if (options.currImg < 1) {
options.currImg = imageTotal;
}
}
options.currPos = pageX;
$obj.html('<img src="' + aImages[options.currImg] + '" />');
}
}
});
}
});
if (jQuery.browser.msie || jQuery.browser.mozilla || jQuery.browser.opera || jQuery.browser.safari ) {
jQuery(window).resize(function() {
onresizeFunc($obj, $overlay);
});
} else {
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
onresizeFunc($obj, $overlay);
}, false);
}
onresizeFunc($obj, $overlay)
});
}
})
(jQuery)
function onresizeFunc($obj, $overlay){
$obj.css({
'margin-top' : $(document).height()/2
});
$overlay.css({
'margin-top' : 200,
'top' : $obj.offset().top,
'left' : $obj.offset().left
});
jQuery('#colors_ctrls').css({
'top' : $obj.offset().top + $obj.height - 50,
'left' : $obj.offset().left
})
}
function preload(image) {
if (typeof document.body == "undefined") return;
try {
var div = document.createElement("div");
var s = div.style;
s.position = "absolute";
s.top = s.left = 0;
s.visibility = "hidden";
document.body.appendChild(div);
div.innerHTML = "<img class=\"preload_img\" src=\"" + image + "\" />";
}
catch(e) {
// Error. Do nothing.
}
};
I need a method to increment over time a function, to make the ilusion of auto-rotate.

This plugin doesn’t seem to have this option (a kind of autoplay) so you have to code it or search an other plugin.
Since it is a list of image, you can maybe don’t use the plugin and display images one after another with jQuery and .delay()

Joomla Hot Themes Carousel Blank Space

I have installed the HotThemes Carousel module in joomla and this is working fine so far. (unfortunately on localhost so can't share link)
The problem I am trying to fix is that for some reason when I click the next button it brings the next 4 images (like its set to move by 4 images or something) and as I only have 6 images in total, it shows up with blank spaces after the last 2 images.
What I would like is if the next button is pressed then this should bring the next image (so 1 at a time) and then just stop on the last image and then the prev button could be used to go the other way.
How can I do this?
/* jQuery Carousel 0.9.1
Copyright 2008-2009 Thomas Lanciaux and Pierre Bertet.
This software is licensed under the CC-GNU LGPL
<http://creativecommons.org/licenses/LGPL/2.1/>
*/
;(function(jQuery){
jQuery.fn.carousel = function(params){
var params = jQuery.extend({
direction: "horizontal",
loop: false,
dispItems: 5,
pagination: false,
paginationPosition: "inside",
nextBtn: '<span>Next</span>',
prevBtn: '<span>Previous</span>',
btnsPosition: "inside",
nextBtnInsert: "appendTo",
prevBtnInsert: "prependTo",
nextBtnInsertFn: false,
prevBtnInsertFn: false,
autoSlide: false,
autoSlideInterval: 3000,
delayAutoSlide: false,
combinedClasses: false,
effect: "slide",
slideEasing: "swing",
animSpeed: "normal",
equalWidths: "true",
callback: function(){},
useAddress: false,
adressIdentifier: "carousel"
}, params);
// Buttons position
if (params.btnsPosition == "inside"){
params.prevBtnInsert = "insertBefore";
params.nextBtnInsert = "insertAfter";
}
// Slide delay
params.delayAutoSlide = params.delayAutoSlide || params.autoSlideInterval;
return this.each(function(){
// Env object
var env = {
$elts: {},
params: params,
launchOnLoad: []
};
// Carousel main container
env.$elts.carousel = jQuery(this).addClass("js");
// Carousel content
env.$elts.content = jQuery(this).children().css({position: "absolute", "top": 0});
// Content wrapper
env.$elts.wrap = env.$elts.content.wrap('<div class="carousel-wrap"></div>').parent().css({overflow: "hidden", position: "relative"});
// env.steps object
env.steps = {
first: 0, // First step
count: env.$elts.content.children().length // Items count
};
// Last visible step
env.steps.last = env.steps.count - 1;
// Prev Button
if (jQuery.isFunction(env.params.prevBtnInsertFn)) {
env.$elts.prevBtn = env.params.prevBtnInsertFn(env.$elts);
} else {
env.$elts.prevBtn = jQuery(params.prevBtn)[params.prevBtnInsert](env.$elts.carousel);
}
// Next Button
if (jQuery.isFunction(env.params.nextBtnInsertFn)) {
env.$elts.nextBtn = env.params.nextBtnInsertFn(env.$elts);
} else {
env.$elts.nextBtn = jQuery(params.nextBtn)[params.nextBtnInsert](env.$elts.carousel);
}
// Add buttons classes / data
env.$elts.nextBtn.addClass("carousel-control next carousel-next");
env.$elts.prevBtn.addClass("carousel-control previous carousel-previous");
// Bind events on next / prev buttons
initButtonsEvents(env);
// Pagination
if (env.params.pagination) {
initPagination(env);
}
// Address plugin
initAddress(env);
// On document load...
jQuery(function(){
// First item
var $firstItem = env.$elts.content.children(":first");
// Width 1/3 : Get default item width
env.itemWidth = $firstItem.outerWidth();
// Width 2/3 : Define content width
if (params.direction == "vertical"){
env.contentWidth = env.itemWidth;
} else {
if (params.equalWidths) {
env.contentWidth = env.itemWidth * env.steps.count;
} else {
env.contentWidth = (function(){
var totalWidth = 0;
env.$elts.content.children().each(function(){
totalWidth += jQuery(this).outerWidth();
});
return totalWidth;
})();
}
}
// Width 3/3 : Set content width to container
env.$elts.content.width( env.contentWidth );
// Height 1/2 : Get default item height
env.itemHeight = $firstItem.outerHeight();
// Height 2/2 : Set content height to container
if (params.direction == "vertical"){
env.$elts.content.css({height:env.itemHeight * env.steps.count + "px"});
env.$elts.content.parent().css({height:env.itemHeight * env.params.dispItems + "px"});
} else {
env.$elts.content.parent().css({height:env.itemHeight + "px"});
}
// Update Next / Prev buttons state
updateButtonsState(env);
// Launch function added to "document ready" event
jQuery.each(env.launchOnLoad, function(i,fn){
fn();
});
// Launch autoslide
if (env.params.autoSlide){
window.setTimeout(function(){
env.autoSlideInterval = window.setInterval(function(){
goToStep( env, getRelativeStep(env, "next") );
}, env.params.autoSlideInterval);
}, env.params.delayAutoSlide);
}
});
});
};
// Next / Prev buttons events only
function initButtonsEvents(env){
env.$elts.nextBtn.add(env.$elts.prevBtn)
.bind("enable", function(){
var $this = jQuery(this)
.unbind("click")
.bind("click", function(){
goToStep( env, getRelativeStep(env, ($this.is(".next")? "next" : "prev" )) );
stopAutoSlide(env);
})
.removeClass("disabled");
// Combined classes (IE6 compatibility)
if (env.params.combinedClasses) {
$this.removeClass("next-disabled previous-disabled");
}
})
.bind("disable", function(){
var $this = jQuery(this).unbind("click").addClass("disabled");
// Combined classes (IE6 compatibility)
if (env.params.combinedClasses) {
if ($this.is(".next")) {
$this.addClass("next-disabled");
} else if ($this.is(".previous")) {
$this.addClass("previous-disabled");
}
}
})
.hover(function(){
jQuery(this).toggleClass("hover");
});
};
// Pagination
function initPagination(env){
env.$elts.pagination = jQuery('<div class="center-wrap"><div class="carousel-pagination"><p></p></div></div>')[((env.params.paginationPosition == "outside")? "insertAfter" : "appendTo")](env.$elts.carousel).find("p");
env.$elts.paginationBtns = jQuery([]);
env.$elts.content.find("li").each(function(i){
if (i % env.params.dispItems == 0) {
env.$elts.paginationBtns = env.$elts.paginationBtns.add( jQuery('<a role="button"><span>'+( env.$elts.paginationBtns.length + 1 )+'</span></a>').data("firstStep", i) );
}
});
env.$elts.paginationBtns.appendTo(env.$elts.pagination);
env.$elts.paginationBtns.slice(0,1).addClass("active");
// Events
env.launchOnLoad.push(function(){
env.$elts.paginationBtns.click(function(e){
goToStep( env, jQuery(this).data("firstStep") );
stopAutoSlide(env);
});
});
};
// Address plugin
function initAddress(env) {
if (env.params.useAddress && jQuery.isFunction(jQuery.fn.address)) {
jQuery.address
.init(function(e) {
var pathNames = jQuery.address.pathNames();
if (pathNames[0] === env.params.adressIdentifier && !!pathNames[1]) {
goToStep(env, pathNames[1]-1);
} else {
jQuery.address.value('/'+ env.params.adressIdentifier +'/1');
}
})
.change(function(e) {
var pathNames = jQuery.address.pathNames();
if (pathNames[0] === env.params.adressIdentifier && !!pathNames[1]) {
goToStep(env, pathNames[1]-1);
}
});
} else {
env.params.useAddress = false;
}
};
function goToStep(env, step) {
// Callback
env.params.callback(step);
// Launch animation
transition(env, step);
// Update first step
env.steps.first = step;
// Update buttons status
updateButtonsState(env);
// Update address (jQuery Address plugin)
if ( env.params.useAddress ) {
jQuery.address.value('/'+ env.params.adressIdentifier +'/' + (step + 1));
}
};
// Get next/prev step, useful for autoSlide
function getRelativeStep(env, position) {
if (position == "prev") {
if ( (env.steps.first - env.params.dispItems) >= 0 ) {
return env.steps.first - env.params.dispItems;
} else {
return ( (env.params.loop)? (env.steps.count - env.params.dispItems) : false );
}
} else if (position == "next") {
if ( (env.steps.first + env.params.dispItems) < env.steps.count ) {
return env.steps.first + env.params.dispItems;
} else {
return ( (env.params.loop)? 0 : false );
}
}
};
// Animation
function transition(env, step) {
// Effect
switch (env.params.effect){
// No effect
case "no":
if (env.params.direction == "vertical"){
env.$elts.content.css("top", -(env.itemHeight * step) + "px");
} else {
env.$elts.content.css("left", -(env.itemWidth * step) + "px");
}
break;
// Fade effect
case "fade":
if (env.params.direction == "vertical"){
env.$elts.content.hide().css("top", -(env.itemHeight * step) + "px").fadeIn(env.params.animSpeed);
} else {
env.$elts.content.hide().css("left", -(env.itemWidth * step) + "px").fadeIn(1000);
}
break;
// Slide effect
default:
if (env.params.direction == "vertical"){
env.$elts.content.stop().animate({
top : -(env.itemHeight * step) + "px"
}, env.params.animSpeed, env.params.slideEasing);
} else {
env.$elts.content.stop().animate({
left : -(env.itemWidth * step) + "px"
}, env.params.animSpeed, env.params.slideEasing);
}
break;
}
};
// Update all buttons state : disabled or not
function updateButtonsState(env){
if (getRelativeStep(env, "prev") !== false) {
env.$elts.prevBtn.trigger("enable");
} else {
env.$elts.prevBtn.trigger("disable");
}
if (getRelativeStep(env, "next") !== false) {
env.$elts.nextBtn.trigger("enable");
} else {
env.$elts.nextBtn.trigger("disable");
}
if (env.params.pagination){
env.$elts.paginationBtns.removeClass("active")
.filter(function(){ return (jQuery(this).data("firstStep") == env.steps.first) }).addClass("active");
}
};
// Stop autoslide
function stopAutoSlide(env) {
if (!!env.autoSlideInterval){
window.clearInterval(env.autoSlideInterval);
}
};
})(jQuery);

jQuery - Repositioning links when window is resized

When the screen is resized I'm putting the sub-nav links into the 'More ul' #MoreList
This works fine but when the window is re-expanded the links are staying inside the #MoreList and I'm trying to get them to go to their original positions when there is enough space available
I've tried a few things but struggling pretty bad and just wondering if anyone knows of a way I could achieve this?
https://jsfiddle.net/yvw93k1n/
function SubNav() {
'use strict';
var $elements = {
body: $('body'),
header: $('header'),
subMenu: $('#SubNav'),
subList: $('.sub-nav__list'),
subItem: $('.sub-nav__list-item'),
subTitle: $('.sub-nav__section-title'),
moreList: $('#MoreList'),
moreItem: $('#MoreItem'),
exclude: $('.js-nav-exclude'),
hashLink: $('a[href*=#]:not([href=#])')
},
$variables = {
totalWidth: 0,
navWidth: 0,
freeSpace: 0,
moreItem: null,
reqSpace: null,
currentOffset: 0,
scrollby: 0,
bodyWidth: 0
},
overflow = true,
moveItem = null,
freeSpace = 0,
firstItem = 0,
target = null;
// Move links into more list
function removeLink(){
moveItem = $elements.moreItem.prev('li');
$elements.moreItem.addClass('is-visible');
$elements.moreList.prepend(moveItem);
}
// Check current free space in sub nav
function checkSpace() {
if ($elements.subTitle.length) {
freeSpace = $elements.subTitle.outerWidth(true);
}
freeSpace = $elements.subMenu.width() - (freeSpace + $elements.subList.outerWidth(true));
firstItem = $elements.moreList.first('li').outerWidth(true);
if (freeSpace > firstItem) {
moveItem = $elements.moreList.first('li');
}
}
// Get current overflow
function getOverflow() {
if ($elements.subMenu.get(0).scrollHeight > $elements.subMenu.get(0).offsetHeight || $elements.subMenu.get(0).scrollWidth > $elements.subMenu.get(0).offsetWidth) {
removeLink();
} else {
overflow = false;
checkSpace();
}
return overflow;
}
// Check for overflow and move links
function checkWidth() {
overflow = true;
while (overflow === true) {
getOverflow();
}
}
// Smooth scrolling functionality
function smoothScroll() {
$elements.hashLink.click(function () {
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
// Get target
target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
// Disable pointer events to stop mega menu from displaying
$elements.header.css('pointer-events', 'none');
// Scroll to target
$elements.body.animate({
scrollTop: target.offset().top - 96
}, 1000);
// Reset hidden header
setTimeout(function () {
$elements.body.addClass('hide-offscreen');
}, 1000);
// Re-enable pointer events
setTimeout(function () {
$elements.header.css('pointer-events', 'all');
}, 1200);
return false;
}
}
});
}
this.init = function () {
smoothScroll();
if ($elements.subMenu.length) {
$(window).load(function () {
checkWidth();
});
$(window).resize(function () {
checkWidth();
});
}
};
}
var subNav = new SubNav();
subNav.init();

it looks like you're checking for
if (freeSpace > firstItem) {
moveItem = $elements.moreList.first('li');
}
so why not check if
if (freeSpace < firstItem) {
moveItem = yourDesiredElement
}

Hide go to top button when page is fully scrolled to the top

I have a button on my wordpress theme homepage that is used for going to the top of the page. I want to hide it when page is fully scrolled to the top. Here is my code:
(function($) {
var version = '#VERSION',
defaults = {
exclude: [],
excludeWithin:[],
offset: 0,
direction: 'top', // one of 'top' or 'left'
scrollElement: null, // jQuery set of elements you wish to scroll (for $.smoothScroll).
// if null (default), $('html, body').firstScrollable() is used.
scrollTarget: null, // only use if you want to override default behavior
beforeScroll: function() {}, // fn(opts) function to be called before scrolling occurs. "this" is the element(s) being scrolled
afterScroll: function() {}, // fn(opts) function to be called after scrolling occurs. "this" is the triggering element
easing: 'swing',
speed: 600,
autoCoefficent: 2 // coefficient for "auto" speed
},
getScrollable = function(opts) {
var scrollable = [],
scrolled = false,
dir = opts.dir && opts.dir == 'left' ? 'scrollLeft' : 'scrollTop';
this.each(function() {
if (this == document || this == window) { return; }
var el = $(this);
if ( el[dir]() > 0 ) {
scrollable.push(this);
} else {
// if scroll(Top|Left) === 0, nudge the element 1px and see if it moves
el[dir](1);
scrolled = el[dir]() > 0;
if ( scrolled ) {
scrollable.push(this);
}
// then put it back, of course
el[dir](0);
}
});
// If no scrollable elements, fall back to <body>,
// if it's in the jQuery collection
// (doing this because Safari sets scrollTop async,
// so can't set it to 1 and immediately get the value.)
if (!scrollable.length) {
this.each(function(index) {
if (this.nodeName === 'BODY') {
scrollable = [this];
}
});
}
// Use the first scrollable element if we're calling firstScrollable()
if ( opts.el === 'first' && scrollable.length > 1 ) {
scrollable = [ scrollable[0] ];
}
return scrollable;
},
isTouch = 'ontouchend' in document;
$.fn.extend({
scrollable: function(dir) {
var scrl = getScrollable.call(this, {dir: dir});
return this.pushStack(scrl);
},
firstScrollable: function(dir) {
var scrl = getScrollable.call(this, {el: 'first', dir: dir});
return this.pushStack(scrl);
},
smoothScroll: function(options) {
options = options || {};
var opts = $.extend({}, $.fn.smoothScroll.defaults, options),
locationPath = $.smoothScroll.filterPath(location.pathname);
this
.unbind('click.smoothscroll')
.bind('click.smoothscroll', function(event) {
var link = this,
$link = $(this),
exclude = opts.exclude,
excludeWithin = opts.excludeWithin,
elCounter = 0, ewlCounter = 0,
include = true,
clickOpts = {},
hostMatch = ((location.hostname === link.hostname) || !link.hostname),
pathMatch = opts.scrollTarget || ( $.smoothScroll.filterPath(link.pathname) || locationPath ) === locationPath,
thisHash = escapeSelector(link.hash);
if ( !opts.scrollTarget && (!hostMatch || !pathMatch || !thisHash) ) {
include = false;
} else {
while (include && elCounter < exclude.length) {
if ($link.is(escapeSelector(exclude[elCounter++]))) {
include = false;
}
}
while ( include && ewlCounter < excludeWithin.length ) {
if ($link.closest(excludeWithin[ewlCounter++]).length) {
include = false;
}
}
}
if ( include ) {
event.preventDefault();
$.extend( clickOpts, opts, {
scrollTarget: opts.scrollTarget || thisHash,
link: link
});
$.smoothScroll( clickOpts );
}
});
return this;
}
});
$.smoothScroll = function(options, px) {
var opts, $scroller, scrollTargetOffset, speed,
scrollerOffset = 0,
offPos = 'offset',
scrollDir = 'scrollTop',
aniProps = {},
aniOpts = {},
scrollprops = [];
if ( typeof options === 'number') {
opts = $.fn.smoothScroll.defaults;
scrollTargetOffset = options;
} else {
opts = $.extend({}, $.fn.smoothScroll.defaults, options || {});
if (opts.scrollElement) {
offPos = 'position';
if (opts.scrollElement.css('position') == 'static') {
opts.scrollElement.css('position', 'relative');
}
}
scrollTargetOffset = px ||
( $(opts.scrollTarget)[offPos]() &&
$(opts.scrollTarget)[offPos]()[opts.direction] ) ||
0;
}
opts = $.extend({link: null}, opts);
scrollDir = opts.direction == 'left' ? 'scrollLeft' : scrollDir;
if ( opts.scrollElement ) {
$scroller = opts.scrollElement;
scrollerOffset = $scroller[scrollDir]();
} else {
$scroller = $('html, body').firstScrollable();
}
aniProps[scrollDir] = scrollTargetOffset + scrollerOffset + opts.offset;
opts.beforeScroll.call($scroller, opts);
speed = opts.speed;
// automatically calculate the speed of the scroll based on distance / coefficient
if (speed === 'auto') {
// if aniProps[scrollDir] == 0 then we'll use scrollTop() value instead
speed = aniProps[scrollDir] || $scroller.scrollTop();
// divide the speed by the coefficient
speed = speed / opts.autoCoefficent;
}
aniOpts = {
duration: speed,
easing: opts.easing,
complete: function() {
opts.afterScroll.call(opts.link, opts);
}
};
if (opts.step) {
aniOpts.step = opts.step;
}
if ($scroller.length) {
$scroller.stop().animate(aniProps, aniOpts);
} else {
opts.afterScroll.call(opts.link, opts);
}
};
$.smoothScroll.version = version;
$.smoothScroll.filterPath = function(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
};
// default options
$.fn.smoothScroll.defaults = defaults;
function escapeSelector (str) {
return str.replace(/(:|\.)/g,'\\$1');
}
})(jQuery);
your help will be highly appreciated.

I'm guessing this is based on user events so something like this to cover mousescroll and scroll
$(window).bind( "mousewheel DOMMouseScroll scroll", function(e){
if (document.body.scrollTop == 0) {
// do this
}
})

Modify fancybox html

Is it possible to customize the fancybox HTML code?
I want to move out the next and previous buttons outside the .fancybox-outer

In order to move out the next and previous buttons of the .fancybox-outer container, you just need to add these CSS rules (in your own custom CSS file and AFTER you loaded the fancybox CSS file)
.fancybox-nav {
width: 60px;
}
.fancybox-nav span {
visibility: visible;
opacity: 0.5;
}
.fancybox-nav:hover span {
opacity: 1;
}
.fancybox-next {
right: -60px;
}
.fancybox-prev {
left: -60px;
}
​
You said you have looked around in the documentation but haven't found anything but the above is well documented in the fancyapps.com website here --> http://fancyapps.com/fancybox/#useful check No. 6, and the demo is in this fiddle
... but wonder if you will consider this as a correct answer.

Here is how I solved it. I did not know before that you could extend/replace methods in jquery. But this new method will (with some basic css) slide in from the right and out to the left.
It renders the buttons outside of the fancybox-outer element and it takes the width of the documen. It can probably be optimized a lot.
jQuery('ul a').fancybox({
margin: 0,
openMethod : 'afterZoomIn',
nextMethod : 'slideIn',
nextSpeed : 1000,
prevMethod : 'slideOut',
prevSpeed : 1000
});
(function ($, F) {
var getScalar = function(value, dim) {
var value_ = parseInt(value, 10);
if (dim && isPercentage(value)) {
value_ = F.getViewport()[ dim ] / 100 * value_;
}
return Math.ceil(value_);
},
getValue = function(value, dim) {
return getScalar(value, dim) + 'px';
};
F.transitions.afterZoomIn = function () {
var current = F.current;
if (!current) {
return;
}
F.isOpen = F.isOpened = true;
F.wrap.addClass('fancybox-opened').css('overflow', 'visible');
F.reposition();
// Assign a click event
if (current.closeClick || current.nextClick) {
F.inner.css('cursor', 'pointer').bind('click.fb', function(e) {
if (!$(e.target).is('a') && !$(e.target).parent().is('a')) {
F[ current.closeClick ? 'close' : 'next' ]();
}
});
}
// Create a close button
if (current.closeBtn) {
$(current.tpl.closeBtn).appendTo('.fancybox-overlay').bind('click.fb', F.close);
}
// Create navigation arrows
if (current.arrows && F.group.length > 1) {
if (current.loop || current.index > 0) {
$(current.tpl.prev).appendTo('.fancybox-overlay').bind('click.fb', F.prev);
}
if (current.loop || current.index < F.group.length - 1) {
$(current.tpl.next).appendTo('.fancybox-overlay').bind('click.fb', F.next);
}
}
F.trigger('afterShow');
// Stop the slideshow if this is the last item
if (!current.loop && current.index === current.group.length - 1) {
F.play( false );
} else if (F.opts.autoPlay && !F.player.isActive) {
F.opts.autoPlay = false;
F.play();
}
};
F.transitions.slideIn = function () {
var current = F.current,
effect = current.nextEffect,
startPos = current.pos,
endPos = { opacity : 1 },
direction = F.direction,
distance = $(document).width(),
field;
startPos.opacity = 0.1;
field = 'left';
if (direction === 'right') {
startPos[ field ] = getValue(getScalar(startPos[ field ]) - distance);
endPos[ field ] = '+=' + distance + 'px';
} else {
startPos[ field ] = getValue(getScalar(startPos[ field ]) + distance);
endPos[ field ] = '-=' + distance + 'px';
}
// Workaround for http://bugs.jquery.com/ticket/12273
if (effect === 'none') {
F._afterZoomIn();
} else {
F.wrap.css(startPos).animate(endPos, {
duration : current.nextSpeed,
easing : current.nextEasing,
complete : F._afterZoomIn
});
}
};
F.transitions.slideOut = function () {
var previous = F.previous,
effect = previous.prevEffect,
endPos = { opacity : 0 },
direction = F.direction,
distance = $(document).width();
if (effect === 'elastic') {
endPos[ 'left' ] = ( direction === 'left' ? '-' : '+' ) + '=' + distance + 'px';
}
previous.wrap.animate(endPos, {
duration : effect === 'none' ? 0 : previous.prevSpeed,
easing : previous.prevEasing,
complete : function () {
// $(this).trigger('onReset').remove();
previous.wrap.trigger('onReset').remove();
}
});
}
}(jQuery, jQuery.fancybox));