Mar
15
2009
Highslide

Highslide Giriş

Author An article by İsmail Şimşek    Comments 2 Comments

Merhabalar. Uzun zamandır ertelediğim highslide yazımı yazmaya başladım. Vakit buldukça yazmaya devam edeceğim.
Öncelikle highslide neler yapabilir ona bir göz atalım. Bu adresten neler yapabileceğine (yapabileceğinize) bakalım.

Örnek uygulamaları incelediyseniz işe highslide kütüphanesini, css dosyasını ve resimleri indirerek başlayalım.Bu adresten indireceğiniz zip uzantılı dosya içerisinde ihtiyacınız olan herşeyi bulacaksınız. İlk aşamada bizim için önemli olan highslide dosyası ve içindekiler. Example dosyasında örnek uygulamalar var inceleyip uygulamanızda fayda var.

Bir uyarıda bulunayım bu noktada; kodlamaya geçmeden önce verdiğim kodları kendiniz tek tek yazarsanız daha yararlı olur. Kopyala / yapıştır ile hiç bir faydası olmaz.

Bu hatırlatmayıda yaptıktan sonra ilk kodumuzu yazalım.

PLAIN TEXT
HTML:
  1. <html>
  2. <head>
  3.  
  4. <link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
  5. <script type="text/javascript" src="highslide/highslide-full.js"></script>
  6.  
  7. </head>
  8. <body>

Bu kod bloğu ile highslide css dosyamızı ve highslide kütüphanemizi sayfamıza çağırdık.  Bundan sonraki en önemli kodumuz ise

PLAIN TEXT
HTML:
  1. <script type="text/javascript">
  2. hs.graphicsDir = 'highslide/graphics/';
  3. </script>

olacak. Bu kodumuzla highslide ın sayfa içerisinde kullanacağı zoom, move gibi araçların resimlerinin yolunuda belirlemiş oluyoruz. Bu kodlardan birini eksik yazarsak highslide düzgün çalışmayacaktır.

Kodlarımızın son hali aşağıdaki gibi olacaktır.

PLAIN TEXT
JavaScript:
  1. <head>
  2.  
  3. <link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
  4. <script type="text/javascript" src="highslide/highslide-full.js"></script>
  5. <script type="text/javascript">
  6. hs.graphicsDir = 'highslide/graphics/';
  7. </script>
  8. </head>
  9. <body>

İlk örnek olarak bir resmin tıklanınca büyüyerek ekrana gelmesini gösterelim. Bu sayede highslide mantığınıda biraz olsun görmüş olacağız. Bir resmin büyüyerek ekrana gelmesi için aynı resmin bir küçük bir de büyük haline ihtiyacımız var. Yani küçük olan sayfamızda gözüken resim büyük olan ise tıkladığımızda ekrana gelecek olan resim. Aşağıdaki kodları sayfamızın <body></body> tagları arasına yazıyoruz.

PLAIN TEXT
HTML:
  1. &lt;body&gt;
  2.  
  3. &lt;a href=&quot;resimler/buyuk_resim.jpg&quot; class=&quot;highslide&quot; onclick=&quot;return hs.expand(this)&quot;&gt;
  4. &lt;img src=&quot;resimler/kucuk_resim.jpg&quot; title=&quot;Büyük hali için tıklayınız&quot; /&gt;&lt;/a&gt;
  5. &lt;/body&gt;

Böylelikle işlemimiz bitiyor. Örneği görmek için tıklayınız.

Yaptıklarımızı açıklayacak olursak:

Öncelik resmimizin küçük haline link verip büyük halini açmasını istedik. linkimize class ataması yapıp bu linkin bir highslide linki olduğunu ve tıklandığında (onclick) resmi büyüterek açması gerektiğini söyledik.

Umarım faydalı olmuştur. İkinci derste görüşmek üzere.

Etiketler:, ,

Related Posts

About the Author:

2010 Dokuz Eylül Mezunu | Flash/Flex Developer | Actionscript Lover | Addicted to Php/MySql | Junior Android&iOS Developer

2 Comments + Add Comment

  • Mehmet 09 Temmuz 2009, 14:19

    Teşekkürler, gayet güzel bir anlatım olmuş elinize sağlık.

    Cevapla
  • itsmylife 09 Temmuz 2009, 14:32

    Yorumunuz için ben teşekkür ederim. Vakit bulabildiğimde yazmaya devam edeceğim…

    Cevapla

Leave a comment

Kategoriler