Заменить содержимое добавленного div в Fancybox

Question

Я создаю галерею изображений веб-приложения с помощью FancyBox.Прямо сейчас я добавляю пользовательский div во всплывающее окно (изображение), в котором мне нужно разместить ссылки на изображения.

Как я могу заменять содержимое инструментов div каждый раз, когда я нажимаю рядом с другим изображением?Или еще лучше, возможно ли добавить этот div из всплывающего окна?

Это мой код:

$(".iframe").fancybox ({

afterShow: function () {

var toolbar = '<div id="tools">LINKS COME HERE</div>';

$(".fancybox-inner").append(toolbar);

},

maxWidth    : 1200,

maxHeight   : 550,

width       : '90%',

height      : '90%',

autoSize    : false,

closeBtn  : false,

openEffect  : 'none',

closeEffect : 'none',

nextEffect: 'none',

prevEffect: 'none',

padding: 0,

scrolling: 'no'

});

Answer 1

Я думаю, что вы можете создать контент (из div, который будет добавлен) для каждого изображения в отдельном (скрытом) разделе вашего документа, например

<div id="appendContent" style="display: none;">
 <div>content with links to be appended to the first image</div>
 <div>content with links to be appended to the second image</div>
 <div>content with links to be appended to the third image</div>
 ... etc.
</div>

Структура выше предполагает, что у вас должно быть одинаковое количество изображений для каждого div в вашей галерее, например:

<a href="image01.jpg" class="fancybox" rel="gallery">image 01</a>
<a href="image02.jpg" class="fancybox" rel="gallery">image 02</a>
<a href="image03.jpg" class="fancybox" rel="gallery">image 03</a>
etc.

Кроме того, вы можете создать селектор CSS для добавленной div в вашей таблице стилей CSS, а не использовать метод .css() (как предложено в вашем другом вопросе), например:

#tools {
 position: absolute; 
 z-index: 99999;
 bottom: 0px;
 height: 20px;
 border: 1px solid #ccc;
 background: #fff;
 width: 100%;
}

... или необходимые настройки стиля.

Затем извлеките содержимое каждого div и добавьте его динамически к соответствующему изображению при навигации по галерее.

используя опцию обратного вызова afterShow, вы можете сделать:

$(document).ready(function() {
 $(".fancybox").fancybox({
  afterShow: function(){
   var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>";
   $(".fancybox-inner").append(toolbar);
  }
 }); // fancybox
}); // ready