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

Question

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

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

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

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) и найдите строку 49 , где написано:

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: найдите строку 55 , где написано

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

и закомментируйте все *Функция 1026 * с использованием синтаксиса многострочных комментариев javascript (например: /* $.each ... */) на протяжении всей строки 94 + / -

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

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>

Ивуаля !. См. DEMO

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

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

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

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