Главная страницаКисти для фотошопа Каталог файловПрофиль
  • Страница 1 из 1
  • 1
SlideItMoo - 3 красивых решения для Вашего сайта
qwerty9Дата: Суббота, 24.10.2009, 18:01 | Сообщение # 1
Титул: Генерал-майор
Сообщений: 406
Репутация: [ 6 ]
1. Красивый слайдер

Для корректной работы нам необходимо:

а) Три внешних файла (2 из них с кодом фреймворка MooTools). Не забудьте исправлять путь к файлам, если меняете их расположение. Следующий код необходимо вставить между тегами :

Code
<script language="javascript" type="text/javascript" src="script/mootools-1.2.1-core.js"></script>   
       <script language="javascript" type="text/javascript" src="script/mootools-1.2-more.js"></script>   
       <script language="javascript" type="text/javascript" src="script/slideitmoo-1.1.js"></script>

б) Javascript код с настройками в начале документа сразу после верхнего кода также между .

Code
<script language="javascript" type="text/javascript">   
window.addEvents({   
'domready': function(){   
/* thumbnails example , div containers */   
new SlideItMoo({   
overallContainer: 'SlideItMoo_outer',   
elementScrolled: 'SlideItMoo_inner',   
thumbsContainer: 'SlideItMoo_items',    
itemsVisible:3,   
itemsSelector: '.SlideItMoo_element',   
itemWidth: 158,   
showControls:1});   

}   
});   
</script>

В этих настройках можно задать ширину слайдера, количество видимых элементов и включить или выключить контроллеры слайдера. Более подробно про настройки в конце урока.

в) Код HTML для оформления внешнего вида слайдера

Code
<div id="SlideItMoo_outer">    
<div id="SlideItMoo_inner">    
<div id="SlideItMoo_items">   
<div class="SlideItMoo_element"></p>   
     

<strong>1: Address</strong>   
     <a href="http://www.ruseller.com/" target="_blank">   
     <img src="gallery/thumb/address_128.png" /></a>   
       Nam porta tellus ac urna    
     </div>    
     <div class="SlideItMoo_element">   
     <strong>2: Ads</strong>   
     <a href="http://www.ruseller.com/" target="_blank">   
     <img src="gallery/thumb/ads_128.png" /></a></p>   
     

Praesent pellentesque eros nec nisl    
     </div>   
     <div class="SlideItMoo_element">   
     <strong>3: Calendar</strong>   
     <a href="http://www.ruseller.com/" target="_blank">   
     <img src="gallery/thumb/calendar_128.png" /></a>   
       Vestibulum eleifend scelerisque purus    
     </div>   
     <div class="SlideItMoo_element"></p>   
     

<strong>4: Comment</strong>   
     <a href="http://www.ruseller.com/" target="_blank">   
     <img src="http://www.ruseller.com/" /></a>   
       Felis nulla iaculis lacus    
     </div>   

     <div class="SlideItMoo_element">   
     <strong>5: Home</strong>   
     <a href="http://www.ruseller.com/" target="_blank"></p>   
     

<img src="gallery/thumb/home_128.png" /></a>   
       Quisque neque. Donec quam ante, pulvinar vitae    
     </div>   

     <div class="SlideItMoo_element">   
     <strong>6: Mail</strong>   
     <a href="http://www.ruseller.com/" target="_blank">   
     <img src="gallery/thumb/mail_128.png" /></a>   
       Suspendisse sodales turpis. Aliquam lectus    
     </div></p>   
     

<div class="SlideItMoo_element">   
     <strong>7: News</strong>   
     <a href="http://www.ruseller.com/" target="_blank">   
     <img src="gallery/thumb/news_128.png" /></a>   
       Praesent pellentesque eros nec nisl    
     </div>   
     <div class="SlideItMoo_element">   
     <strong>8: RSS</strong></p>   
     

<a href="http://www.ruseller.com/" target="_blank">   
     <img src="gallery/thumb/rss2_128.png" /></a>   
       Nam porta tellus ac urna    
     </div>   
     <div class="SlideItMoo_element">   
     <strong>9: Search</strong>   
     <a href="http://www.ruseller.com/" target="_blank">   
     <img src="gallery/thumb/search_128.png" /></a>   
       Praesent pellentesque eros nec nisl    
     </div></p>   
     

<div class="SlideItMoo_element">   
     <strong>10: Sign</strong>   
     <a href="http://www.ruseller.com/" target="_blank">   
     <img src="gallery/thumb/sign_128.png" /></a>   
       Vestibulum eleifend scelerisque purus    
     </div>    
     </div>    
     </div>   
     </div>    
     

Не забудьте поменять ссылки и пути к картинкам под Ваши нужды.

Ну и само собой необходимо все оформить через CSS. В нашем случае все стили находятся во внешнем файле, который подключен в самом начале документа.

Code
<link rel="stylesheet" type="text/css" href="stylesheet/styles.css" />

2. Ротатор баннеров или изображений

Нам понадобится:

а) Внешние файлы с Mootools - см. 1 пример.

б) Javascript код с настройками в начале документа сразу после верхнего кода также между .

Code
<script language="javascript" type="text/javascript">   
window.addEvents({   
'domready': function(){   
        
    /* banner rotator example */    
       new SlideItMoo({overallContainer: 'SlideItMoo_banners_outer',   
       elementScrolled: 'SlideItMoo_banners_inner',   
       thumbsContainer: 'SlideItMoo_banners_items',    
       itemsVisible:1,   
       itemsSelector: '.banner',   
       showControls:0,   
       autoSlide: 3000,   
       transition: Fx.Transitions.Bounce.easeOut,   
       duration: 1800,   
       direction:-1});   

       }   
       });   
     </script>

в) HTML

Code
<div id="SlideItMoo_banners_outer">    
<div id="SlideItMoo_banners_inner">    
<div id="SlideItMoo_banners_items">   
<a class="banner" href="#" target="_blank"><img src="banners/1.jpg" width="557" height="134" /></a>    
<a class="banner" href="#" target="_blank"><img src="banners/2.jpg" width="557" height="134" /></a>    
<a class="banner" href="#" target="_blank"><img src="banners/3.jpg" width="557" height="134" /></a>    
</div>    
</div>   
</div>

Стили оформления находятся во внешнем файле (см. пример 1)

3. Ротатор с текстом и изображениями

Нам понадобится:

а) Внешние файлы с Mootools - см. 1 пример.

б) Javascript код с настройками в начале документа сразу после верхнего кода также между .

Code
<script language="javascript" type="text/javascript">   
window.addEvents({   
'domready': function(){   
/* thumbnails example , div containers */     
    /* info rotator example */    
       new SlideItMoo({overallContainer: 'SlideItMoo_info_outer',   
       elementScrolled: 'SlideItMoo_info_inner',   
       thumbsContainer: 'SlideItMoo_info_items',    
       itemsVisible:1,   
       itemsSelector: '.info_item',   
       itemWidth:557,   
       showControls:0,   
       autoSlide: 5000,   
       transition: Fx.Transitions.Sine.easeIn,   
       duration: 1800,   
       direction:1});    
       }   
       });   
     </script>

в) HTML

Code
<div id="SlideItMoo_info_outer">    
<div id="SlideItMoo_info_inner">    
<div id="SlideItMoo_info_items">   
<div class="info_item">   
      <a href="http://www.php-help.ro/php-tutorials/javascript-chained-select-with-mootools-12/"><img src="info_images/chained_select.jpg" /></a>   
     <h1>Chained drop down boxes, the neat way</h1>   
       Ever had a problem displaying the relationships of hierarchical data? Tons of drop downs displaying data according to what the user selected? Not any more. ChainedSelect comes to your aid with a neat display of your data. Easy to use and to implement.   
     <a href="http://www.php-help.ro/php-tutorials/javascript-chained-select-with-mootools-12/">more details</a>   
     </div>   
     <div class="info_item">   
     <h1><a href="http://www.php-help.ro/mootools-12-javascript-examples/sifr-titles-generated-using-mootools-12/"><img src="info_images/moo_sifr-300x154.jpg" /></a>MooTools and SiFR - cool, antialiased text</h1>   
       Tired of the same boring look of your text? With the help of this script, your titles will look neat! Try it out.    
     <a href="http://www.php-help.ro/mootools-12-javascript-examples/sifr-titles-generated-using-mootools-12/">more details</a>   
    </div>   
     <div class="info_item">   
     <a href="http://www.php-help.ro/mootools-12-javascript-examples/moohover-css-hover-mootools-way/"><img src="info_images/moohover-300x139.jpg" /></a>   
     <h1>MooHover - cool looking links and buttons</h1>   
       How about some cool hover effects on your links and buttons? You want it? You got it!   
     <a href="http://www.php-help.ro/mootools-12-javascript-examples/moohover-css-hover-mootools-way/">more details</a>   
     </div>   
     <div class="info_item">   
    <a href="http://www.php-help.ro/mootools-12-javascript-examples/mootools-12-javascript-image-zoom/"><img src="info_images/zoomer-225x300.jpg" /></a>   
     <h1>MooTools image zoom</h1>   
       Got really large images that your client wants you to use? No room in the page for them? Need a solution? Got one! Go get it tiger!   
     <a href="http://www.php-help.ro/mootools-12-javascript-examples/mootools-12-javascript-image-zoom/">more details</a>   
     </div>    
     </div>    
     </div>   
     </div>


  • Страница 1 из 1
  • 1
Поиск: