У меня есть следующий код, который отлично работает для загрузки изображений через массив объектов фрейма:
localFotorama1.load([
{img: '1.jpg', caption: '1st image'},
{img: '2.jpg', caption: '2nd image'},
{img: '3.jpg', caption: '3rd image'},
{img: '4.jpg', caption: '4th image'},
{img: '5.jpg', caption: '5th image'}
]);
Я использую его после полной инициализации страницы для загрузки изображений разного размера в зависимости от ширины экрана или окна. Я просто инициализирую Fotorama с небольшим пустым изображением в HTML, а затем динамически перезагружаю изображения позже.
Однако я считаю, что это сразу загрузит все изображения, так как они являются тегами img, поэтому, вероятно, это эквивалент этого:
<div class="fotorama">
<img src="1.jpg">
<img src="2.jpg">
</div>
Как мне выполнить эквивалент следующего в массиве объектов фрейма для отложенной загрузки на небольших устройствах ?:
<div class="fotorama">
<a href="1.jpg"></a>
<a href="2.jpg"></a>
</div>
Думаю, я должен использовать тег "html:" и пробовал по крайней мере два следующих метода:
localFotorama1.load([
{html: '<div><a href="1.jpg"></a></div>', caption: '1st image'},
...
]);
а также...
localFotorama1.load([
{html: '<a href="1.jpg"></a>', caption: '1st image'},
...
]);
... единственная разница между ними - это оболочка "<div></div>
" вокруг тегов "<a></a>
".
При любой из описанных выше попыток на страницу загрузится Fotorama с нужным количеством кадров изображений, но они будут пустыми ... с подписями, но без изображений.
Это единственная реальная подсказка, которую я должен продолжить, спецификацию объекта кадра со страницы инициализации :
{
img: '1.jpg',
thumb: '1-thumb.jpg',
full: '1-full.jpg', // Separate image for the fullscreen mode.
video: 'http://youtu.be/C3lWwBslWqg', // Youtube, Vimeo or custom iframe URL
id: 'one', // Custom anchor is used with the hash:true option.
caption: 'The first caption',
html: $('selector'), // ...or '<div>123</div>'. Custom HTML inside the frame.
fit: 'cover', // Override the global fit option.
any: 'Any data relative to the frame you want to store'
}
Какие-либо предложения?
Спасибо!