Makale Özeti

Silverlight ile geliştirilmiş ücretsiz ve açık kaynak kodlu yazılım paketlerinden biri olan Slide.Show ile web sitelerinize kolayca fotoğraf galierile ekleyebileceğiniz gibi Slide.Show'u özelleştirerek farklı galeriler de tasarlayabilirsiniz. Bu makalemizde Slide.Show kurulumunu ve kullanımını inceleyeceğiz.

Makale

Silverlight çıktığından bu yana özellikle yurt dışında bir çok ücretsiz ve açık kaynak kodlu proje yayınlandı. Bunların arasında gerçek hayatta kullanılabilirliği en yüksek olan proje Slide.Show projesi. Bu yazıda yukarıdan aşağıda Slide.Show'u inceleyerek kurulumuna ve özelleştirilmesine değineceğiz.

Slide.Show paketini aşağıdaki adreste yer alan SlideShowSource linkine tıklayarak bilgisayarınıza indirebilirsiniz.

http://www.codeplex.com/SlideShow/Release/ProjectReleases.aspx?ReleaseId=8862

Slide.Show paketini kullanmak üzere Expression Web ile "File / New / Web Site" menüsünden yeni bir web sitesi yaratalım. Yarattığımız web sitesinde de boş bir HTML dosyası ekleyelim. Örneğimizde Slide.Show'u harici bir XML dosyasına bağlayacağız. Bir sonraki adımda Slide.Show kontrolüne ait Silverlight.js ve Slideshow.js dosyalarını projemize eklememiz gerekiyor. Bunun için Expression Web içerisinde "File / Import / File" menüsünden biraz önce indirmiş olduğumuz Slide.Show paketi içerisinde "Scripts/Release" klasöründe yer alan iki JavaScript dosyasını seçiyoruz. Sıra geldi bu her iki dosyayı da HTML sayfamıza linklemeye. Aşağıdaki şekilde bir kod ile o işlemi de tamamlayabiliriz.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Daron Yöndem Photo Gallery</title>

<script type="text/javascript" src="Silverlight.js"></script>

<script type="text/javascript" src="SlideShow.js"></script>

</head>

 

<body>

 

</body>

 

</html>

Yapacağımız örnekte Slide.Show tüm sayfayı kaplayacağı için aşağıdaki şekilde CSS tanımlamaları da yapmamız gerekecek.

    <style type="text/css">

        html,body,.SlideShow

        {

            height: 100%;

        }

        body

        {

            margin: 0px;

        }

    </style>

Son olarak Slide.Show kontrolünü sayfaya yerleştirmek üzere gerekli JavaScript kodunu da yazarak sayfamızın HTML yapısını aşağıdaki şekilde tamamlıyoruz.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Daron Yöndem Photo Gallery</title>

<script type="text/javascript" src="Silverlight.js"></script>

<script type="text/javascript" src="SlideShow.js"></script>

    <style type="text/css">

        html,body,.SlideShow

        {

            height: 100%;

        }

        body

        {

            margin: 0px;

        }

    </style>

</head>

 

<body>

    <script type="text/javascript">

        new SlideShow.Control(new SlideShow.XmlConfigProvider());

    </script>

</body>

 

</html>

Sıra geldi Silverlight.js ve Slideshow.js dosyamız ile aynı konumda bulunacak olan ve uygulamamızla ilgili tüm ayarları içerek olan Configuration.xml dosyasını düzenlemeye. Bunun için Expression Web içerisinde "File / New / XML" komutunu kullanabilirsiniz. Yaratacağımız Slide.Show uygulamasında kullanacağımız harici componentler de olacak. Söz konusu componentler Slide.Show download paketi içerisinde Script/Debug klasöründe bulunuyor. Bu klasörde bulunan tüm dosyaları kendi projemizde bir Scripts klasörü oluşturarak içerisine kopyalayalım. Böylece Configuration.xml içerisinde bu dosyaları linkleyerek uygulamamıza ek özellikler katabileceğiz.

<?xml version="1.0" encoding="utf-8" ?>

<configuration width="100%" height="100%">

  <scripts>

    <script key="AlbumViewer" url="Scripts/AlbumViewer.js" />

    <script key="Button" url="Scripts/Button.js" />

    <script key="DataProvider" url="Scripts/DataProvider.js" />

    <script key="NavigationTray" url="Scripts/NavigationTray.js" />

    <script key="ProgressIndicator" url="Scripts/ProgressIndicator.js" />

    <script key="SlideDescription" url="Scripts/SlideDescription.js" />

    <script key="SlideViewer" url="Scripts/SlideViewer.js" />

    <script key="ThumbnailViewer" url="Scripts/ThumbnailViewer.js" />

    <script key="Transition" url="Scripts/Transition.js" />

  </scripts>

  <modules>

    <module type="SlideViewer" />

    <module type="ProgressBar" />

    <module type="SlideDescription" />

    <module type="NavigationTray">

      <option name="initialAlbumView" value="true" />

    </module>

  </modules>

  <transitions>

    <transition type="FadeTransition" name="CrossFadeTransition" />

    <transition type="ShapeTransition" name="CircleOutTransition" />

    <transition type="SlideTransition" name="SlideLeftTransition" />

    <transition type="SlideTransition" name="SlideDownTransition">

      <option name="direction" value="Down" />

    </transition>

    <transition type="WipeTransition" name="WipeRightTransition">

      <option name="direction" value="Right" />

    </transition>

  </transitions>

  <dataProvider type="XmlDataProvider" />

</configuration>

Yukarıda gördüğünüz Configuration dosyası içerisinde SlideShow uygulamamızda kullanacağımız modülleri, script dosyalarını ve geçiş efektlerini belirliyoruz. Son olarak sıra geldi Slide.Show içerisinde gösterilecek olan fotoğrafların bir listesini ayrı bir XML dosyası içerisine yerleştirmeye. Bu noktada da data.xml adında bir dosya yaratarak aşağıdaki şekilde albümler ve fotoğraflar yaratabiliyoruz.

<data transition="CrossFadeTransition">

  <album

    title="Silverlight Trainings"

    description="All around the world"

    image="Images/a29.jpg">

    <slide

      title="Microsoft Turkey Silverlight Trainings"

      description="Happy times."

      image="Images/s07.jpg"

      thumbnail="Images/t07.jpg" />

  </album>

</data>

Yukarıdaki yapıyı takip ederek birden çok albüm ve her albüme birden çok fotoğraf ekleyebilirsiniz. Albümlere ait kapak resmini Album tagının içerisinde image özelliğine atarken her bir slayt için de Slide tagına bir normal fotoğraf bir de thumbnail fotoğrafı aktarmanız gerekiyor.

Tüm bu ayarları tamamladıktan sonra ayrı uygulamanızı internet üzerinden yayınlayabilirsiniz.

Hepinize kolay gelsin.

Daron Yöndem
MCT, MCPD, MCITP, MCTS, MCSD, MCAD
MCDBA, MCP, ACP, ICSD, IEL'03
http://daron.yondem.com