Detail fotogalerie

Z Developer Wiki

Formátovač photogallery_detail.xml upravuje zobrazení detailu fotografie.

• <rub:detail name=”name” /> - nadpis detailu fotografie, je použit popis fotografie
• <rub:rowcode previewSize=”3”> - výpis detailu fotografie
  • previewSize – parametr udává velikost detailu fotografie
    • 1 - 118x118px
    • 2 - 200x200px
    • 3 – 450x450px
• <rub:content reference=”rub:beforedetail” /> - vloží odkaz na předcházející fotografii, vzhled odkazu upravuje tag <rub:beforedetail>
• <rub:detail name=”before_link” /> - URL adresa odkazu na předchozí fotografii
  • <rub:const id=”photogalleryPreviousFoto” /> - titulek a text odkazu na předchozí fotografii
• <rub:const id=”photogallerySlideshowStart” /> - text odkazu pro spuštění promítání fotografií
• <rub:const id=”photogallerySlideshowStartTitle” /> - popisek odkazu pro spuštění promítání fotografií
• <rub:content reference=”rub:afterdetail” /> - vloží odkaz na následující fotografii, vzhled odkazu upravuje tag <rub:afterdetail>
  • <rub:detail name=”after_link” /> - URL adresa odkazu na další fotografii
  • <rub:const id=”photogalleryNextFoto” /> - titulek a text odkazu na další fotografii
• <rub:detail name=”link” /> - URL adresa odkazu na původní fotografii

Detail fotografie

• <rub:const id=”showInNewWindow” /> - popisek odkazu na plnou velikost fotografie • <rub:detail name=”preview” field=”file” /> - umístění souboru detailu fotografie • <rub:detail name=”preview” field=”width” /> - šířka detailu fotografie • <rub:detail name=”preview” field=”height” /> - výška detailu fotografie • <rub:detail name=”name” /> - popis fotografie • <rub:detail name=”tags” /> - vypíše štítky k fotografii; výpis štítků není možné upravit vlastním formátovacím blokem; ukázka výpisu štítků:

<h4>Tags:</h4>
<p class="tags">
<a rel="tag" href="http://demo.webnode.com/tags/test/">test</a>
		<span>|</span>
<a rel="tag" href="http://demo.webnode.com/tags/toyota/">toyota</a>
		<span>|</span>
<a rel="tag" href="http://demo.webnode.com/tags/car/">car</a>
</p>

• <rub:detail name=“bookmarks“ /> - vloží tlačítko pro přidání článku, obrázku a dalšího obsahu do některé ze sociálních sítí; tlačítko je obaleno div tagem s css třídou rbcBookmarks.
• <rub:detail name=”gallery_link” /> - URL adresa odkazu pro návrat do fotogalerie
• <rub:const id=”photogalleryDetailBack” /> - titulek odkazu pro návrat do fotogalerie

Při načítání detailu fotografii je zobrazena animace načítání, kterou upravuje tag *<rub:waitingArea>

<table id="waitingTable">
  <tr>
     <td>
        <img src="<rub:skinpath />img/loading.gif" alt="" width="16" height="16" />
     </td>
  </tr>
</table>

Webnode má naprogramované automatické promítání detailů fotografií pomocí JavaScriptu. Aby bylo možné toto promítání obrázků používat je zapotřebí před HTML tag *</body> vložit následující JavaScript. Funkce pro zpracování události *onStartSlideshow po spuštění promítání změní odkaz pro spuštění promítání na odkaz pro zastavení promítání. Dojde ke změně textu odkazu, popisku odkazu a události *onclick.

Použité rubznačky:

• <rub:const id=”photogallerySlideshowStop” /> - text odkazu pro zastavení promítání fotgrafií
• <rub:const id=”photogallerySlideshowStopTitle” /> - popisek odkazu pro zastavení promítání fotografií

Funkce pro zpracování události *onStopSlideshow po zastavení promítání změní odkaz pro zastavení promítání zpět na odkaz pro spuštění prezentace. Dojde ke změně textu odkazu, popisku odkazu a události *onclick. Použíté rubznačky:

• <rub:const id=”photogallerySlideshowStart” /> - text odkazu pro spuštění promítání fotografií
• <rub:const id=”photogallerySlideshowStartTitle” /> - popisek odkazu pro spuštění promítání fotografií

Funkce pro zpracování události *onShowImage zajišťuje zobrazení načtené fotografie a pokud není odkaz pro spuštění promítání změněn na odkaz pro zastavení promítání provede jeho změnu. Použité rubznačky:

• <rub:const id=”photogallerySlideshowStart” /> - text odkazu pro spuštění promítání fotografií
• <rub:const id=”photogallerySlideshowStartTitle” /> - popisek odkazu pro spuštění promítání fotografií

<script type="text/javascript">
/* <![CDATA[ */
 
   RubicusFrontendIns.addObserver
   ({
       onStartSlideshow: function()
      {
         $('slideshowControl').innerHTML 	=  '<span><rub:const id="photogallerySlideshowStop" /><'+'/span>';
         $('slideshowControl').title =  '<rub:const id="photogallerySlideshowStopTitle" />';
         $('slideshowControl').onclick = RubicusFrontendIns.stopSlideshow.bind(RubicusFrontendIns);
      },
 
      onStopSlideshow: function()
      {
         $('slideshowControl').innerHTML = '<span><rub:const id="photogallerySlideshowStart" /><'+'/span>';
         $('slideshowControl').title = '<rub:const id="photogallerySlideshowStartTitle" />';
         $('slideshowControl').onclick = RubicusFrontendIns.startSlideshow.bind(RubicusFrontendIns);
      },
 
      onShowImage: function()
      {
         if (RubicusFrontendIns.isSlideshowMode())
         {
            $('slideshowControl').innerHTML = '<span><rub:const id="photogallerySlideshowStop" /><'+'/span>';
	 $('slideshowControl').title = '<rub:const id="photogallerySlideshowStopTitle" />';
	 $('slideshowControl').onclick = RubicusFrontendIns.stopSlideshow.bind(RubicusFrontendIns);
         }
      }
   });
 
/* ]]> */
</script>

Pro správnou funkčnost musí mít odkaz pro spuštění promítání atribut id=”slideshowControl”. Dále je potřeba nastavit zavolání JS funkce startSlideshow() událostí onclick:

onclick="RubicusFrontendIns.startSlideshow(); return(false);"