Нажмите, чтобы увеличить на tumblr

Question

У меня есть блог tumblr, на котором я публикую короткие веб-статьи. Я хочу, чтобы, когда я отправляю несколько страниц в одном сообщении, они кажутся маленькими, но когда я нажимаю на него, он увеличивается, и вы можете просматривать комикс.

Я хотел бы иметь что-то похожее на this.

Как я могу настроить его?

Answer 1

Вы можете достичь этого путем внедрения плагина Pirobox в теме: http://www.pirolab.it/pirobox/

Вам будет необходимо изменить код фотосет в вашей теме, чтобы что-то вроде этого:

{block:Photoset} 
    <div class="photo"> 
     {block:Photos} 
<a rel="gallery" class="pirobox_gall" href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a> 
     {/block:Photos} 
      </div> 
    {/block:Photoset} 

И убедитесь, что вы также отрегулировали фото-стол, чтобы они также открылись в Pirobox при нажатии.

{block:Photo} 
    <div class="photo">      
<a rel="single" class="pirobox" href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a> 
     </div> 

    <div class="caption"> 
     {Caption} 
      </div> 
     {/block:Photo} 

Добавить ссылку на Pirobox файл в расслоение плотной «голове» вашей темы.

<script type="text/javascript" src="http://static.tumblr.com/ajtokgb/DfDluuzg8/pirobox_extended.js"></script> 

Добавьте это перед «головой» или, предпочтительно, в «тело» рядом с другими сценариями.

<script type="text/javascript"> 
$(document).ready(function() { 
$().piroBox_ext({ 
piro_speed : 700, 
bg_alpha : 0.5, 
piro_scroll : true // pirobox always positioned at the center of the page 
}); 
}); 
</script> 

И, конечно же, вам нужно будет стилизовать его с помощью CSS. Вы также можете посмотреть «плагин fancybox», который делает что-то подобное.

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

Примечание: этот метод будет работать только с фото-сообщениями. Каждая тема отличается, вам нужно будет настроить код в соответствии с вашей темой.