Как загрузить галерею в Fancybox с названием, которое не изменяется?

Question

Итак, в основном, я играю в Fancy box, и в основном, просто хочу, чтобы заголовок оставался неизменным для всех изображений в галерее, которая загружается. Да, я могу просто сохранить это как заголовок для всех изображений, однако при изменении между изображениями заголовок загорается и исчезает, как изображение. В принципе, я не хочу, чтобы заголовок исчезал здесь, я просто хочу, чтобы изображение замирало. Потому что Название всегда одно и то же.

Вот скрипка, которая показывает мою текущую проблему здесь с Названием галереи изображений FancyBox:

http://jsfiddle.net/cce18389/3/

На всех изображения названия никогда не изменится. Поскольку заголовок отображает имя галереи изображений (на данный момент он просто заполнен фиктивным контентом).

Я подумал о том, как включить HTML также в галерею изображений fancybox 2.1, однако я тоже не могу это сделать, глядя на эту ссылку: http://jsfiddle.net/svsdx/, который вместо этого добавляет контент в div, а не фотографию как я хотел бы сделать.

Вот код, как у меня сейчас:

$(document).ready(function($) { 
var galleryTitle = $('#galleryTitleHTML').html(); 

    $('a.photogallery').fancybox({ 
     wrapCSS: 'fancy-gallery', 
     openEffect: 'fade', 
     closeEffect: 'fade', 
     title: galleryTitle, 
     tpl : { 
      wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div>' 
     }, 
     helpers : { 
      overlay: { 
       css: {'background': 'rgba(0,0,0,0.8)' } 
      }, 
      title: { 
       type: 'outside', 
       position: 'top' 
      }, 
      thumbs : { 
       width: 50, 
       height: 50 
      } 
     } 
    }); 

    $('.open-photo-gallery').click(function(e) { 
     e.preventDefault(); 
     var galleryImagesTotal = $('a.photogallery').length, 
      eqToLoad = Math.abs(Math.floor(galleryImagesTotal/2)); 

     $('a.photogallery:eq(' + eqToLoad + ')').click(); 
    }); 
}); 

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

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

В любом случае, чтобы это сделать?

Answer 1

Единственный способ, я вижу, что вы можете это сделать, добавьте title к накладному окну fancybox . Вам может понадобиться установить некоторые стили для title как:

.galleryTitle{ 
    z-index: 9000; 
    color: #fff; 
    width: 98%; 
    margin: 5px auto; 
    text-align: center; 
} 

Затем в коде FancyBox вам нужно добавить по крайней мере, следующее:

1). Флаг для проверки, если title уже прилагается к FancyBox наложения

var addedTitle = false; 

2). beforeShow обратного вызова для добавления titleесли это не добавляется еще (это предотвращает title быть приложены несколько раз при просмотре галереи)

beforeShow: function() { 
    if (!addedTitle) { 
     $(".fancybox-overlay").append(galleryTitle) 
     addedTitle = true; 
    } 
} 

3). afterClose обратного вызова, чтобы сбросить значение флага

afterClose: function() { 
    addedTitle = false; 
} 

4). Опция FancyBox margin, чтобы освободить место для вышеприведенного title (это возможно, должны быть скорректированы в соответствии с вашими потребностями)

margin: [80, 20, 20, 20] // [top, right, bottom, left] 

Примечание: да, вам необходимо установить все поля.

См JSFIDDLE

PS. Обратите внимание, что для запуска галереи вам не нужно составлять целую кучу математических вычислений. Выбор первого элемента с помощью метода .eq() будет достаточно:

$('.open-photo-gallery').click(function() { 
    $('a.photogallery').eq(0).trigger("click"); 
});