AmazingSlider (jQuery)

・ 引用元のhttp://amazingslider.com/ja/ は制作ソフトになっていて
 ダウンロードすればいろいろなスライドショーが簡単にできる。
 使い方は簡単。 単独使用ならコード編集は不要。

・ .スクリーン縦横サイズ、変化のパターンや速度、陰影、YouTube映像挿入、
 など、いろいろな設定ができる。
・ .画面右下の「amazingslider.com」の文字は変更/削除できる。(下覧参照)
・PullDown メニューとの併用OK。Chrome/Firefox でもメニューが背部に隠れることはない。
・画面下のボタンは変更できる(右図)。ボタン入りはこれがよさそうだ。

左の自作
ボタン

引用元の
ボタン

ボタンの作り方
は下欄参照

 

 

AmazingSlider のメニューと設定:

上記メニューで
1)Slides:
・スクリーンサイズ指定。
・「+」で画像などを挿入。 (shiftキーで同時に複数画像選択可)
・パブリッシュで生成するhtmlファイル内の画像ファイル名、フォルダ名はそのまま元の名が使われるから、あらかじめフォルダ名はアルファベットにしておく。日本語フォルダ内の画像を使うと
パブリッシュできないから注意!

・画像はここで順番変更、削除可能。

2)Skins:
・概要: 基本デザイン指定
・Slider: ボタン設定
・ナビゲーション: 画面下のナビボタンの 位置/サイズ/数字タイプ への変更
・コントロール: 同上続き
・外枠と影: スクリーンの枠と影
・テキスト効果: CSSによる効果(使い方不明)

3)Transitions:
変化のパターン。クロスフェードにするには、「クロスフェード」でなく、「フェード」を選択。「クロスフェード」を選択するとフェードアウトとフェードインが別になる。
変化時間はここのオプションで設定。

4)Options:
変化の間隔時間、ループなどはここで指定。
slider に必要な上下の余白は本文のmargin値 auto値で指定できるから不要。

5)Publish:
Html主ファイル、とサブファイル(amazingslide.js, initslider-1.js, jquery.js )および ナビボタン画像フォルダ skin が生成。日本語フォルダ内の画像を使うとパブリッシュできないから注意!

・以上の設定値は ファイル → プロジェクト(中間)ファイル(****.amslider)として保存。このファイルは画像を含め全ての情報が入っているので後日の変更はこのファイルのみを読み込めばよい。

・設定変更は、この****.amsliderファイルで行なうか、あるいは枚数や画像の変更は直接 initslider-1.jsと本文htmlでもできる。(枚数変更は本文で、サイズ変更は initslider-1.jsの冒頭部分で変更できる)。

・画面右下の「amazingslider.com」の文字はサブファイルamazingslider.js 内文字で 変更/削除できる。
画面左下の画像ファイル名の表示は、本文画像ファイル名の alt="***" である。これを消せば画像からも消える。この表示時に現れる黒帯も消える。
・画面下のボタン変更はフォルダー sliderengine/rskins 内 bullet-24-24-0.png (24×24pixelを2段にした、縦48pixel図)でできる (上図・右)。


他のwebページに挿入する場合の注意:
headより前の冒頭宣言は、

・Publish では下記が生成する。

<!DOCTYPE html>
<html>

・DreamWeaver の冒頭宣言

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

・HomepageBuilderの冒頭宣言

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

*************************************************
これらの種類によっては
他のホームページに挿入した場合はトラブルが生じることがある。


トラブル例:
・PullDownのサブメニュー間に隙間があく。、
・マウスを重ねると画面が空白になったり
・画像表示に数秒かかったり、Slider画像位置がInternetExplorerで左に寄る。
・これらのトラブルは現れたり、現れなかったりするので共存JavaScriptをいろいろ操作してみる必要あり。

ミカサ社例では、DreamWeaverの冒頭宣言がよいようだ。
他は、Local サイト ではうまく動作するがサーバーにupするとレイアウトが崩れることがある。
トラブル理由不明。米国ソフトだからか。

通常のHTMLページに入れる場合、Publishで生成の冒頭宣言でよいようだが、JavaScriptと共存する場合にトラブルが発生するらしい。
冒頭宣言をいろいろ変えてみる必要あり。

(自分のPC内SWAPフォルダにMK社サンプルあり)


|  Amazing Slider の簡単な例  |  画像切替え いろいろ  |  ホームページ作成体験  | 

 

inserted by FC2 system