jquery fancybox add submit button image в заголовке

Question

Возможно ли использовать «Галерея изображений» JQuery Fancybox и поместить форму внутри «заголовка», или я прочитал в области HTML? Последнее, я изо всех сил пытаюсь понять.

Мне нужна галерея изображений, в которой я работаю, а также кнопку отправки под галереей в Fancybox - это как «добавить в корзину».

Я попытался сбросить свою кнопку отправки формы внутри # fancy-two div, но это не отображается. Я также пробовал играть с title = "", но не показывал.

Мой код:

<!-- image gallery type --> 
<div style="display: none;" id="fancy-two"> 

<a class="fancybox" href="images/1A_Pathophysiology_of_diabetes/Slide01.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet" src="images/Send_Me_Slides_Button.png" width="720" height="540" /></a> 

<a class="fancybox" href="3d-carousel-plus-fancybox/fancybox/img/2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"></a> 

<a class="fancybox" href="3d-carousel-plus-fancybox/fancybox/img/3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"></a> 

<a class="fancybox" href="3d-carousel-plus-fancybox/fancybox/img/4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"></a> 

</div> 

Вот мой код кнопки отправить:

<form class="add_product" action="" method="post"> 
<input type="hidden" value="1" name="product_id"> 

<button class="button orange_send_me_slides" name="add_product" type="submit"><img src="images/Send_Me_Slides_Button.png"/></button> 

</form> 

Ваша помощь ценится!

Dan

Update: Я просто заметил, что FancyBox две демки на своей странице, которые показывают, как это сделать, но я не»знаю, куда поместить этот код или как много. Я не могу заставить его работать :(

Use element instead of attribute

Add download link to the title

Любая помощь приветствуется!

Answer 1

Используя Use element instead of attribute пример, вы можете поместить свою форму в скрытом div как

<div id="title-1" class="hidden"> 
    <form class="add_product" action="" method="post"> 
     <input type="hidden" value="1" name="product_id" /> 
     <button class="button orange_send_me_slides" name="add_product" type="submit">add to cart</button> 
    </form> 
</div> 

Тогда используйте этот код

$(document).ready(function() { 
    $(".fancybox") 
     .attr('rel', 'gallery') // optional if you already have rel in your html 
     .fancybox({ 
     beforeLoad: function() { 
      var el, id = $(this.element).data('title-id'); 

      if (id) { 
       el = $('#' + id); 

       if (el.length) { 
        this.title = el.html(); 
       } 
      } 
     }, 
     helpers: { 
      title: { 
       type: "inside" 
      } 
     } 
    }); 
}); 

См раздвоенный JSFIDDLE