Как добавить лайтбокс, чтобы опубликовать миниатюру на блоггере - PullRequest
Новая
       39

Как добавить лайтбокс, чтобы опубликовать миниатюру на блоггере

0 голосов
/ 02 марта 2020

Я пытаюсь создать портфолио на BlogSpot здесь https://www.tatahuy.com/, поскольку вы можете видеть, что миниатюра каждого сообщения не ссылается на его сообщение, я хочу, чтобы миниатюра полностью открылась в лайтбокс, когда я нажимаю на него ... я был так близок к этому, используя этот код лайтбокса http://fancyapps.com/fancybox/3/

хитрость здесь: я пытаюсь интегрировать код изображения fancybox 

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>

с кодом миниатюры в моем шаблоне 

              <article class='post col-md-6'>
                <div class='thumbnails'>

                  <b:if cond='data:post.firstImageUrl'>
                    &lt;div class=&quot;thumb-img&quot; style=&quot;background:url(&#39;<data:post.firstImageUrl/>&#39;);&quot;&gt;
                    <b:else/>
                    &lt;div class=&quot;thumb-img&quot; style=&quot;background:url(&#39;https://4.bp.blogspot.com/-wPwjv7-YYGY/Wc98wlDT8qI/AAAAAAAAAEE/mH8YkPl8qJAH9FMuFKcShQvXXYMmVyrIgCLcBGAs/s1600/notfound.png&#39;);background-color:#000&quot;&gt;
                  </b:if>

                  <div class='mcc'>

                  </div>

                  &lt;/div&gt;

                </div>
              </article>

например, я попытался сделать так, чтобы это выглядело так: 

&lt;div data-fancybox="gallery" class=&quot;thumb-img&quot; style=&quot;background:url(&#39;<data:post.firstImageUrl/>&#39;);&quot;&gt;

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

...