artpolikarpov / fotorama Goto Github PK

Протупил

In iOS Simulator from xCode I have noticed that sometimes scrolling not happens when I am scrolling document vertically and swipe gesture starts on Fotorama. Neither document scrolling, nor gallery swiping happens in that case. I have made a video to demonstrate this: http://db.tt/JOMwG5Pg. Sometimes document scrolling works (as expected). Not sure if it is a bug or a feature?

This is a really nice slider. It has the perfect combination of functions, and i have been looking for something like this for ages!

One question (i am not very skilled at javascript):
Can i in some way set the settings in for example the document ready for one or multiple sliders?
I am thinking that if i have five sliders on a page, it would be better to set the speed, size, etc in one place rather than inline like your examples.

Example:

$(document).ready(function() {

    // initialise several fotorama sliders here
    // settings, callbacks, events, etc

});

Thanks in advance, and keep up the good work!

Ps: It would be nice with an online build tool for non-node.js users like myself :)

Hi, nice gallery, thank you.

I noticed when I am clicking through many pictures in gallery using my mobile phone the gallery exists browser and I have to open up new browser.

How can I solve this?

Please email me for URL: [email protected]

Great plugin! I was wondering when you might be including your API docs? I am interested in callbacks for fotorama. I want to use Font awesome icons instead of the png for navigation/video and I am appending some code to do this:

 $('.fotorama__arr--next .fotorama__arr__arr').append('<i class="icon-chevron-sign-right icon-3x"></i>').addClass('shadow');
 $('.fotorama__arr--prev .fotorama__arr__arr').append('<i class="icon-chevron-sign-left icon-3x"></i>').addClass('shadow');
$('.fotorama__fullscreen-icon').append('<i class="icon-resize-full icon-2x"></i>').addClass('shadow');
 $('.fotorama__video-play').append('<i class="icon-youtube-play icon-4x"></i>').addClass('shadow');
 $('.fotorama__video-close').append('<i class="icon-remove-circle icon-3x"></i>').addClass('shadow');

 It works well for everything but the video play icon. I find I lose the video play icon unless the image for the video is showing and after calling full screen. I'm thinking adding it as a callback will work better in this case.
BTW, it works well with HTML5 video as well.
Demo with font icons

hi me again. very awsome script! some bug I found in version 4.1.17 which was not ther ein 4.1.16

on release 17 vs 16 there is a slide issue if you scroll to the right. The issue is with the js file.

example screenshots here

The current model of image appending/detaching still retarding on phones and tablets.

SCRIPT5007: Unable to get value of the property 'i': object is null or undefined
fotorama.js?mqw9c0, line 1372 character 7

Seems to checkForVideo() function, under dataFrame.i) doesn't seem to like IE8:

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);
        }
      }
    });
  }

I've started using Fotoramajs 4. I had some experience with this plugin's previous versions, but I guess API of the forth version is different. There are some really useful examples with data attributes, but there are not enough of them. For example I need to change thumbnails border width and color, but I may only set the height of thumbnails with "data-thumb-height". I'm not an advanced developer to check the original code and figure it out myself. So far I've solved my needed with CSS, but I think it's not the correct way of doing things. How can I find api according to only the source code?

В принципе, как вставить блок сверху или снизу, проблем не возникает

$(".fotorama--fullscreen .fotorama__wrap").append('<div class-="newblock"></div>');
$(".fotorama--fullscreen .fotorama__wrap").prepend('<div class-="newblock"></div>.');

Но вот с тем, как заставить блок .fotorama__stage учитывать высоту .newblock (высота блока, будет скорее всего фиксирована), ни как не получается разобраться

Наверно, тоже к этому вопросу относится. Как увеличить отступ в fullscreen режиме от превью .fotorama__nav-wrap до фрейма .fotorama__stage с фотографией, и отступы между превьюшками .fotorama__thumb
Через CSS не получилось сделать.

При стандартном использование data-allow-full-screen="true", если фоторама расположена в блоке с position:relative , проблем не возникает. Фоторама в полноэкранном режиме располагается перед </body>. пример

Но когда используются события fullscreenenter пример. Фоторама при переходе в полноэкранный режим, располагается в том же div, из которого запускается, и не может выйти за предела родительского тега с position:relativeю

При использовании data-allow-full-screen="native", всё нормально, фоторама снова перед </body>

In my case, Fotorama 4 is used.

I have 4 images in the set.
In Samsung's Android default browsers, first 2 images are shown correctly when slide to the right, but the 3rd & 4th images do not show. Mobile Chrome is working fine.

Is it related to pre-load functions? Is there any way to stop preloading the images?

Tested device:
Samsung Galaxy Note 2
Samsung Galaxy S2

See http://fotoramajs.com/use/code/thumbs-position/
I do miss that in v4 :-)
Is this coming back?

Нужно было отобразить описание к изображению (caption), вне фоторамы.
Сделал через события таким образом - http://jsfiddle.net/_bender_/tTjAd/

На сколько это правильно, возможно есть более простое стандартное решение?

I am currently trying to set up fotorama together with an image zooming tool.

While doing that I am running into the issue that I could not find an event that tells me exactly when fotorama puts a new image in place.

I.e., I am looking for an event to learn about the new image put in place by fotorama and a way I can get hold of it to hook it up to the image zooming tool. I have tried the fotorama:show event but it seems to be fired too early when jQuery('.fotorama__stage__frame.fotorama__active img') still returns the old image.

It also seems that on initialisation the img may not be in place yet and I couldn’t figure out so far how to learn exactly when an image is displayed along with a way to get hold of it.

Hi Artem,

Is there any way to set an alignment for each image?, something like:

<div class="fotorama" data-fit="cover">
  <img src="1.jpg">
  <img src="2.jpg" data-fit="contain" data-align="left">
  <img src="3.jpg" data-align="bottom-left">
</div>

Possibilities: top, left, bottom, right, top-left, top-right, bottom-left, bottom-right, center, or: T, L, B, R, TL, TR, BL, BR, C

This feature could be powerful allowing to fotorama many possibilities depending of each image and its fit mode.

Regards

Hi there.

When I'm trying to set transition to 'crossfade' or to 'dissolve' I get such error in the console (Chrome 28, FF 21).

I have a default html layout:

<div class="fotorama" data-transition="crossfade">
  <a href="/path/to/img"></a>
  <a href="/path/to/img"></a>
  <!-- ... -->
</div>

You can test it here. http://fotorama.io/use/video/

Mac version of Firefox 22 works.

@mistakster wrote:

Actually, it remove empty div from document and sometimes return undefined for data('fotorama'). Please, take a look at console while running http://jsfiddle.net/k6dnC/

Hi,

just wanted to mention that when using a mix of images and html elements using the dissolve transition causes a "non-fading transition" between an image and the html.
Ie. If you switch from an image to an html element, it snaps not fades.

This may not be a bug (if previous image is fades out only) but i still wanted to make you aware of this.

This slider is one of the smoothest functional slider out there :)

arrows: false не работает.

Hello!

I'm using fotorama to display HTML slides.
Slide has transparent background, and the large thumb is visible under the slide.
What for is it? Is it possible to remove or hide it?

Hi,

When using Fotorama4 with Foundation 3 (maybe 4, haven't tested) there is an issue with the box-sizing.

Foundation 3 uses the following rule to apply border-box:
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

However this creates an issue with fotorama4 as fotorama4 expects content-box for the box sizing, and the final thumbnail will not load, and there is no spacing between the thumbnails as well as a couple of other weird glitches.

I've created an example here:
http://jsfiddle.net/qswXV/5/

The solution is to do the following:

.fotorama-demo * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }

Where fotorama-demo is your fotorama div.

Example:
http://jsfiddle.net/YfuXr/1/

Not sure if anyone else has come across this in their testing with CSS Frameworks.

When you use scrollyeah and fotorama on the same page, and scroll the scrollyeah, Fotorama won't change slides.

Demo:
http://jsfiddle.net/hh58G/1/

Is there a way to keep the captions visible without having your mouse over the image? This is needed badly in my opinion. Especially when the slideshow is set to autoplay. Thanks!

Hi, great project fotorama :)

Of course, for an admin system like me or a programmer like you, it's "easy" to implement.

But I am building a website with someone and she does not have those qualifications :)

I saw the plugin (0.5) by Anna Shishlyakova for the version 3 of Fotorama witch is exactly what is needed.

• Is there a big difference between the version 3 and 4 of Fotorama?
• Do you know if Anna will make a plugin for version 4 ? or how can we reach her?

Depending on when you will look at this email :) the website will be www.marimage.ca or www.photographesmariages.ca

Thanks.

Hi!
I have downloaded the zip file "fotorama-4.1.12.zip" from http://fotorama.io/ homepage and gallery does not work correctly in chrome (version version 27.0.1453.116 m) - pictures do not change when you click the button.

Тестовый пример: http://webdev.brnv.ru/labs/fotorama/test/thumbnails-2.html

Сборка с коммита 47e8168

На второй фотораме навигатор работает, а на первой падает с ошибкой

   Uncaught TypeError: Cannot call method 'addClass' of undefined 
   fotorama.js:1964

Если фоторама на странице одна — всё хорошо. http://webdev.brnv.ru/labs/fotorama/test/thumbnails.html

При удалении галереи через API (fotorama.destroy()) на странице остаются некоторые блоки, сгенерированные скриптом (.fotorama--hidden, .fotorama__load и style). Так же неплохо бы автоматически вызвать метод fotorama.cancelFullScreen() на случай если гелерея в этот момент находится в полноэкранном режиме

Hi,

Is it possible to combine thumbnails navigation when the slides are using background images:

<article data-img="{$imgsrc}" data-thumb="{$imgsrc2}">

It used to work on the previous version but it doesn't anymore, throws the following error:

Uncaught TypeError: Cannot call method 'style' of undefined

Thanks.

I can't seem to make any links clickable within the data-caption element. They display properly, and if they're far enough from the edge of an image, they are clickable. Unfortunately, they just don't do anything. Is there any way to make them clickable, and is there any way to make them not fire the image rotation? Am I missing something obvious?

Thanks.

I get the following error with adding any data-transition:

TypeError: a.data(...) is null

Images do no load.

Здравствуйте Артём.

Отличная галерея ! Спасибо Вам !
Хотелось бы узнать как можно добавить кнопки Play/Stop и так же если возможно счетчик картинок (3/15)

Ну и если уж совсем ;), то можно ли добавить кнопку для открытия картинки в lightbox , например в prettyphoto - http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

I'm attempting to show a loading animation while images download and fotorama gets all set up and ready to go.

I'm applying some simple CSS to hide fotorama while it loads:

.fotorama {
display: none
}

I'm then trying to use fotorama's ready event to hide the loading animation and display fotorama:

$('.fotorama').on('fotorama:ready', function (e, fotorama, extra) {
       $('#loaderImage').css('display', 'none');
       $('.fotorama').css('display', 'block');
});

Unfortunately this doesn't work. I've noticed that if I remove the CSS that hides fotorama then the ready event fires just fine. It would seem to me, then, that the ready event does not fire if fotorama is not displaying. I'm not sure if this is a bug or by design.

Am I going about this the correct way? How can I hide fotorama from view while the images download and then display it once it's ready?

Приветствую!
Спасибо за великолепную работу в первую очередь!

Такой вот вопрос - в примерах не встречал возможности расположения превью не в виде прокрутки, а в несколько строк, т.е. поточное расположение. Такая возможность вообще имеется?

Is it possible to hide thumbnails in fullscreen mode? I'm using the html slides.

also can you hide captions (fotorama__wrap--no-controls) be the default setting for touch devices

<div class="fotorama">
<a href="1.html"><img src="1.jpg" /></a>
<a href="2.html"><img src="2.jpg" /></a>
<a href="3.html"><img src="3.jpg" /></a>
</div>

Остаются только картинки, ссылок нет. Так и должно быть?

Привет!
Если перейти например с первого изображения на пятое через "кружки" при data-transition="crossfade", сначала появится второе изображение а уже потом пятое.
Баг видно прямо из примера http://fotorama.io/use/transition/

Is it possible to change the amount of images that lazy load?

Thanks in advance!

very nice script! loving it!

if you use a different element than an img e.g. a div or article, then the hash tag does not pick up the ID name you assigned it. It will just list it as 1,2,3 etc

e.g.
works shows id name
div class="fotorama" data-hash="true" - >
img src="1.jpg" id="some-image">
img src="2.jpg" id="blabla">
a href="3.jpg" id="three">/a>
/ div>

does not show ID name
div class="fotorama" data-hash="true">
article data-img="1.jpg" id="some-image">/article>
div data-img="2.jpg" id="blabla">/div>
blockquote data-img="3.jpg" id="three">/blockquote>
/div>

При перелистывании слайда через превью (точки) видео не закрывается и при возвращении на него блок fotorama__video-play оказывается поверх проигрываемого видео и кнопка закрыть fotorama__video-close неактивна

if you run the slider as 100% x 100% to cover the whole browser. however if you then say data-nav="dots" or thumbs then it reduces the fotorama__img accordingly.

why not leave it the same as when data-nav is off, as when you want to change data-nav in css it becomes very difficult as the image will have a gap at the bottom

Uncaught TypeError: Cannot call method 'match' of null fotorama.js:4

google chrome 28.0.1500.72

how to fix it?

the last two days i worked on a website for an artist.

i need a slider like fotorama but want a border around the picture to have something like a passepartout.

that was more complicated than expected.

my solution until now:

.fotorama__stage {
    padding-bottom: 70px; 
}

.fotorama__img {
    border: 16px solid #e5dcd1;
}

but the image is still too far right.

could you implement that as a feature?

Hi,

I'm using Fotorama as a lightbox, as in the lightbox-2.html test file (see live example here ). Is it possible to obtain a dynamic resizing of the lightbox according to both the current image size and the body size, following these rules, by order of priority :

• Always keep the Fotorama size smaller than the browser viewport size (with a predefined fixed margin if possible), so that there is no overflow or scrollbar.
• Never enlarge a photo, but the shrinkage is allowed.
• Keep lightbox as large as possible while respecting the above rules.
• For now, it's quite similar to the fullscreen mode, except for the margin. But I also would like to keep the controls inside the photo (caption, arrows and close buttons). Something like this lightbox in fact.

Also I would like to be able to switch in native fullscreen mode from the lightbox mode.

I hope I'm clear enough, and that is not too difficult !

Using fotorama-4.1.13 and Chrome 27.0.1453.116 m, I get the following intermittent error:

Uncaught TypeError: Cannot read property '4' of null - fotorama.js:4.

As a result the photos load, but the little circles underneath them don't. Also, it doesn't auto-scroll, but the images do change if you click on them.

I've not been able to replicate the error with IE.

Great Plugin!!

I know that the API docs is not ready yet. but I'm wonder if you have any API method to control the fotorama plugin like next(), previous() or goto(index)?

Как-то было необходимо получать (передавать) позицию шахты превью во время прокрутки (не после завершения) приходилось перехватывать кучу jq функций. В текущей версии, я так понимаю этого тоже нет?

Возможные кейсы использования: строка прокрутки для превью или изображений, синхронизация 2 фоторам.

При установке 'transition': 'dissolve' или 'transition': 'crossfade' при клике на иконки навигации (не важно, тамбнейлы или кружочки) в консоль падает сообщение об ошибке: Uncaught TypeError: Cannot read property 'pageX' of undefined

Причина: в методе show() вызвывается функция onEnd(), из которой вызывается функция stageCursor() без параметров https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L881

Однако сигнатура функции stageCursor() предполагает наличие обязательного аргумента с объектом события https://github.com/artpolikarpov/fotorama/blob/master/src/js/fotorama.js#L1191 и его отсутствие вызывает ошибку.

Would it be possible for fotorama to use a list (ul/li) as the underlying DOM elements for the images? That should give better semantics to the HTML used.