Fancybox: примеры использования — одиночное изображение.

В данном посте будут рассмотрен пример использования Fancybox 2: одиночное изображение.

Пример 1. Увеличения одиночного изображения. Посмотреть DEMO

Разместим на странице несколько изображений без возможности переключения между ними при просмотре во всплывающем окне

HTML код

<a id="single_1" href="1_b.jpg" title="Лес и солнце">
<img src="1_s.jpg" alt="" />
</a>
<a id="single_2" href="2_b.jpg" title="Речная гладь">
<img src="2_s.jpg" alt="" />
</a>
<a id="single_3" href="3_b.jpg" title="Это закат">
<img src="3_s.jpg" alt="" />
</a>
<a id="single_4" href="4_b.jpg" title="Эйфелева башня ♥">
<img src="4_s.jpg" alt="" />
</a>

</a>

</a>

</a>

</a>

JS код

$(document).ready(function() {

   $("#single_1").fancybox({
      helpers: {
         title : {
            type : 'float'
         }
      }
   });

   $("#single_2").fancybox({
      openEffect : 'elastic',
      loseEffect : 'elastic',

   helpers : {
      title : {
          type : 'inside'
      }
   }
});

$("#single_3").fancybox({
   openEffect : 'none',
   closeEffect : 'none',
   helpers : {
      title : {
         type : 'outside'
      }
   }
});

  $("#single_4").fancybox({
   helpers : {
      title : {
         type : 'over'
      }
   }
  });
});

$(document).ready(function() {

$("#single_1").fancybox({

helpers: {

title : {

type : 'float'

}

});

$("#single_2").fancybox({

openEffect : 'elastic',

loseEffect : 'elastic',

helpers : {

title : {

type : 'inside'

}

});

$("#single_3").fancybox({

openEffect : 'none',

closeEffect : 'none',

helpers : {

title : {

type : 'outside'

}

});

$("#single_4").fancybox({

helpers : {

title : {

type : 'over'

}

});

Как видим из html кода, каждой ссылке присвоен отдельный идентификатор "id='single_1'", "id='single_2'", "id='single_3'" и "id='single_4'".

В коде JS видим что по каждому идентификатору функция Fancybox вызывается отдельно, это нужно для того что показать 4 различных типа размещения подписи к картинке float, inside, outside, over. В примере под каждой картинкой указано какой тип размещения описания применен к картинке.

Более подробно это будет описано в документации в описании HELPERS чуть позже, сейчас ссылка не активна.

Свою благодарность автору статьи вы можете выразить просто кликнув в нужном месте на странице 🙂