Thumnails и номера изображений

Question

Я использую FancyBox для отображения большого количества страниц, составляющих книгу. Я использую Fancybox, потому что, похоже, это единственная галерея, из которой вы пытались обработать изображения, большие, чем экран разумным образом.

Я использую миниатюры, так как хочу, чтобы я мог перескакивать через изображения, скажем от изображения 1 до изображения 30, не просматривая каждое изображение, но эскизы выглядят одинаково - есть ли способ быть способным для настройки миниатюры, чтобы просто показать номер изображения. Кроме того, потому что изображения очень большие, есть способ дать ему другой url для использования для миниатюры, чем изображение полного размера?

Спасибо заранее за любую помощь

Answer 1

Я имел эту просьбу и раньше, но, к сожалению, не существует способа сделать это «вне коробки», вы должны сделать это вручную.

Учитывая, что вы используете последнюю версию FancyBox (v2.0.5), выполните следующие действия:

1: сделайте копию файла jquery.fancybox-thumbs.js (helpers папку) и переименовать его с чем-то вроде jquery.fancybox-thumbs-NO-image.js , Мы будем изменять этот файл, сохраняя оригинал.

2: редактировать новый файл (jquery.fancybox-thumbs-NO-image.js) и найдите строку , где он говорит:

list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>'; 

и заменить эту строку с этим:

list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');">' + (n+1) + '</a></li>'; 

3: смотрите для линии где указано:

//Load each thumbnail 
$.each(F.group, function (i) { ... 

и закомментировать всю $.each() функции с помощью javascript multi-line comments syntax (например: /* $.each ... */) всего пути через линию +/-

сохранить и закрыть файл.

4: ссылка на этот файл в вашем HTML документе, как:

<script type="text/javascript" src="fancybox2.0.5/helpers/jquery.fancybox-thumbs-NO-image.js"></script> 

вместо исходного файла.

5: Для того, чтобы добавить стиль в ваши номера добавить объявление рядный CSS (после того, как вы загрузили все файлы FancyBox CSS), как:

<style type="text/css"> 
#fancybox-thumbs ul li a { 
    border: 0 none !important; 
    color: #fff !important; 
    line-height: 16px; 
    text-align: center; 
    text-decoration: none; 
} 
</style> 

6: JavaScript. Вы можете использовать предпочтительные параметры API. Просто обратите внимание на thumbs вариант, где я установить значение, которые соответствуют лучше размеру чисел (height таких же, как line-height в моем CSS инлайн декларации, например)

<script type="text/javascript"> 
$(document).ready(function() { 
$('.fancybox').fancybox({ 
    prevEffect : 'fade', 
    nextEffect : 'fade', 
    afterLoad : function() { 
    this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); 
    }, 
    helpers: { 
    title: { 
    type: 'inside' 
    }, 
    thumbs: { 
    width : 16, 
    height : 16 
    } 
    } 
}); // fancybox 
}); // ready 
</script> 

и вуаля !. See DEMO

ПРИМЕЧАНИЯ для Fancybox v2.0.6 (30 мая 2012 г.):

• Шаг № 2 выше, указывает на линии 49: Для FancyBox v2.0.6 должна быть линия 55.
• Шаг № 3 указывает на линии 55: Для версии 2.0.6 должна быть строка 62 полностью через линию 100 +/-.

Последующие версии могут снова перемещать номера строк, но в основном вы должны искать одинаковые куски информации.

Помните, что мы редактируем нашу собственную измененную версию файла jquery.fancybox-thumbs.js.