Cliquez pour agrandir on tumblr

Question

J'ai un blog tumblr sur lequel je poste de courtes histoires de webcomic. Je veux que lorsque je poste quelques pages dans un seul post, ils apparaissent petits, mais quand je clique dessus, il agrandit et on peut parcourir la bande dessinée.

Je voudrais avoir quelque chose de similaire à this.

Comment puis-je le configurer?

Answer 1

Vous pouvez y parvenir en mettant en œuvre le plugin Pirobox dans votre thème: http://www.pirolab.it/pirobox/

Vous devrez alors modifier le code photoset dans votre thème à quelque chose comme ceci:

{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} 

Et assurez-vous également que vous ajustez le bloc de photo-poste afin qu'ils ouvrent également dans Pirobox lorsque vous cliquez dessus.

{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} 

Ajouter un lien vers le fichier du Pirobox dans la « tête » de votre thème. Ajoutez ceci avant la "tête" ou de préférence dans la section "body" près de vos autres scripts.

<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> 

Et vous aurez besoin de le styliser avec CSS bien sûr. Vous pouvez également regarder dans le "plugin fancybox" qui fait quelque chose de similaire.

Maintenant, lorsque les gens cliquent sur une photo d'un de vos messages, une version agrandie de l'image s'ouvrira et ils seront en mesure de parcourir les images de ce poste spécifique.

Remarque: Cette méthode ne fonctionne qu'avec les photos. Chaque thème est différent, vous devrez ajuster le code en fonction de votre thème.