MooTools Slayt Gösterim Eklentisi

http://blog.olicio.us/2009/07/25/floom/

Adresinde bulunan slayt gösterim eklentisini Wordpress'e entegre etmek için oradaki kodları tam olarak hangi dosyalara eklemem lazım bilmiyorum, bu konu yardımlarınızı beklemekteyim, teşekkürler.

ben sayfa olarak hazırlayıp kullandım.

görünümü: http://img24.imageshack.us/img24/3710/slideea.png

Hazırlanışı:
----------------------------------------

Temanızın style.css dosyasına şu kodları ekleyin:

ul, li { list-style: none; margin: 0; padding: 0; }
#blinds-cont { -webkit-box-shadow: 0 0 40px #000; background: url(bg.png) 0 0 no-repeat; margin: 50px auto; padding: 20px 0 0 0; font-family: 'Georgia', 'Arial Narrow', 'Arial', sans-serif; height: 410px; -moz-box-shadow: 0 0 40px #000; width: 1000px; }
#blinds-cont #blinds { margin: 0 auto; background: url(images/spinner.gif) 50% no-repeat; height: 330px; width: 960px; }
#blinds-cont #blinds .floom_slice { z-index: 10; }
#blinds-cont #blinds .floom_caption { text-shadow: 0 1px 0 #fff; font-size: 1.0em; color: #333; font-style: italic; position: relative; text-align: center; width: 100%; top: 25px; }
#blinds-cont #blinds .floom_progressbar { font-size: 1px; background: #131718; border-bottom: solid 1px #fff; height: 3px; position: relative; z-index: 1000; width: 0; top: 2px; }
#blinds-cont #blinds .floom_container { overflow: hidden; border-bottom: solid 1px #fff; border-top: solid 1px #666; }
#blinds-cont #blinds .floom_vertical { float: left; }

header.php dosyanıza

<?php wp_head(); ?>
</head>

kodundan önceye ekleyin:

<script type="text/javascript" charset="utf-8" src="<?php bloginfo('template_directory'); ?>/js/mootools-1.2.2-core.js"></script>
<script type="text/javascript" charset="utf-8" src="<?php bloginfo('template_directory'); ?>/js/mootools-1.2.2.2-more.js"></script>
<script type="text/javascript" charset="utf-8" src="<?php bloginfo('template_directory'); ?>/js/floom-1.0.js"></script>

<script type="text/javascript" charset="utf-8">
        window.addEvent('domready', function(e) {    
            
            // option 1        
            var slides = [
                {
                    image: 'nature-photo0.jpg',
                    caption: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
                },
                {
                    image: 'nature-photo1.jpg',
                    caption: 'Excepteur sint occaecat cupidatat non proident'
                },
                {
                    image: 'nature-photo2.jpg',
                    caption: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.'
                },
                {
                    image: 'nature-photo3.jpg',
                    caption: 'Deserunt mollit anim id est laborum'
                },
                {
                    image: 'nature-photo4.jpg',
                    caption: 'Laboris nisi ut aliquip ex ea commodo consequat'
                }
            ];
            
            // option 2
            // var slides = $$('#blinds img');

            $('blinds').floom(slides, {
                slidesBase: '<?php bloginfo('template_directory'); ?>/slides/',
                sliceFxIn: {
                    top: 20
                }
            });
            
        });
    </script>

Gerekli dosyaları buradan indirip temanıza atın.

Son olarak admin panelinizden Sayfalar kısmına gelin. Yeni Ekle deyin. Sayfa başlığını yazıp yan taraftan, Template kısmından "slide" yazanı seçin ve yayınlayın...



Notlar:
----------------------------------------

Resimleri yükleyeceğiniz adres wp-content/themes/sizintemanız/slides konumudur.

Resimleri ekledikten sonra slide.php içerisindeki resim adlarını değiştirmeniz yeterli.

Uyarı: slide.php içindeki

<div id="blinds">
<!-- <img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="<?php bloginfo('template_directory'); ?>/slides/nature-photo0.jpg" />
<img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="<?php bloginfo('template_directory'); ?>/slides/nature-photo1.jpg" />
<img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="<?php bloginfo('template_directory'); ?>/slides/nature-photo2.jpg" />
<img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="<?php bloginfo('template_directory'); ?>/slides/nature-photo3.jpg" />
<img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="<?php bloginfo('template_directory'); ?>/slides/nature-photo4.jpg" /> -->
</div>

kısmını değiştirirken baştaki <!-- ve sondaki --> kısımları silmeyiniz.

Yazıları değiştirmek için header.php dosyasına eklediğiniz

 {
                    image: 'nature-photo0.jpg',
                    caption: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
                },
                {
                    image: 'nature-photo1.jpg',
                    caption: 'Excepteur sint occaecat cupidatat non proident'
                },
                {
                    image: 'nature-photo2.jpg',
                    caption: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.'
                },
                {
                    image: 'nature-photo3.jpg',
                    caption: 'Deserunt mollit anim id est laborum'
                },
                {
                    image: 'nature-photo4.jpg',
                    caption: 'Laboris nisi ut aliquip ex ea commodo consequat'
                }

kısmındaki caption: yazan yerleri düzenlemeniz yeterli.

Slide alanının genişliğini,yüksekliğini style.css'ye eklediğiniz kodlardan ayarlayabilirsiniz.

Teşekkürler...

ileri geri butonlarıda olsaymış keşke. teşekkürler...

PirMuhammed çok teşekkür ederim açıklama için, yanlız ufak bir sorum daha olacak; yeni bir sayfa olarak değilde anasayfada istediğim bir yere eklemek için ne yapmalıyım?

diğer işlemleri yaptıktan sonra anasayfaya eklemek için; index.php' de uygun bir yere şunu eklersin:

<?php include (TEMPLATEPATH . '/slide.php'); ?>

o indirdiğin dosyalardan slide.php dosyasından

<?php
/*
Template Name: Slide
*/
?>

<?php get_header(); ?>

ve

<?php get_footer(); ?>

kısımlarını silersin. yani o dosyanın içerisinde şunlar kalır:

<div id="blinds-cont">
<div id="blinds">
<!-- <img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="<?php bloginfo('template_directory'); ?>/slides/nature-photo0.jpg" />
<img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="<?php bloginfo('template_directory'); ?>/slides/nature-photo1.jpg" />
<img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="<?php bloginfo('template_directory'); ?>/slides/nature-photo2.jpg" />
<img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="<?php bloginfo('template_directory'); ?>/slides/nature-photo3.jpg" />
<img title="Lorem ipsum dolor sit amet, consectetur adipisicing elit" alt="" src="<?php bloginfo('template_directory'); ?>/slides/nature-photo4.jpg" /> -->
</div>
</div>

böylece istediğin olur...