Silverlight PhotoSlider

Date: giovedì gennaio 29, 2009
Posted in: Controls

English VersionEnglish Version

Questo è un applicativo per poter includere sul proprio sito web una sequenza di immagini correlate di testo descrittivo e di un link. Viene in genere utilizzata nelle Home Page per dare risalto a delle news o a delle pagine in particolare.

Nell’esempio che segue vengono riassunte tutte le applicazioni sviluppate nel presente blog.

Get Microsoft Silverlight

Aggiungere questa applicazione alle vostre pagine web è piuttosto semplice, basta seguire i seguenti passi:

  1. Scaricare il PhotoSlider da questo link. Potete anche scaricare l’esempio completo visibile sopra da questo link.
  2. Scompattate l’archivio zip scaricato in una cartella e copiate il file PhotoSlider.xap in una cartella del vostro sito web.
  3. Aggiungete in una pagina web il seguente codice, nel punto i cui vogliate che appaia il PhotoSlider
    ?View Code XML
    <object data="data:application/x-silverlight," type="application/x-silverlight-2" width="400" height="270">
<param name="source" value="PhotoSlider.xap"/>
<param Name="initParams" value="TextLoading=Caricamento Immagini...,UrlXmlSlides=blog_images.xml,TimeToSlide=5" />
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.30923.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>
  4. Modificate i seguenti tags secondo le vostre esigenze:
    • &lt;object data=”data:application/x-silverlight,” type=”application/x-silverlight-2″ width=”400″ height=”270″>
      Rispettivamente larghezza ed altezza (in pixels) del PhotoSlider (Si possono anche specificare delle percentuali: width=”100%” height=”80%”).
    • &lt;param name=”source” value=”/ontheroad/photoslider/PhotoSlider.xap“/&gt;Il path dove è posizionato il file PhotoSlider.xap nel vostro sito
      Esempio: se caricate il file PhotoSlider.xap in una cartella come http://www.yoursite.com/folder/PhotoSlider.xap allora il tag andrà modificato in questo modo&lt;param name=”source” value=”http://www.yoursite.com/folder/PhotoSlider.xap“/&gt;
    • &lt;param name=”background” value=”white” /&gt;Rappresenta il colore di background del PhotoSlider durante il primo caricamento
    • &lt;param Name=”initParams” value=”TextLoading=Caricamento Immagini…,UrlXmlSlides=blog_images.xml,TimeToSlide=5″ /&gt;
      TextLoading indica il testo che apparirà durante il caricamento delle immagini.
      UrlXmlSlides indica il path del file XML che descriverà le immagini da visualizzare.
      TimeToSlide indica l’intervallo di tempo in secondi tra un’immagine e l’altra.
  5. Creare il file XML che descrive le immagini da utilizzare. Il formato è il seguente:
    ?View Code XML
    <images>
  <picture>
    <title>FlipBook</title>
    <image>blog_gallery/flipbook.png</image>
    <description>Permette di realizzare delle animazioni frame per frame e di includerle nel proprio sito web.</description>
	<linkUrl>http://www.silverlight-blog.it/?p=60</linkUrl>
  </picture>
  <picture>
    <title>PhotoGallery</title>
    <image>blog_gallery/photogallery.jpg</image>
    <description>Includere una fotogallery sul proprio sito web non è mai stato così facile.</description>
	<linkUrl>http://www.silverlight-blog.it/?p=63</linkUrl>
  </picture>
   <picture>
    <title>Podcast Player</title>
    <image>blog_gallery/podcastplayer.png</image>
    <description>Permette di ascolare alcuni podcast soltanto utilizzando un Browser.</description>
	<linkUrl>http://www.silverlight-blog.it/?page_id=27</linkUrl>
  </picture>
   <picture>
    <title>MinoPlayer</title>
    <image>blog_gallery/videoplayer.png</image>
    <description>Tramite questo video player è possibile aggiungere filmati sul proprio sito web.</description>
	<linkUrl>http://www.silverlight-blog.it/?p=59</linkUrl>
  </picture>
   <picture>
    <title>Previsioni del tempo</title>
    <image>blog_gallery/weather.png</image>
    <description>Windget per inserire le previsioni del tempo, personalizzabili per ogni singolo visitatore.</description>
	<linkUrl>http://www.silverlight-blog.it/?page_id=25</linkUrl>
  </picture>
</images>

    Dove title indica il titolo, image il path dell’immagine, description la descrizione e linkUlr la pagina da aprire quando si clicca sull’immagine (linkUrl può anche essere lasciato vuoto, in questo l’immagine non sarà cliccabile).

  6. Infine caricate tutte il file XML e le immagini sul vostro sito.

Add Comment 2 comments