search

artpolikarpov / fotorama

A simple, stunning, powerful jQuery gallery.
http://fotorama.io
Other
1.59k stars 380 forks source link

Captions do not hide after update via API #218

Closed roelvanduijnhoven closed 10 years ago

roelvanduijnhoven commented 10 years ago

Captions are not correctly hidden if Fotorama is issued to hide captions later on in its life-cycle. See the following JsFiddle:

http://jsfiddle.net/6uw5b/1/

It will only hide the captions of the slides that one has not yet seen. In the Fiddle you see that the captions remain visible for the first two slides. I tried to fix this behaviour but failed to do so.

yhwhdesign commented 10 years ago

What about this.

If I needed to add a div into the ‘thumbs div’ so that I could dynamically add text in there. I also need to know how to add the navigation arrows to the navigation of the thumbs

finally I would love to know how access the style tag that is being added via javascript to the main images so that I could change the pixels that is currently pushing the next and previous images out of view.

Please help me with this.. You don’t have to tell me line for line how to do this, but can you please tell me where in your javascript does what. I can not make any sense of the code and there are no comments in there telling me what I need to go.

I would even be willing to pay for your help, if the amount is not off the charts. but I think my questions are simple enough for someone as good as you sir.

Please respond.

Thank you Jasen

X4 commented 10 years ago

@roelvanduijnhoven and @yhwhdesign please check the code I attached in https://github.com/artpolikarpov/fotorama/issues/208

artpolikarpov commented 10 years ago

Fixed: http://jsfiddle.net/6uw5b/1/

yhwhdesign commented 10 years ago

I just now saw the message so I will check it out..

Thank you very much!!!

Jasen Burkett / Web Developer Arkansas Online Office: 501.378.3829 / Cell: 501.615.4754 jburkett@arkansasonline.com / arkansasonline.com

The information contained in this electronic message is intended for the exclusive use of the individual or entity named above and may contain privileged or confidential copyrighted information. If the reader of this message is not the intended recipient or the employee or agent responsible to deliver it to the intended recipient, you are hereby notified that dissemination, distribution or copying of this information is prohibited. If you have received this communication in error, please notify the sender immediately.

On Mar 29, 2014, at 9:08 AM, Ferhat notifications@github.com wrote:

@roelvanduijnhoven and @yhwhdesign please check the code I attached #208

— Reply to this email directly or view it on GitHub.

yhwhdesign commented 10 years ago

I re read my questions and they were not very good.

Here is a more accurate list of what I am looking to do, and again I am not wanting you to do all the work, you have done such an amazing job on the slider, however the tweaks I need to do, I would rather do myself, I just do not know how to find the components in the javascript to do so.

I need to find where in the javascript that the thumbnails are being made so that I can add a div container underneath them.

I need to know where in the javascript I can add navigation arrows that match the ones on the full image, however i need to place them on the thumbs.

There is some ‘style’ tags that are being added via the javascript to make the next and previous images be hidden out of view, however I need to know how to edit the margin and the left style that is being added to those images so that I can pull them in next to the active image.

Finally, in the javascript and or the css, there is the code that makes the arrows fade away when you move your mouse on and off the slider… how could I find this code so that I can add it to other components in this slider.

I am willing to pay for the information, I do not have a lot of money but I know you have to be busy and may not have time to just answer all of my questions.

The above questions are all that I have, and would be forever grateful if you would please let me know the answers.

thank you for your time its much appreciated.

Jasen Burkett / Web Developer Arkansas Online Office: 501.378.3829 / Cell: 501.615.4754 jburkett@arkansasonline.com / arkansasonline.com

The information contained in this electronic message is intended for the exclusive use of the individual or entity named above and may contain privileged or confidential copyrighted information. If the reader of this message is not the intended recipient or the employee or agent responsible to deliver it to the intended recipient, you are hereby notified that dissemination, distribution or copying of this information is prohibited. If you have received this communication in error, please notify the sender immediately.

On Mar 31, 2014, at 8:50 AM, Jasen Burkett jburkett@arkansasonline.com wrote:

I just now saw the message so I will check it out..

Thank you very much!!!

Jasen Burkett / Web Developer Arkansas Online Office: 501.378.3829 / Cell: 501.615.4754 jburkett@arkansasonline.com / arkansasonline.com

The information contained in this electronic message is intended for the exclusive use of the individual or entity named above and may contain privileged or confidential copyrighted information. If the reader of this message is not the intended recipient or the employee or agent responsible to deliver it to the intended recipient, you are hereby notified that dissemination, distribution or copying of this information is prohibited. If you have received this communication in error, please notify the sender immediately.

On Mar 29, 2014, at 9:08 AM, Ferhat notifications@github.com wrote:

@roelvanduijnhoven and @yhwhdesign please check the code I attached #208

— Reply to this email directly or view it on GitHub.

X4 commented 10 years ago

@yhwhdesign

I need to find where in the javascript that the thumbnails are being made so that I can add a div container underneath them. Look for $navThumbFrame, it starts here: https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L294

I need to know where in the javascript I can add navigation arrows that match the ones on the full image, however i need to place them on the thumbs. The thumbsDraw() and loadImg() functions are responsible for showing you the thumbs. https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L641 https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L419

There is some ‘style’ tags that are being added via the javascript to make the next and previous images be hidden out of view […] Just use overflow: hidden; and set a width.

Finally, in the javascript and or the css, there is the code that makes the arrows fade away […] CSS3 transitions are responsible for the fade effect, see here: https://github.com/artpolikarpov/fotorama/blob/master/src/scss/_arrows.scss#L165

yhwhdesign commented 10 years ago

I greatly appreciate your time and help on this. I will go through the solutions you provided and make the changes.

If I have any further questions I will let you know but I think you have taken care of any / all issues.

Thank you greatly!!!!

Jasen Burkett / Web Developer Arkansas Online Office: 501.378.3829 / Cell: 501.615.4754 jburkett@arkansasonline.com / arkansasonline.com

The information contained in this electronic message is intended for the exclusive use of the individual or entity named above and may contain privileged or confidential copyrighted information. If the reader of this message is not the intended recipient or the employee or agent responsible to deliver it to the intended recipient, you are hereby notified that dissemination, distribution or copying of this information is prohibited. If you have received this communication in error, please notify the sender immediately.

On Apr 1, 2014, at 12:08 PM, Ferhat notifications@github.com wrote:

@yhwhdesign

I need to find where in the javascript that the thumbnails are being made so that I can add a div container underneath them. Look for $navThumbFrame, it starts here: https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L294

I need to know where in the javascript I can add navigation arrows that match the ones on the full image, however i need to place them on the thumbs. The thumbsDraw() and loadImg() functions are responsible for showing you the thumbs. https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L641 https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L419

There is some ‘style’ tags that are being added via the javascript to make the next and previous images be hidden out of view […] Just use overflow: hidden; and set a width.

Finally, in the javascript and or the css, there is the code that makes the arrows fade away […] CSS3 transitions are responsible for the fade effect, see here: https://github.com/artpolikarpov/fotorama/blob/master/src/scss/_arrows.scss#L165

— Reply to this email directly or view it on GitHub.

yhwhdesign commented 10 years ago

Quick question. I noticed that in your js file your referencing on the first link… that is not the same js file I have. Is the one you referenced a newer file? on line 294 i have the following: }

the one you showed me looks totally different!

Please advise

Jasen Burkett / Web Developer Arkansas Online Office: 501.378.3829 / Cell: 501.615.4754 jburkett@arkansasonline.com / arkansasonline.com

The information contained in this electronic message is intended for the exclusive use of the individual or entity named above and may contain privileged or confidential copyrighted information. If the reader of this message is not the intended recipient or the employee or agent responsible to deliver it to the intended recipient, you are hereby notified that dissemination, distribution or copying of this information is prohibited. If you have received this communication in error, please notify the sender immediately.

On Apr 1, 2014, at 12:08 PM, Ferhat notifications@github.com wrote:

@yhwhdesign

I need to find where in the javascript that the thumbnails are being made so that I can add a div container underneath them. Look for $navThumbFrame, it starts here: https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L294

I need to know where in the javascript I can add navigation arrows that match the ones on the full image, however i need to place them on the thumbs. The thumbsDraw() and loadImg() functions are responsible for showing you the thumbs. https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L641 https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L419

There is some ‘style’ tags that are being added via the javascript to make the next and previous images be hidden out of view […] Just use overflow: hidden; and set a width.

Finally, in the javascript and or the css, there is the code that makes the arrows fade away […] CSS3 transitions are responsible for the fade effect, see here: https://github.com/artpolikarpov/fotorama/blob/master/src/scss/_arrows.scss#L165

— Reply to this email directly or view it on GitHub.

yhwhdesign commented 10 years ago

Question. The master files do not work, some of the examples work but why is this file set different from the website version? and why does it not work, unlike the website version the only trouble is with the javascript file.

What am I missing?

Jasen Burkett / Web Developer Arkansas Online Office: 501.378.3829 / Cell: 501.615.4754 jburkett@arkansasonline.com / arkansasonline.com

The information contained in this electronic message is intended for the exclusive use of the individual or entity named above and may contain privileged or confidential copyrighted information. If the reader of this message is not the intended recipient or the employee or agent responsible to deliver it to the intended recipient, you are hereby notified that dissemination, distribution or copying of this information is prohibited. If you have received this communication in error, please notify the sender immediately.

On Apr 1, 2014, at 12:08 PM, Ferhat notifications@github.com wrote:

@yhwhdesign

I need to find where in the javascript that the thumbnails are being made so that I can add a div container underneath them. Look for $navThumbFrame, it starts here: https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L294

I need to know where in the javascript I can add navigation arrows that match the ones on the full image, however i need to place them on the thumbs. The thumbsDraw() and loadImg() functions are responsible for showing you the thumbs. https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L641 https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L419

There is some ‘style’ tags that are being added via the javascript to make the next and previous images be hidden out of view […] Just use overflow: hidden; and set a width.

Finally, in the javascript and or the css, there is the code that makes the arrows fade away […] CSS3 transitions are responsible for the fade effect, see here: https://github.com/artpolikarpov/fotorama/blob/master/src/scss/_arrows.scss#L165

— Reply to this email directly or view it on GitHub.

X4 commented 10 years ago

The version I referenced is from the master branch and upstream is usually more recent than the code you may have localy. So, I'd suggest you do a git fetch && git pull in your local repository first. meanwhile @artpolikarpov released version 4.5.1

yhwhdesign commented 10 years ago

I was able to find the similar code in the output files that was made. Compared to the code you showed me. However its just the lack of knowing how he uses javascript to build the div containers, etc. that is bogging me down. I hope to figure it out soon.

Jasen Burkett / Web Developer Arkansas Online Office: 501.378.3829 / Cell: 501.615.4754 jburkett@arkansasonline.com / arkansasonline.com

The information contained in this electronic message is intended for the exclusive use of the individual or entity named above and may contain privileged or confidential copyrighted information. If the reader of this message is not the intended recipient or the employee or agent responsible to deliver it to the intended recipient, you are hereby notified that dissemination, distribution or copying of this information is prohibited. If you have received this communication in error, please notify the sender immediately.

On Apr 2, 2014, at 9:49 AM, Jasen Burkett jburkett@arkansasonline.com wrote:

Question. The master files do not work, some of the examples work but why is this file set different from the website version? and why does it not work, unlike the website version the only trouble is with the javascript file.

What am I missing?

Jasen Burkett / Web Developer Arkansas Online Office: 501.378.3829 / Cell: 501.615.4754 jburkett@arkansasonline.com / arkansasonline.com

The information contained in this electronic message is intended for the exclusive use of the individual or entity named above and may contain privileged or confidential copyrighted information. If the reader of this message is not the intended recipient or the employee or agent responsible to deliver it to the intended recipient, you are hereby notified that dissemination, distribution or copying of this information is prohibited. If you have received this communication in error, please notify the sender immediately.

On Apr 1, 2014, at 12:08 PM, Ferhat notifications@github.com wrote:

@yhwhdesign

I need to find where in the javascript that the thumbnails are being made so that I can add a div container underneath them. Look for $navThumbFrame, it starts here: https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L294

I need to know where in the javascript I can add navigation arrows that match the ones on the full image, however i need to place them on the thumbs. The thumbsDraw() and loadImg() functions are responsible for showing you the thumbs. https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L641 https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L419

There is some ‘style’ tags that are being added via the javascript to make the next and previous images be hidden out of view […] Just use overflow: hidden; and set a width.

Finally, in the javascript and or the css, there is the code that makes the arrows fade away […] CSS3 transitions are responsible for the fade effect, see here: https://github.com/artpolikarpov/fotorama/blob/master/src/scss/_arrows.scss#L165

— Reply to this email directly or view it on GitHub.

yhwhdesign commented 10 years ago

Can you do a quick fiddle on the following to help me again? If not I understand.

I thank you for your time, and if I need to pay you for the answers to the above questions let me know how much it would cost, I don’t have much but I can try to give you something.

I still can not get anything to work, and Im not sure where to start… I have attached my files

to this email so that you can see what I am working with. The javascript and the css files are copied and pasted below.

/*!

if (!JQUERY_VERSION || JQUERY_VERSION[0] < 1 || (JQUERY_VERSION[0] == 1 && JQUERYVERSION[1] < 8)) { throw 'Fotorama requires jQuery 1.8 or later and will not run without it.'; return; } // My Underscore :-) var = {}; /* Modernizr 2.6.2 (Custom Build) | MIT & BSD

var Modernizr = (function (window, document, undefined) {

var version = '2.6.2',

  Modernizr = {},

  docElement = document.documentElement,

  mod = 'modernizr',
  modElem = document.createElement(mod),
  mStyle = modElem.style,

  inputElem,

  toString = {}.toString,

  prefixes = ' -webkit- -moz- -o- -ms- '.split(' '),

  omPrefixes = 'Webkit Moz O ms',

  cssomPrefixes = omPrefixes.split(' '),

  domPrefixes = omPrefixes.toLowerCase().split(' '),

  tests = {},
  inputs = {},
  attrs = {},

  classes = [],

  slice = classes.slice,

  featureName,

  injectElementWithStyles = function (rule, callback, nodes, testnames) {

    var style, ret, node, docOverflow,
        div = document.createElement('div'),
        body = document.body,
        fakeBody = body || document.createElement('body');

    if (parseInt(nodes, 10)) {
      while (nodes--) {
        node = document.createElement('div');
        node.id = testnames ? testnames[nodes] : mod + (nodes + 1);
        div.appendChild(node);
      }
    }

    style = ['&#173;', '<style id="s', mod, '">', rule, '</style>'].join('');
    div.id = mod;
    (body ? div : fakeBody).innerHTML += style;
    fakeBody.appendChild(div);
    if (!body) {
      fakeBody.style.background = '';
      fakeBody.style.overflow = 'hidden';
      docOverflow = docElement.style.overflow;
      docElement.style.overflow = 'hidden';
      docElement.appendChild(fakeBody);
    }

    ret = callback(div, rule);
    if (!body) {
      fakeBody.parentNode.removeChild(fakeBody);
      docElement.style.overflow = docOverflow;
    } else {
      div.parentNode.removeChild(div);
    }

    return !!ret;

  },
  _hasOwnProperty = ({}).hasOwnProperty, hasOwnProp;

if (!is(_hasOwnProperty, 'undefined') && !is(_hasOwnProperty.call, 'undefined')) { hasOwnProp = function (object, property) { return _hasOwnProperty.call(object, property); }; } else { hasOwnProp = function (object, property) { return ((property in object) && is(object.constructor.prototype[property], 'undefined')); }; }

if (!Function.prototype.bind) { Function.prototype.bind = function bind (that) {

  var target = this;

  if (typeof target != "function") {
    throw new TypeError();
  }

  var args = slice.call(arguments, 1),
      bound = function () {

        if (this instanceof bound) {

          var F = function () {
          };
          F.prototype = target.prototype;
          var self = new F();

          var result = target.apply(
              self,
              args.concat(slice.call(arguments))
          );
          if (Object(result) === result) {
            return result;
          }
          return self;

        } else {

          return target.apply(
              that,
              args.concat(slice.call(arguments))
          );

        }

      };

  return bound;
};

}

function setCss (str) { mStyle.cssText = str; }

function setCssAll (str1, str2) { return setCss(prefixes.join(str1 + ';') + ( str2 || '' )); }

function is (obj, type) { return typeof obj === type; }

function contains (str, substr) { return !!~('' + str).indexOf(substr); }

function testProps (props, prefixed) { for (var i in props) { var prop = props[i]; if (!contains(prop, "-") && mStyle[prop] !== undefined) { return prefixed == 'pfx' ? prop : true; } } return false; }

function testDOMProps (props, obj, elem) { for (var i in props) { var item = obj[props[i]]; if (item !== undefined) {

    if (elem === false) return props[i];

    if (is(item, 'function')) {
      return item.bind(elem || obj);
    }

    return item;
  }
}
return false;

}

function testPropsAll (prop, prefixed, elem) {

var ucProp = prop.charAt(0).toUpperCase() + prop.slice(1),
    props = (prop + ' ' + cssomPrefixes.join(ucProp + ' ') + ucProp).split(' ');

if (is(prefixed, "string") || is(prefixed, "undefined")) {
  return testProps(props, prefixed);

} else {
  props = (prop + ' ' + (domPrefixes).join(ucProp + ' ') + ucProp).split(' ');
  return testDOMProps(props, prefixed, elem);
}

}

tests['csstransforms3d'] = function () {

var ret = !!testPropsAll('perspective');

// Chrome fails that test, ignore // if (ret && 'webkitPerspective' in docElement.style) { // // injectElementWithStyles('@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}', function (node, rule) { // ret = node.offsetLeft === 9 && node.offsetHeight === 3; // }); // } return ret; };

for (var feature in tests) { if (hasOwnProp(tests, feature)) { featureName = feature.toLowerCase(); Modernizr[featureName] = tests[feature]();

  classes.push((Modernizr[featureName] ? '' : 'no-') + featureName);
}

}

Modernizr.addTest = function (feature, test) { if (typeof feature == 'object') { for (var key in feature) { if (hasOwnProp(feature, key)) { Modernizr.addTest(key, feature[ key ]); } } } else {

  feature = feature.toLowerCase();

  if (Modernizr[feature] !== undefined) {
    return Modernizr;
  }

  test = typeof test == 'function' ? test() : test;

  if (typeof enableClasses !== "undefined" && enableClasses) {
    docElement.className += ' ' + (test ? '' : 'no-') + feature;
  }
  Modernizr[feature] = test;

}

return Modernizr;

};

setCss(''); modElem = inputElem = null;

Modernizr._version = version;

Modernizr._prefixes = prefixes; Modernizr._domPrefixes = domPrefixes; Modernizr._cssomPrefixes = cssomPrefixes;

Modernizr.testProp = function (prop) { return testProps([prop]); };

Modernizr.testAllProps = testPropsAll;

Modernizr.testStyles = injectElementWithStyles; Modernizr.prefixed = function (prop, obj, elem) { if (!obj) { return testPropsAll(prop, 'pfx'); } else { return testPropsAll(prop, obj, elem); } };

return Modernizr; })(window, document); var fullScreenApi = { ok: false, is: function () { return false; }, request: function () { }, cancel: function () { }, event: '', prefix: '' }, browserPrefixes = 'webkit moz o ms khtml'.split(' ');

// check for native support if (typeof document.cancelFullScreen != 'undefined') { fullScreenApi.ok = true; } else { // check for fullscreen support by vendor prefix for (var i = 0, il = browserPrefixes.length; i < il; i++) { fullScreenApi.prefix = browserPrefixes[i]; if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined') { fullScreenApi.ok = true; break; } } }

// update methods to do something useful if (fullScreenApi.ok) { fullScreenApi.event = fullScreenApi.prefix + 'fullscreenchange'; fullScreenApi.is = function () { switch (this.prefix) { case '': return document.fullScreen; case 'webkit': return document.webkitIsFullScreen; default: return document[this.prefix + 'FullScreen']; } }; fullScreenApi.request = function (el) { return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen'](); }; fullScreenApi.cancel = function (el) { return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen'](); }; } //fgnass.github.com/spin.js#v1.3.2

/**

var Spinner, spinnerDefaults = { lines: 12, // The number of lines to draw length: 5, // The length of each line width: 2, // The line thickness radius: 7, // The radius of the inner circle corners: 1, // Corner roundness (0..1) rotate: 15, // The rotation offset color: 'rgba(128, 128, 128, .75)', hwaccel: true }, spinnerOverride = { top: 'auto', left: 'auto', className: '' };

(function(root, factory) {

/* CommonJS */ //if (typeof exports == 'object') module.exports = factory()

/* AMD module */ //else if (typeof define == 'function' && define.amd) define(factory)

/* Browser global */ //else root.Spinner = factory()

Spinner = factory(); } (this, function() { "use strict";

var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes / , animations = {} / Animation rules keyed by their name / , useCssAnimations / Whether to use CSS animations or setTimeout */

/**

}));

/* Bez v1.0.10-g5ae0136

function minMaxLimit (value, min, max) { return Math.max(isNaN(min) ? -Infinity : min, Math.min(isNaN(max) ? Infinity : max, value)); }

function readTransform (css) { return css.match(/ma/) && css.match(/-?\d+(?!d)/g)[css.match(/3d/) ? 12 : 4]; }

function readPosition ($el) { if (CSS3) { return +readTransform($el.css('transform')); } else { return +$el.css('left').replace('px', ''); } }

function getTranslate (pos, _001) { var obj = {}; if (CSS3) { obj.transform = 'translate3d(' + (pos + (_001 ? 0.001 : 0)) + 'px,0,0)'; // 0.001 to remove Retina artifacts } else { obj.left = pos; } return obj; }

function getDuration (time) { return {'transition-duration': time + 'ms'}; }

function numberFromMeasure (value, measure) { return +String(value).replace(measure || 'px', '') || undefined; }

function numberFromPercent (value) { return /%$/.test(value) && numberFromMeasure(value, '%'); }

function numberFromWhatever (value, whole) { return numberFromPercent(value) / 100 * whole || numberFromMeasure(value); }

function measureIsValid (value) { return (!!numberFromMeasure(value) || !!numberFromMeasure(value, '%')) && value; }

function getPosByIndex (index, side, margin, baseIndex) { return (index - (baseIndex || 0)) * (side + (margin || 0)); }

function getIndexByPos (pos, side, margin, baseIndex) { return -Math.round(pos / (side + (margin || 0)) - (baseIndex || 0)); }

function bindTransitionEnd ($el) { var elData = $el.data();

if (elData.tEnd) return;

var el = $el[0], transitionEndEvent = { WebkitTransition: 'webkitTransitionEnd', MozTransition: 'transitionend', OTransition: 'oTransitionEnd otransitionend', msTransition: 'MSTransitionEnd', transition: 'transitionend' }; el.addEventListener(transitionEndEvent[Modernizr.prefixed('transition')], function (e) { elData.tProp && e.propertyName.match(elData.tProp) && elData.onEndFn(); }, false); elData.tEnd = true; }

function afterTransition ($el, property, fn, time) { var ok, elData = $el.data();

if (elData) { elData.onEndFn = function () { if (ok) return; ok = true; clearTimeout(elData.tT); fn(); }; elData.tProp = property;

// Passive call, just in case of fail of native transition-end event
clearTimeout(elData.tT);
elData.tT = setTimeout(function () {
  elData.onEndFn();
}, time * 1.5);

bindTransitionEnd($el);

} }

function stop ($el, left, _001) { if ($el.length) { var elData = $el.data(); if (CSS3) { $el.css(getDuration(0)); elData.onEndFn = noop; clearTimeout(elData.tT); } else { $el.stop(); } var lockedLeft = getNumber(left, function () { return readPosition($el); });

$el.css(getTranslate(lockedLeft, _001));//.width(); // `.width()` for reflow
return lockedLeft;

} }

function getNumber () { var number; for (var _i = 0, _l = arguments.length; _i < _l; _i++) { number = _i ? arguments[_i]() : arguments[_i]; if (typeof number === 'number') { break; } }

return number; }

function edgeResistance (pos, edge) { return Math.round(pos + ((edge - pos) / 1.5)); }

function getProtocol () { getProtocol.p = getProtocol.p || (location.protocol === 'https:' ? 'https://' : 'http://'); return getProtocol.p; }

function parseHref (href) { var a = document.createElement('a'); a.href = href; return a; }

function findVideoId (href, forceVideo) { if (typeof href !== 'string') return href; href = parseHref(href);

var id, type;

if (href.host.match(/youtube.com/) && href.search) { //.log(); id = href.search.split('v=')[1]; if (id) { var ampersandPosition = id.indexOf('&'); if (ampersandPosition !== -1) { id = id.substring(0, ampersandPosition); } type = 'youtube'; } } else if (href.host.match(/youtube.com|youtu.be/)) { id = href.pathname.replace(/^\/(embed\/|v\/)?/, '').replace(/\/./, ''); type = 'youtube'; } else if (href.host.match(/vimeo.com/)) { type = 'vimeo'; id = href.pathname.replace(/^\/(video\/)?/, '').replace(/\/./, ''); }

if ((!id || !type) && forceVideo) { id = href.href; type = 'custom'; }

return id ? {id: id, type: type, s: href.search.replace(/^\?/, '')} : false; }

function getVideoThumbs (dataFrame, data, fotorama) { var img, thumb, video = dataFrame.video; if (video.type === 'youtube') { thumb = getProtocol() + 'img.youtube.com/vi/' + video.id + '/default.jpg'; img = thumb.replace(/\/default.jpg$/, '/hqdefault.jpg'); dataFrame.thumbsReady = true; } else if (video.type === 'vimeo') { $.ajax({ url: getProtocol() + 'vimeo.com/api/v2/video/' + video.id + '.json', dataType: 'jsonp', success: function (json) { dataFrame.thumbsReady = true; updateData(data, {img: json[0].thumbnail_large, thumb: json[0].thumbnail_small}, dataFrame.i, fotorama); } }); } else { dataFrame.thumbsReady = true; }

return { img: img, thumb: thumb } }

function updateData (data, _dataFrame, i, fotorama) { for (var _i = 0, _l = data.length; _i < _l; _i++) { var dataFrame = data[_i];

if (dataFrame.i === i && dataFrame.thumbsReady) {
  var clear = {videoReady: true};
  clear[STAGE_FRAME_KEY] = clear[NAV_THUMB_FRAME_KEY] = clear[NAV_DOT_FRAME_KEY] = false;

  fotorama.splice(_i, 1, $.extend(
      {},
      dataFrame,
      clear,
      _dataFrame
  ));

  break;
}

} }

function getDataFromHtml ($el) { var data = [];

function getDataFromImg ($img, imgData, checkVideo) { var $child = $img.children('img').eq(0), _imgHref = $img.attr('href'), _imgSrc = $img.attr('src'), _thumbSrc = $child.attr('src'), _video = imgData.video, video = checkVideo ? findVideoId(_imgHref, _video === true) : false;

if (video) {
  _imgHref = false;
} else {
  video = _video;
}

getDimensions($img, $child, $.extend(imgData, {
  video: video,
  img: imgData.img || _imgHref || _imgSrc || _thumbSrc,
  thumb: imgData.thumb || _thumbSrc || _imgSrc || _imgHref
}));

}

function getDimensions ($img, $child, imgData) { var separateThumbFLAG = imgData.thumb && imgData.img !== imgData.thumb, width = numberFromMeasure(imgData.width || $img.attr('width')), height = numberFromMeasure(imgData.height || $img.attr('height'));

$.extend(imgData, {
  width: width,
  height: height,
  thumbratio: getRatio(imgData.thumbratio || (numberFromMeasure(imgData.thumbwidth || ($child && $child.attr('width')) || separateThumbFLAG || width) / numberFromMeasure(imgData.thumbheight || ($child && $child.attr('height')) || separateThumbFLAG || height)))
});

}

$el.children().each(function () { var $this = $(this), dataFrame = optionsToLowerCase($.extend($this.data(), {id: $this.attr('id')})); if ($this.is('a, img')) { getDataFromImg($this, dataFrame, true); } else if (!$this.is(':empty')) { getDimensions($this, null, $.extend(dataFrame, { html: this, _html: $this.html() // Because of IE })); } else return;

data.push(dataFrame);

});

return data; }

function isHidden (el) { return el.offsetWidth === 0 && el.offsetHeight === 0; }

function isDetached (el) { return !$.contains(document.documentElement, el); }

function waitFor (test, fn, timeout) { if (test()) { fn(); } else { setTimeout(function () { waitFor(test, fn); }, timeout || 100); } }

function setHash (hash) { //console.time('setHash ' + hash); location.replace(location.protocol

function fit ($el, measuresToFit, method) { var elData = $el.data(), measures = elData.measures;

if (measures && (!elData.l || elData.l.W !== measures.width || elData.l.H !== measures.height || elData.l.r !== measures.ratio || elData.l.w !== measuresToFit.w || elData.l.h !== measuresToFit.h || elData.l.m !== method)) { var width = measures.width, height = measures.height, ratio = measuresToFit.w / measuresToFit.h, biggerRatioFLAG = measures.ratio >= ratio, fitFLAG = method === 'scaledown', containFLAG = method === 'contain', coverFLAG = method === 'cover';

if (biggerRatioFLAG && (fitFLAG || containFLAG) || !biggerRatioFLAG && coverFLAG) {
  width = minMaxLimit(measuresToFit.w, 0, fitFLAG ? width : Infinity);
  height = width / measures.ratio;
} else if (biggerRatioFLAG && coverFLAG || !biggerRatioFLAG && (fitFLAG || containFLAG)) {
  height = minMaxLimit(measuresToFit.h, 0, fitFLAG ? height : Infinity);
  width = height * measures.ratio;
}

$el.css({
  width: Math.ceil(width),
  height: Math.ceil(height),
  marginLeft: Math.floor(-width / 2),
  marginTop: Math.floor(-height / 2)
});

elData.l = {
  W: measures.width,
  H: measures.height,
  r: measures.ratio,
  w: measuresToFit.w,
  h: measuresToFit.h,
  m: method
};

}

return true; }

function setStyle ($el, style) { var el = $el[0]; if (el.styleSheet) { el.styleSheet.cssText = style; } else { $el.html(style); } }

function findShadowEdge (pos, min, max) { return min === max ? false : pos <= min ? 'left' : pos >= max ? 'right' : 'left right'; }

function getIndexFromHash (hash, data, ok, startindex) { if (!ok) return false; if (!isNaN(hash)) return hash - (startindex ? 0 : 1);

var index;

for (var _i = 0, _l = data.length; _i < _l; _i++) { var dataFrame = data[_i];

if (dataFrame.id === hash) {
  index = _i;
  break;
}

}

return index; }

function smartClick ($el, fn, _options) { _options = _options || {};

$el.each(function () { var $this = $(this), thisData = $this.data(), startEvent;

if (thisData.clickOn) return;

thisData.clickOn = true;

$.extend(touch($this, {
  onStart: function (e) {
    startEvent = e;
    (_options.onStart || noop).call(this, e);
  },
  onMove: _options.onMove || noop,
  onTouchEnd: _options.onTouchEnd || noop,
  onEnd: function (result) {
    //console.log('smartClick → result.moved', result.moved);
    if (result.moved) return;
    fn.call(this, startEvent);
  }
}), {noMove: true});

}); }

function div (classes, child) { return '

' + (child || '') + '
'; }

// Fisher–Yates Shuffle // http://bost.ocks.org/mike/shuffle/ function shuffle (array) { // While there remain elements to shuffle var l = array.length; while (l) { // Pick a remaining element var i = Math.floor(Math.random() * l--);

// And swap it with the current element
var t = array[l];
array[l] = array[i];
array[i] = t;

}

return array; }

function clone (array) { return Object.prototype.toString.call(array) == '[object Array]' && $.map(array, function (frame) { return $.extend({}, frame); }); }

function lockScroll (left, top) { $WINDOW .scrollLeft(left) .scrollTop(top); }

function optionsToLowerCase (options) { if (options) { var opts = {}; $.each(options, function (key, value) { opts[key.toLowerCase()] = value; });

return opts;

} }

function getRatio (_ratio) { if (!_ratio) return; var ratio = +_ratio; if (!isNaN(ratio)) { return ratio; } else { ratio = _ratio.split('/'); return +ratio[0] / +ratio[1] || undefined; } }

function stopEvent (e, stopPropagation) { e.preventDefault(); stopPropagation && e.stopPropagation(); }

function getDirectionSign (forward) { return forward ? '>' : '<'; }

function slide ($el, options) { var elData = $el.data(), elPos = Math.round(options.pos), onEndFn = function () { elData.sliding = false; (options.onEnd || noop)(); };

if (typeof options.overPos !== 'undefined' && options.overPos !== options.pos) { elPos = options.overPos; onEndFn = function () { slide($el, $.extend({}, options, {overPos: options.pos, time: Math.max(TRANSITION_DURATION, options.time / 2)})) }; }

//console.time('var translate = $.extend'); var translate = $.extend(getTranslate(elPos, options._001), options.width && {width: options.width}); //console.timeEnd('var translate = $.extend');

elData.sliding = true;

if (CSS3) { $el.css($.extend(getDuration(options.time), translate)); if (options.time > 10) { //console.time('afterTransition'); afterTransition($el, 'transform', onEndFn, options.time); //console.timeEnd('afterTransition'); } else { onEndFn(); } } else { $el.stop().animate(translate, options.time, BEZIER, onEndFn); } }

function fade ($el1, $el2, $frames, options, fadeStack, chain) { var chainedFLAG = typeof chain !== 'undefined'; if (!chainedFLAG) { fadeStack.push(arguments); Array.prototype.push.call(arguments, fadeStack.length); if (fadeStack.length > 1) return; }

$el1 = $el1 || $($el1); $el2 = $el2 || $($el2);

var $el1 = $el1[0], $el2 = $el2[0], crossfadeFLAG = options.method === 'crossfade', onEndFn = function () { if (!onEndFn.done) { onEndFn.done = true; var args = (chainedFLAG || fadeStack.shift()) && fadeStack.shift(); args && fade.apply(this, args); (options.onEnd || noop)(!!args); } }, time = options.time / (chain || 1);

$frames.removeClass(fadeRearClass + ' ' + fadeFrontClass);

$el1 .stop() .addClass(fadeRearClass); $el2 .stop() .addClass(fadeFrontClass);

crossfadeFLAG && _$el2 && $el1.fadeTo(0, 0);

$el1.fadeTo(crossfadeFLAG ? time : 0, 1, crossfadeFLAG && onEndFn); $el2.fadeTo(time, 0, onEndFn);

($el1 && crossfadeFLAG) || $el2 || onEndFn(); } var lastEvent, moveEventType, preventEvent, preventEventTimeout;

function extendEvent (e) { var touch = (e.touches || [])[0] || e; e._x = touch.pageX; e._y = touch.clientY; e._now = $.now(); }

function touch ($el, options) { var el = $el[0], tail = {}, touchEnabledFLAG, startEvent, $target, controlTouch, touchFLAG, targetIsSelectFLAG, targetIsLinkFlag, tolerance, moved;

function onStart (e) { $target = $(e.target); tail.checked = targetIsSelectFLAG = targetIsLinkFlag = moved = false;

if (touchEnabledFLAG
    || tail.flow
    || (e.touches && e.touches.length > 1)
    || e.which > 1
    || (lastEvent && lastEvent.type !== e.type && preventEvent)
    || (targetIsSelectFLAG = options.select && $target.is(options.select, el))) return targetIsSelectFLAG;

touchFLAG = e.type === 'touchstart';
targetIsLinkFlag = $target.is('a, a *', el);
controlTouch = tail.control;

tolerance = (tail.noMove || tail.noSwipe || controlTouch) ? 16 : !tail.snap ? 4 : 0;

extendEvent(e);

startEvent = lastEvent = e;
moveEventType = e.type.replace(/down|start/, 'move').replace(/Down/, 'Move');

(options.onStart || noop).call(el, e, {control: controlTouch, $target: $target});

touchEnabledFLAG = tail.flow = true;

if (!touchFLAG || tail.go) stopEvent(e);

}

function onMove (e) { if ((e.touches && e.touches.length > 1) || (MS_POINTER && !e.isPrimary) || moveEventType !== e.type || !touchEnabledFLAG) { touchEnabledFLAG && onEnd(); (options.onTouchEnd || noop)(); return; }

extendEvent(e);

var xDiff = Math.abs(e._x - startEvent._x), // opt _x → _pageX
    yDiff = Math.abs(e._y - startEvent._y),
    xyDiff = xDiff - yDiff,
    xWin = (tail.go || tail.x || xyDiff >= 0) && !tail.noSwipe,
    yWin = xyDiff < 0;

if (touchFLAG && !tail.checked) {
  if (touchEnabledFLAG = xWin) {
    stopEvent(e);
  }
} else {
  //console.log('onMove e.preventDefault');
  stopEvent(e);
  (options.onMove || noop).call(el, e, {touch: touchFLAG});
}

if (!moved && Math.sqrt(Math.pow(xDiff, 2) + Math.pow(yDiff, 2)) > tolerance) {
  moved = true;
}

tail.checked = tail.checked || xWin || yWin;

}

function onEnd (e) { ////console.time('touch.js onEnd');

(options.onTouchEnd || noop)();

var _touchEnabledFLAG = touchEnabledFLAG;
tail.control = touchEnabledFLAG = false;

if (_touchEnabledFLAG) {
  tail.flow = false;
}

if (!_touchEnabledFLAG || (targetIsLinkFlag && !tail.checked)) return;

e && stopEvent(e);

preventEvent = true;
clearTimeout(preventEventTimeout);
preventEventTimeout = setTimeout(function () {
  preventEvent = false;
}, 1000);

(options.onEnd || noop).call(el, {moved: moved, $target: $target, control: controlTouch, touch: touchFLAG, startEvent: startEvent, aborted: !e || e.type === 'MSPointerCancel'});
////console.timeEnd('touch.js onEnd');

}

function onOtherStart () { if (tail.flow) return; setTimeout(function () { tail.flow = true; }, 10); }

function onOtherEnd () { if (!tail.flow) return; setTimeout(function () { tail.flow = false; }, TOUCH_TIMEOUT); }

if (MS_POINTER) { el[ADD_EVENT_LISTENER]('MSPointerDown', onStart, false); document[ADD_EVENT_LISTENER]('MSPointerMove', onMove, false); document[ADD_EVENT_LISTENER]('MSPointerCancel', onEnd, false); document[ADD_EVENT_LISTENER]('MSPointerUp', onEnd, false); } else { if (el[ADD_EVENT_LISTENER]) { el[ADD_EVENT_LISTENER]('touchstart', onStart, false); el[ADD_EVENT_LISTENER]('touchmove', onMove, false); el[ADD_EVENT_LISTENER]('touchend', onEnd, false);

  document[ADD_EVENT_LISTENER]('touchstart', onOtherStart, false);
  document[ADD_EVENT_LISTENER]('touchend', onOtherEnd, false);
  document[ADD_EVENT_LISTENER]('touchcancel', onOtherEnd, false);
  window[ADD_EVENT_LISTENER]('scroll', onOtherEnd, false);
}

$el.on('mousedown', onStart);
$DOCUMENT
    .on('mousemove', onMove)
    .on('mouseup', onEnd);

}

$el.on('click', 'a', function (e) { tail.checked && stopEvent(e); });

return tail; }

function moveOnTouch ($el, options) { var el = $el[0], elData = $el.data(), tail = {}, startCoo, coo, startElPos, moveElPos, edge, moveTrack, startTime, endTime, min, max, snap, slowFLAG, controlFLAG, moved, tracked;

function startTracking (e, noStop) { tracked = true; startCoo = coo = e._x; startTime = e._now;

moveTrack = [
  [startTime, startCoo]
];

startElPos = moveElPos = tail.noMove || noStop ? 0 : stop($el, (options.getPos || noop)(), options._001);

(options.onStart || noop).call(el, e);

}

function onStart (e, result) { min = tail.min; max = tail.max; snap = tail.snap;

slowFLAG = e.altKey;
tracked = moved = false;

controlFLAG = result.control;

if (!controlFLAG && !elData.sliding) {
  startTracking(e);
}

}

function onMove (e, result) { if (!tail.noSwipe) { if (!tracked) { startTracking(e); }

  coo = e._x;

  moveTrack.push([e._now, coo]);

  moveElPos = startElPos - (startCoo - coo);

  edge = findShadowEdge(moveElPos, min, max);

  if (moveElPos <= min) {
    moveElPos = edgeResistance(moveElPos, min);
  } else if (moveElPos >= max) {
    moveElPos = edgeResistance(moveElPos, max);
  }

  if (!tail.noMove) {
    $el.css(getTranslate(moveElPos, options._001));
    if (!moved) {
      moved = true;
      // only for mouse
      result.touch || MS_POINTER || $el.addClass(grabbingClass);
    }

    (options.onMove || noop).call(el, e, {pos: moveElPos, edge: edge});
  }
}

}

function onEnd (result) { ////console.time('moveontouch.js onEnd'); if (tail.noSwipe && result.moved) return;

if (!tracked) {
  startTracking(result.startEvent, true);
}

//console.log('onEnd');

result.touch || MS_POINTER || $el.removeClass(grabbingClass);

endTime = $.now();

var _backTimeIdeal = endTime - TOUCH_TIMEOUT,
    _backTime,
    _timeDiff,
    _timeDiffLast,
    backTime = null,
    backCoo,
    virtualPos,
    limitPos,
    newPos,
    overPos,
    time = TRANSITION_DURATION,
    speed,
    friction = options.friction;

for (var _i = moveTrack.length - 1; _i >= 0; _i--) {
  _backTime = moveTrack[_i][0];
  _timeDiff = Math.abs(_backTime - _backTimeIdeal);
  if (backTime === null || _timeDiff < _timeDiffLast) {
    backTime = _backTime;
    backCoo = moveTrack[_i][1];
  } else if (backTime === _backTimeIdeal || _timeDiff > _timeDiffLast) {
    break;
  }
  _timeDiffLast = _timeDiff;
}

newPos = minMaxLimit(moveElPos, min, max);

var cooDiff = backCoo - coo,
    forwardFLAG = cooDiff >= 0,
    timeDiff = endTime - backTime,
    longTouchFLAG = timeDiff > TOUCH_TIMEOUT,
    swipeFLAG = !longTouchFLAG && moveElPos !== startElPos && newPos === moveElPos;

if (snap) {
  newPos = minMaxLimit(Math[swipeFLAG ? (forwardFLAG ? 'floor' : 'ceil') : 'round'](moveElPos / snap) * snap, min, max);
  min = max = newPos;
}

if (swipeFLAG && (snap || newPos === moveElPos)) {
  speed = -(cooDiff / timeDiff);
  time *= minMaxLimit(Math.abs(speed), options.timeLow, options.timeHigh);
  virtualPos = Math.round(moveElPos + speed * time / friction);

  if (!snap) {
    newPos = virtualPos;
  }

  if (!forwardFLAG && virtualPos > max || forwardFLAG && virtualPos < min) {
    limitPos = forwardFLAG ? min : max;
    overPos = virtualPos - limitPos;
    if (!snap) {
      newPos = limitPos;
    }
    overPos = minMaxLimit(newPos + overPos * .03, limitPos - 50, limitPos + 50);
    time = Math.abs((moveElPos - overPos) / (speed / friction));
  }
}

time *= slowFLAG ? 10 : 1;

(options.onEnd || noop).call(el, $.extend(result, {moved: result.moved || longTouchFLAG && snap, pos: moveElPos, newPos: newPos, overPos: overPos, time: time}));

}

tail = $.extend(touch(options.$wrap, { onStart: onStart, onMove: onMove, onTouchEnd: options.onTouchEnd, onEnd: onEnd, select: options.select }), tail);

return tail; } function wheel ($el, options) { var el = $el[0], lockFLAG, lastDirection, lastNow, tail = { prevent: {} };

el[ADD_EVENT_LISTENER] && el[ADD_EVENT_LISTENER](WHEEL, function (e) { var yDelta = e.wheelDeltaY || -1 * e.deltaY || 0, xDelta = e.wheelDeltaX || -1 * e.deltaX || 0, xWin = Math.abs(xDelta) > Math.abs(yDelta), direction = getDirectionSign(xDelta < 0), sameDirection = lastDirection === direction, now = $.now(), tooFast = now - lastNow < TOUCH_TIMEOUT;

lastDirection = direction;
lastNow = now;

if (!xWin || !tail.ok || tail.prevent[direction] && !lockFLAG) {
  return;
} else {
  stopEvent(e, true);
  if (lockFLAG && sameDirection && tooFast) {
    return;
  }
}

if (options.shift) {
  lockFLAG = true;
  clearTimeout(tail.t);
  tail.t = setTimeout(function () {
    lockFLAG = false;
  }, SCROLL_LOCK_TIMEOUT);
}

(options.onEnd || noop)(e, options.shift ? direction : xDelta);

}, false);

return tail; } jQuery.Fotorama = function ($fotorama, opts) { $HTML = $HTML || $('html'); $BODY = $BODY || $('body');

var that = this, stamp = $.now(), stampClass = _fotoramaClass + stamp, fotorama = $fotorama[0], data, dataFrameCount = 1, fotoramaData = $fotorama.data(), size,

  $style = $('<style></style>'),

  $anchor = $(div(hiddenClass)),
  $wrap = $(div(wrapClass)),
  $stage = $(div(stageClass)).appendTo($wrap),
  stage = $stage[0],

  $stageShaft = $(div(stageShaftClass)).appendTo($stage),
  $stageFrame = $(),
  $arrPrev = $(div(arrClass + ' ' + arrPrevClass/*, div(arrArrClass)*/)),
  $arrNext = $(div(arrClass + ' ' + arrNextClass/*, div(arrArrClass)*/)),
  $arrs = $arrPrev.add($arrNext).appendTo($stage),
  $navWrap = $(div(navWrapClass)),
  $nav = $(div(navClass)).appendTo($navWrap),
  $navShaft = $(div(navShaftClass)).appendTo($nav),
  $navFrame,
  $navDotFrame = $(),
  $navThumbFrame = $(),

  stageShaftData = $stageShaft.data(),
  navShaftData = $navShaft.data(),

  $thumbBorder = $(div(thumbBorderClass)).appendTo($navShaft),

  $fullscreenIcon = $(div(fullscreenIconClass)),
  fullscreenIcon = $fullscreenIcon[0],
  $videoPlay = $(div(videoPlayClass)),
  $videoClose = $(div(videoCloseClass)).appendTo($stage),
  videoClose = $videoClose[0],

  spinner,
  $spinner = $(div(spinnerClass)),

  $videoPlaying,

  activeIndex = false,
  activeFrame,
  activeIndexes,
  repositionIndex,
  dirtyIndex,
  lastActiveIndex,
  prevIndex,
  nextIndex,
  startIndex,

  o_loop,
  o_nav,
  o_navThumbs,
  o_navTop,
  o_allowFullScreen,
  o_nativeFullScreen,
  o_fade,
  o_thumbSide,
  o_thumbSide2,
  o_transitionDuration,
  o_transition,
  o_shadows,
  o_rtl,
  o_keyboard,
  lastOptions = {},

  measures = {},
  measuresSetFLAG,

  stageShaftTouchTail = {},
  stageWheelTail = {},
  navShaftTouchTail = {},
  navWheelTail = {},

  scrollTop,
  scrollLeft,

  showedFLAG,
  pausedAutoplayFLAG,
  stoppedAutoplayFLAG,

  toDeactivate = {},
  toDetach = {},

  measuresStash,

  touchedFLAG,

  hoverFLAG,

  navFrameKey,
  stageLeft = 0,

  fadeStack = [];

$wrap[STAGE_FRAME_KEY] = $(div(stageFrameClass)); $wrap[NAV_THUMB_FRAME_KEY] = $(div(navFrameClass + ' ' + navFrameThumbClass, div(thumbClass))); $wrap[NAV_DOT_FRAME_KEY] = $(div(navFrameClass + ' ' + navFrameDotClass, div(dotClass)));

toDeactivate[STAGE_FRAME_KEY] = []; toDeactivate[NAV_THUMB_FRAME_KEY] = []; toDeactivate[NAV_DOT_FRAME_KEY] = []; toDetach[STAGE_FRAME_KEY] = {};

$wrap.addClass(CSS3 ? wrapCss3Class : wrapCss2Class);

fotoramaData.fotorama = this;

function checkForVideo () { $.each(data, function (i, dataFrame) { if (!dataFrame.i) { dataFrame.i = dataFrameCount++; var video = findVideoId(dataFrame.video, true); if (video) { var thumbs = {}; dataFrame.video = video; if (!dataFrame.img && !dataFrame.thumb) { thumbs = getVideoThumbs(dataFrame, data, that); } else { dataFrame.thumbsReady = true; } updateData(data, {img: thumbs.img, thumb: thumbs.thumb}, dataFrame.i, that); } } }); }

function allowKey (key) { return o_keyboard[key] || that.fullScreen; }

function bindGlobalEvents (FLAG) { var keydownCommon = 'keydown.' + _fotoramaClass, keydownLocal = 'keydown.' + _fotoramaClass + stamp, resizeLocal = 'resize.' + _fotoramaClass + stamp;

if (FLAG) {
  $DOCUMENT
      .on(keydownLocal, function (e) {
        var catched,
            index;

        if ($videoPlaying && e.keyCode === 27) {
          catched = true;
          unloadVideo($videoPlaying, true, true);
        } else if (that.fullScreen || (opts.keyboard && !that.index)) {
          if (e.keyCode === 27) {
            catched = true;
            that.cancelFullScreen();
          } else if ((e.shiftKey && e.keyCode === 32 && allowKey('space')) || (e.keyCode === 37 && allowKey('left')) || (e.keyCode === 38 && allowKey('up'))) {
            index = '<';
          } else if ((e.keyCode === 32 && allowKey('space')) || (e.keyCode === 39 && allowKey('right')) || (e.keyCode === 40 && allowKey('down'))) {
            index = '>';
          } else if (e.keyCode === 36 && allowKey('home')) {
            index = '<<';
          } else if (e.keyCode === 35 && allowKey('end')) {
            index = '>>';
          }
        }

        (catched || index) && stopEvent(e);
        index && that.show({index: index, slow: e.altKey, user: true});
      });

  if (!that.index) {
    $DOCUMENT
        .off(keydownCommon)
        .on(keydownCommon, 'textarea, input, select', function (e) {
          !$BODY.hasClass(_fullscreenClass) && e.stopPropagation();
        });
  }

  $WINDOW.on(resizeLocal, that.resize);
} else {
  $DOCUMENT.off(keydownLocal);
  $WINDOW.off(resizeLocal);
}

}

function appendElements (FLAG) { if (FLAG === appendElements.f) return;

if (FLAG) {
  $fotorama
      .html('')
      .addClass(_fotoramaClass + ' ' + stampClass)
      .append($wrap)
      .before($style)
      .before($anchor);

  addInstance(that);
} else {
  $wrap.detach();
  $style.detach();
  $anchor.detach();
  $fotorama
      .html(fotoramaData.urtext)
      .removeClass(stampClass);

  hideInstance(that);
}

bindGlobalEvents(FLAG);
appendElements.f = FLAG;

}

function setData () { data = that.data = data || clone(opts.data) || getDataFromHtml($fotorama); size = that.size = data.length;

!ready.ok && opts.shuffle && shuffle(data);

checkForVideo();

activeIndex = limitIndex(activeIndex);

size && appendElements(true);

}

function stageNoMove () { var _noMove = size < 2 || $videoPlaying; stageShaftTouchTail.noMove = _noMove || o_fade; stageShaftTouchTail.noSwipe = _noMove || !opts.swipe;

!o_transition && $stageShaft.toggleClass(grabClass, !stageShaftTouchTail.noMove && !stageShaftTouchTail.noSwipe);
MS_POINTER && $wrap.toggleClass(wrapPanYClass, !stageShaftTouchTail.noSwipe);

}

function setAutoplayInterval (interval) { if (interval === true) interval = ''; opts.autoplay = Math.max(+interval || AUTOPLAY_INTERVAL, o_transitionDuration * 1.5); }

/**

X4 commented 10 years ago

@yhwhdesign

how to change the number that is added to the ‘element.style’ tag that controls the ‘left’ tag of previous and next images you can take a look at https://github.com/artpolikarpov/fotorama/issues/208#issuecomment-38338738 on howto hide/show the captions. Just add another element (either via javascript or html) and style it via css, like the close/arrow buttons, to give it an icon.

how to change the number that is added to the ‘element.style’ tag t No idea, what you mean. how to add a new div container underneath the container that holds the thumbnails like this: http://fotorama.io/customize/html/ just apply position: absolute and the position you want to the element with css.

  • Final.. Is there a way to add in the option to buy an image, like the one that is active? Same as above, just add an html anchor or button an style it.
yhwhdesign commented 10 years ago

Thank you again. for your time. I hope that I do not have to ask you questions again.

I am almost willing to send you a graphical mock up of what I am needing and seeing how much you would charge to do it so it is done right.

My javascript knowledge isn’t very good especially when trying to add elements dynamically, and using javascript to create movement. Im trying to learn, but jumping into a project like this and trying to add elements and customize a real professionals work, lol… I have a tough road ahead.

Again, I thank you for your time, it is very valuable to me! Jasen

On Apr 8, 2014, at 5:49 PM, Ferhat notifications@github.com wrote:

@yhwhdesign

how to change the number that is added to the ‘element.style’ tag that controls the ‘left’ tag of previous and next images you can take a look at #208 (comment) on howto hide/show the captions. Just add another element (either via javascript or html) and style it via css, like the close/arrow buttons, to give it an icon.

how to change the number that is added to the ‘element.style’ tag t No idea, what you mean. how to add a new div container underneath the container that holds the thumbnails like this: http://fotorama.io/customize/html/ just apply position: absolute and the position you want to the element with css.

Final.. Is there a way to add in the option to buy an image, like the one that is active? Same as above, just add an html anchor or button an style it. — Reply to this email directly or view it on GitHub.

yhwhdesign commented 10 years ago

The element left issue on the previous and next images…

using firefox / chrome you can inspect the elements and when you do this, you find that in the div tag or in the code for the previous and next images it shows some css tags, but then there is an added in ‘style’ tag where the code ‘left: -1000px;’ is added for the previous image, if I change this to something like -885px and the next image repeats this except it is a positive number…s o I would change it to something like ‘895px’ and it brings those images into view and puts them right next to the active centered image with about 5px gap between the two.

This style tag is not found obviously in the css file.. it is being added via javascript and the numbers given to the ‘left’ tag is also javascript and it is going off of the width of the stage thus giving you a number to push it out of view of the stage. I think.

Anyway, I will go through the code and info you sent…thank you again! I hope that I can get this figured out so I do not have to bother you anymore… the help is priceless!!

On Apr 8, 2014, at 5:49 PM, Ferhat notifications@github.com wrote:

@yhwhdesign

how to change the number that is added to the ‘element.style’ tag that controls the ‘left’ tag of previous and next images you can take a look at #208 (comment) on howto hide/show the captions. Just add another element (either via javascript or html) and style it via css, like the close/arrow buttons, to give it an icon.

how to change the number that is added to the ‘element.style’ tag t No idea, what you mean. how to add a new div container underneath the container that holds the thumbnails like this: http://fotorama.io/customize/html/ just apply position: absolute and the position you want to the element with css.

Final.. Is there a way to add in the option to buy an image, like the one that is active? Same as above, just add an html anchor or button an style it. — Reply to this email directly or view it on GitHub.