|
|
HTML kod ile fotoğraf albümü nasıl yapabilirim ?
- Konbuyu başlatan SaintOne
- Başlangıç tarihi
oradaki gibi bir işlemi yapmak için javascript kullanman gerekecektir.
eğer hazır birşeyler istersen
http://workshop.rs/projects/coin-slider/
http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/
http://workshop.rs/2009/12/image-gallery-with-fancy-transitions-effects/
bunlardan yararlanabilirsin.
eğer hazır birşeyler istersen
http://workshop.rs/projects/coin-slider/
http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/
http://workshop.rs/2009/12/image-gallery-with-fancy-transitions-effects/
bunlardan yararlanabilirsin.
Öncelikle çok teşekkür ederim elimde somut bişeyler olmuş oldu http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/ buradaki tam istediğim gibi anladığım kadarıyla genişliği v.s kolay bi şekilde ayarlanıyor ancak yapamadığım baya uğraştım kodlarla pek aram yok orada ki download bölümünden zip li dosyayı indirdim içinde coin-slider-styles,coin-slider.min,coin-slider dosyaları vardı onları üzerinde çalıştığım web klasörünün içine attım ve ardından
HOW TO USE bölümünün altındaki kodları kopyala yapıştır yaptım body içerisine yaptım ama düzgün çıkmadı
yardımcı olabilirmisin bu konuda acaba neyi yanlış yapıyorum?
HOW TO USE bölümünün altındaki kodları kopyala yapıştır yaptım body içerisine yaptım ama düzgün çıkmadı
yardımcı olabilirmisin bu konuda acaba neyi yanlış yapıyorum?
Öncelikle bilmen gereken, bu sistem jquery ile yapılma...
ilk olarak yapman gereken jquery kütüphanesini indirmen ve çalışma yaptığın web klasörüne atman.
jquery kütüphanesi: http://code.jquery.com/jquery-1.7.1.min.js
not: chrome vb. tarayıcı ile girdiğinde direk dosya açılır. sayfayı kaydet diyerek indirebilirsin
ve internet explorer ile direk indirebilirsin.
-------------ara not-------------------------------------
ara not: coin-slider.zip dosyasından çıkan 3 dosya var.
coin-slider.js
coin-slider.min.js
coin-slider-styles.css
coin-slider.min.js ya da coin-slider.js dosyalarından yalız birini kullanmamız gerekecek.
konu hakkında pek bilgin olmadığından kafanın karışmaması açısından coin-slider.js dosyasını kullanarak işleme devam edeceğiz. coin-slider.js dosyasında düzeltme işlemini daha rahat yapacaksındır.
coin-slider.js
coin-slider-styles.css
dosyalarını tasarımı yaptığın dizine at.
-------------ara not-------------------------------------
ikinci işlemimiz:
<head>
</head> tagları arasına eklemen gereken kodlar var.
bunlar:
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="coin-slider.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
artık sistemimiz slaytı tanıyor.
üçüncü işlemimiz:
<body></body> tagları arasına eklenecek kodlar!
-------------------------body kod------------------------
<div id='coin-slider'>
<a href="img01_url" target="_blank">
<img src='img01.jpg' >
<span>
Description for img01
</span>
</a>
......
......
<a href="imgN_url">
<img src='imgN.jpg' >
<span>
Description for imgN
</span>
</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider();
});
</script>
-------------------------body kod------------------------
dördüncü işlem:
bazı ufak ayarlar yapabilirsin slayta. bunu için coin-slider.js dosyasını açıp aşağıya yazdığım kodları bulup oynamalısın. bu kodlar coin-slider.js dosyasının en altında yer almaktadır.
width: 565, // genişlik
height: 290, // yükseklik
spw: 7, // karelerin genişliği
sph: 5, // karelerin yüksekliği
delay: 3000, // resimler arası geçis süresi
sDelay: 30, // resimler arasındaki geçişte efekte ait geçiş süresi
opacity: 0.7, // başlık ve navigasyon opaklığı
titleSpeed: 500, // başlığın görüntülenme hızı
effect: 'random', // random, swirl, rain, straight (bu efektlerden sana uygununu seçmelisin. random karışıktır.)
navigation: true, // prev ve next butonlarının görünüp görünmeme ayarı
links : true, // resimlerin linklenmesi olmalı mı olmamalı mı
hoverPause: true // fare üzerine geldiğinde durmalı mı durmamalı mı.
not: true olanların tersinin olması için true yerine false yazmalısın.
kolay gelsin =).
ilk olarak yapman gereken jquery kütüphanesini indirmen ve çalışma yaptığın web klasörüne atman.
jquery kütüphanesi: http://code.jquery.com/jquery-1.7.1.min.js
not: chrome vb. tarayıcı ile girdiğinde direk dosya açılır. sayfayı kaydet diyerek indirebilirsin
ve internet explorer ile direk indirebilirsin.
-------------ara not-------------------------------------
ara not: coin-slider.zip dosyasından çıkan 3 dosya var.
coin-slider.js
coin-slider.min.js
coin-slider-styles.css
coin-slider.min.js ya da coin-slider.js dosyalarından yalız birini kullanmamız gerekecek.
konu hakkında pek bilgin olmadığından kafanın karışmaması açısından coin-slider.js dosyasını kullanarak işleme devam edeceğiz. coin-slider.js dosyasında düzeltme işlemini daha rahat yapacaksındır.
coin-slider.js
coin-slider-styles.css
dosyalarını tasarımı yaptığın dizine at.
-------------ara not-------------------------------------
ikinci işlemimiz:
<head>
</head> tagları arasına eklemen gereken kodlar var.
bunlar:
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="coin-slider.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
artık sistemimiz slaytı tanıyor.
üçüncü işlemimiz:
<body></body> tagları arasına eklenecek kodlar!
-------------------------body kod------------------------
<div id='coin-slider'>
<a href="img01_url" target="_blank">
<img src='img01.jpg' >
<span>
Description for img01
</span>
</a>
......
......
<a href="imgN_url">
<img src='imgN.jpg' >
<span>
Description for imgN
</span>
</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider();
});
</script>
-------------------------body kod------------------------
dördüncü işlem:
bazı ufak ayarlar yapabilirsin slayta. bunu için coin-slider.js dosyasını açıp aşağıya yazdığım kodları bulup oynamalısın. bu kodlar coin-slider.js dosyasının en altında yer almaktadır.
width: 565, // genişlik
height: 290, // yükseklik
spw: 7, // karelerin genişliği
sph: 5, // karelerin yüksekliği
delay: 3000, // resimler arası geçis süresi
sDelay: 30, // resimler arasındaki geçişte efekte ait geçiş süresi
opacity: 0.7, // başlık ve navigasyon opaklığı
titleSpeed: 500, // başlığın görüntülenme hızı
effect: 'random', // random, swirl, rain, straight (bu efektlerden sana uygununu seçmelisin. random karışıktır.)
navigation: true, // prev ve next butonlarının görünüp görünmeme ayarı
links : true, // resimlerin linklenmesi olmalı mı olmamalı mı
hoverPause: true // fare üzerine geldiğinde durmalı mı durmamalı mı.
not: true olanların tersinin olması için true yerine false yazmalısın.
kolay gelsin =).
Rica ederim. Bilgi paylaştıkça değerlenir.
Rica ederim. Yapamadığın yerleri sorarsın tekrar.