Flash/Flex Developer » highslide giriş http://blog.ismailsimsek.com Thu, 22 Dec 2011 14:58:55 +0000 en hourly 1 http://wordpress.org/?v=3.3 Highslide Giriş http://blog.ismailsimsek.com/html-css-js/highslide/highslide-giris.html http://blog.ismailsimsek.com/html-css-js/highslide/highslide-giris.html#comments Sun, 15 Mar 2009 02:02:18 +0000 İsmail Şimşek http://www.webtimi.com/ismail/blog/?p=74 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.

]]> http://blog.ismailsimsek.com/html-css-js/highslide/highslide-giris.html/feed 2