HTMLの最近のブログ記事

Coda-Slider 1.1.1を使ったスライドショー

Coda-Slider 1.1.1を入手

 

Coda-Slider 1.1.1から一式をダウロード

 

 

Coda-Slider 1.1.1の設置

 

ファイル構成は

 

index.html
images
coda-slider.1.1.1.js
coda-slider.1.1.1.pack.js
jquery-1.2.1.pack.js
jquery-easing.1.2.js
jquery-easing.1.2.pack.js
jquery-easing-compatibility.1.2.js
jquery-easing-compatibility.1.2.pack.js

 

となっている。

 

スタイルシートはinde.x.htmlへ直接書かれている。

 

そのままサーバへアップロードするだけで動いていまうが
最低でもjsフォルダの作成CSSの外部ファイル化はしておこう。

 

<div class="panel" title="Panel 1">?</div>
の部分を繰り返すと、表示されるパネルの数も増える。

 

パネルを増やした場合は忘れずに
<p id="cross-links">?</p>
内の | <a href="#2" class="cross-link">Panel 2</a>
も追加しておく。

それともう1つ

私の場合タブ部分をCSSボタンに背景画像を入れているので

パネルを追加した場合は「show.css」にも追加が必要。

 

 

サンプル

 

 別にもう一つスライドするパネルを表示させる場合には、
<head>内の<script>部分の"jQuery("div#xxxxx")"で、idを指定し、
<body>タグ内で<div id="slider#" class="csw">と指定する。

 

 

 

 

 

E6は、XHTMLの <!DOCTYPE...宣言よりも前に文字やスペースがあると、古いブラウザ用の表示モード(互換モード)になってしまう。

すると当然CSSデザインが崩れる・・・

そこで以下のコードを加える。
訪問者のユーザーがWindowsのIE以外だった場合に、
XML宣言をするようになっている。

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if (!(ereg("Windows",$ua) && ereg("MSIE",$ua)) || ereg("MSIE 7",$ua)) {
echo '<?xml version="1.0" encoding="' . get_settings('blog_charset') .'"?>' . "\n"; }
?>


これでOK

うちのサーバは「.html」でphpが動くので問題ない。

そうでないひとは
「.htaccess」に
AddType application/x-httpd-php .php .html
と書いてアップロードしてみましょう。
「.htaccess」が許可されてばだけど。

 

1