Slide.Show kurulumu ve kullanımı

0 dakikada yazıldı

9237 defa okundu

Düzenle

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.