Fotorama 4 API? about fotorama HOT 14 CLOSED

API docs are on the way. There are a few examples, where you can see some of the special Fotorama events and methods in action:

• Start & stop button
• Events example
• List of events
• Next, previous and goto API methods
• Stop fotorama at the last image

Back to your question: CSS is the better way to change thumbnails border width and color. I am not planning to add options or methods to change thumbs border.

from fotorama.

Is there a way to load JSON data into Fotorama 4 like it was possible for Fotorama 3?

Really liking Fotorama4, started playing around with Fotorama 3 when 4 was released, which is nice.

from fotorama.

Dear @joshuataylor, sure.

Take some empty div:

<div id="gallery"></div>

And then:

// Initialize fotorama in it
var $gallery = $('#gallery').fotorama({nav: 'thumbs'}),
    // Get access to the API
    fotorama = $gallery.data('fotorama');

// Load photos
fotorama.load([
  {img: '1.jpg', thumb: '1-thumb.jpg'},
  {img: '2.jpg', thumb: '2-thumb.jpg'},
  {img: '3.jpg', thumb: '3-thumb.jpg'}
]);

The complete image object may look like so:

{
  img: '1.jpg',
  thumb: '1-thumb.jpg', // if you are using the `nav:'thumbs'` option
  full: '1-full.jpg', // separate image for the fullscreen mode
  id: 'one', // custom anchor, used with the `hash:true` option
  fit: 'cover' // override the global fit option
}

from fotorama.

{
  img: '1.jpg',
  thumb: '1-thumb.jpg', // if you are using the `nav:'thumbs'` option
  full: '1-full.jpg', // separate image for the fullscreen mode
  id: 'one', // custom anchor, used with the `hash:true` option
  fit: 'cover' // override the global fit option
}

если это полный список, как передать caption и html ?

from fotorama.

Попробуйте:

{
  caption: 'Good caption'
  html: $(el) // or '<div>123</div>'
}

from fotorama.

Спасибо!

from fotorama.

Take some empty div

As I see in code, If Fotorama is initialized on empty div then it destroy itself immediately. Is it an issue or behavior “by design”?

from fotorama.

@mistakster, it is by design, fotorama.load() will revive the instance.

from fotorama.

@artpolikarpov, 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/

from fotorama.

@mistakster, let’s continue here: #42.

from fotorama.

@artpolikarpov how can I add start & stop button on fullscreen mode? Thanks in advance.

from fotorama.

@samu1241 what is particularly difficult?

from fotorama.

Hello, Artem!
Thank you for your great work and sharing it with the community.

Can you, please, give me an advice on one thing.
I'm using Fotorama Wordpress plugin and I would like to achieve the same behaviour as you're showing here - http://fotorama.io/examples/events.html - a gallery with an images counter instead of the dots.

What would you say is the best way to do this?

from fotorama.

Found a solution.
Added the following code to fotorama-wp.js:

    $('.fotorama--wp')      
        .fotoramaWPApapter()

        // what I added starts here
        .on('fotorama:ready', function (e, fotorama, direct) {
            $(this).prepend("<mark class='position_indicator'></mark>");
            $(this).find('.position_indicator').text((fotorama.activeIndex + 1)
                        + '/' + fotorama.size);
        })      
        .on('fotorama:show', function (e, fotorama, direct) {
                $(this).find('.position_indicator').text((fotorama.activeIndex + 1)
                        + '/' + fotorama.size);
        })
        // what I added ends here

        .fotorama();

This also works with several Fotoramas on a page.

from fotorama.