use list as DOM? about fotorama HOT 2 CLOSED

Sure. You can use a ul>li layout, but you have to “translate” it for the fotorama.

List:

<ul class="fotorama" data-auto="false">
    <li><a href="1.jpg"><img src="1-thumb.jpg"></a></li>
    <li><a href="2.jpg"><img src="2-thumb.jpg"></a></li>
    <li><a href="3.jpg"><img src="3-thumb.jpg"></a></li>
</ul>

Attribute data-auto="false" is important and used to prevent auto initialization with this “wrong” layout.

Adapter:

$.fn.fotoramaListApapter = function () {
    this.each(function () {
        var html = '';

        $('> li', this).each(function () {
            html += $(this).html();
        });

        $(this).html(html);
    });
    return this;
};

Initialization through fotoramaListApapter():

$(function () {
    $('ul.fotorama')
        .fotoramaListApapter()
        .fotorama();
});

Fiddle: http://jsfiddle.net/artpolikarpov/AmsQC/embedded/html,js,result/

from fotorama.

Thanks a lot for the example Artem!

I didn’t manage to put all those pieces together myself.

from fotorama.