Slideshow

Panen siia kirja, mida ma algselt KL jaoks tegin -- ehk siis kuidas saada headerisse slideshowd.

1. Kõigepealt tuleb mudida 0pointi juurikas olevat Template.php'd: real 153 laetakse slideshowle vajalikud js failid, kui ss on sisse lülitatud. See on muudetud järgmiselt:

// Add javascript and CSS files for jquery slideshow. NB! Changed!!! JS will be loaded w/o conditions.
  drupal_add_css(drupal_get_path('theme','zeropoint').'/css/slider.css', array('group' => CSS_THEME, 'every_page' => TRUE, 'weight' => 5));
  drupal_add_js(drupal_get_path('theme', 'zeropoint').'/js/jquery.flexslider-min.js', array('group' => JS_THEME));
  if (theme_get_setting('slideshow_display')) {
    if (drupal_is_front_page() || theme_get_setting('slideshow_all')) {
      drupal_add_js(drupal_get_path('theme', 'zeropoint').'/js/slide.js', array('group' => JS_THEME));
    }
  }
  drupal_add_js(drupal_get_path('theme', 'zeropoint').'/js/hslide.js', array('group' => JS_THEME));

"hslide.js" on siis uue mooduli nimi.

2. Tuleb teha slide.js'ist koopia (see asub js kataloogis), nimetada see hslide.js'iks ja seal sees kirjutada selle mooduli-tüki nimi, mida tahad pöörlema panna. #hslide antud juhul:

jQuery(document).ready(function($) {
  $('#hslide').flexslider({
    controlNav: true,
    directionNav: false,
    keyboardNav: false
  });
});

NB! controlNav: true --kaotab ära nupud.

3. Tuleb ette valmistada slaidishow mootor. Antud juhul hslide.php, kus tuleb kirjeldada, mida sa näidata tahad.

<div id="hslide" role="complementary">
<ul class="slides">
  <li>
    <div class="post slide1">
    <img src="<?php print base_path() . drupal_get_path('theme', 'zeropoint') . '/_custom/slider2/hslide1.png'; ?>" class="slide-image"/>
      <div class="clearfix"></div>
    </div>
  </li>
  <li>
    <div class="post slide2">
    <img src="<?php print base_path() . drupal_get_path('theme', 'zeropoint') . '/_custom/slider2/hslide2.png'; ?>" class="slide-image"/>
    <div class="clearfix"></div>
    </div>
  </li>
[rook]
</ul>
</div>

Li-osa muidugi kordub niipalju kui vaja. NB! Siin peab klappima failide asukoht (ei viitsinud slider2 hakata muutma...)

4. Eelmisega tihedas seoses on CSS. Kuna niikuinii on tegu custom asjaga, võib _custom.css faili tekitada vastava sektsiooni:

#header {
    position:relative;
}
#hslide {
    position:absolute;
    right: 0;
    margin: 0;
    z-index: -3;
#hslide a:active,
#hslide a:hover {
    outline: none;
    text-decoration: none;
}
.slides {
    width: 100%;
    max-width: 90em;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    list-style: none;
}
#hslide .slides > li {
    display: none;
    position: relative;
    margin: 0;
}
#hslide .slides li:first-child {
    display: list-item;
}
.slides:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.slides > li {
    float:none !important;
}

Kõigepealt tuleb header muuta relatiivseks, muidu järgmine positsioon ei tööta. Siis klappima hslide ja oluline on see li>display:none ja li:first-child display:list-item. Samavõrra oluline ja idiootlik on see float:none - slaidid hüppavad ringi, kuni flexslideri enda kola pole nullitud...

5. Paika sai see page.tpl.php'sse niimoodi:

<div id="header" role="banner">
<div class="clearfix">
<?php include_once 'hslide.php'; ?>
<?php if (theme_get_setting('loginlinks') || $page['topreg']): ?>


Ehk siis headerisse, enne topregioni.