Update: May 1, 2010
Tested and works with Safari4, Firefox3, Opera9, IE6, IE7, IE8, Google crome.
MopSliderは、縦横のサイズ指定したものであれば、基本的にはなんでもおさめることができるスライダーボックスです。2.5からは、1ページにいくつでも設置することができます。オートムーブ機能が追加されました。
詳しくはDEMOページ、または、MopStudioのトップページをご覧ください。
ver. 2.5.1 - May 1, 2010
1ページに一つ以上のmopSliderを設置した場合のie6の問題を解決しました。
ver. 2.5.1 - April 30, 2010
1ページに一つ以上のmopSliderを設置した場合のie6の問題を解決しました。
ver. 2.5 - November 16, 2009
オートモーション機能を追加。1ページにいくつでも設置可能になりました。ver.2.4で必要だったオプション 'no' は設定不要になりました。画像のファイル名が変更になりました。
ver. 2.4 - July 18, 2009
バックボタンのマウスアウト時の動作を解決。
ver. 2.3 - July 11, 2009
小さな移動で起きる問題を解決。IE8で動作が緩慢になる問題を解決。
ver. 2.2 - July 10, 2009
Jquery 1.3.2とJquery UI 1.7.2に対応しました。多くのチューンナップとバグフィックスを行い、最新のブラウザに対応しました。2.2から1ページに2つ設置できるようになりました。CSSファイルは必要ありません。mopSlider-2.3.jis がCSSの設定も行います。
mopSlider-2.3.jisの38行目あたりからの画像へのパスを、必要があれば変更してください。使用するHTMLファイルと同じ階層にmopSliderフォルダを設置する場合、変更する必要はありません。
必要なファイルをヘッダに読み込みます。
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.pngFix-1.2.js"></script>
<script type="text/javascript" src="js/ui.core-1.7.2.js"></script>
<script type="text/javascript" src="js/ui.draggable-1.7.2.js"></script>
<script type="text/javascript" src="mopSlider/mopSlider-2.2.js"></script>
</head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.pngFix-1.2.js"></script>
<script type="text/javascript" src="js/ui.core-1.7.2.js"></script>
<script type="text/javascript" src="js/ui.draggable-1.7.2.js"></script>
<script type="text/javascript" src="mopSlider/mopSlider-2.2.js"></script>
</head>
<body>に置かれた任意のIDを設定したDIVの中にMopSliderに表示するコンンテンツを配置します。DIVを使って、スライダーのトータルの高さより高い、スライダーを表示するスペースを作ります。 全てのコンテンツに、高さと幅を設定してください。
<body>
<div class="makeSpace">
<div id="target">
contens...
</div>
</div>
</body>
<div class="makeSpace">
<div id="target">
contens...
</div>
</div>
</body>
logo.png
MopSliderフォルダの中の'logo.png'を変更してください。
サイズを変更する場合、必要ない場合は、MopSlider-2.2.jisの183行目あたりを変更してください。
$(mopSliderName+" .logo").css({...
$(mopSliderName+" .logoIn").css({...
$(mopSliderName+" .logoIn").css({...
ヘッダに以下のように記述します
<head>
...
<script type="text/javascript">
$(document).ready(function(){
$("#slider").mopSlider({'w':700, 'h':172, 'sldW':500, 'btnW':200, 'indi':"MopSlider 2.5", 'shuffle':y, 'type':'paper', 'auto':'y'});
});
</script>
</head>
...
<script type="text/javascript">
$(document).ready(function(){
$("#slider").mopSlider({'w':700, 'h':172, 'sldW':500, 'btnW':200, 'indi':"MopSlider 2.5", 'shuffle':y, 'type':'paper', 'auto':'y'});
});
</script>
</head>
詳しくはDEMOページ、または、MopStudioのトップページをご覧ください。
| 'w': | MopSliderの幅を設定します。 |
| 'h': | コンテンツ表示エリアの高さを指定します。ナビゲーションバーを含んだMopSlider全体の高さは+28pxです。 |
| 'sldW': | ナビゲーションボタンの可動範囲を設定します。 |
| 'btnW': | ナビゲーションボタンの幅を設定します。 |
| 'indi': | ナビゲーションボタンの中央に表示させる文字を設定します。空白でも構いません。 |
| 'type': | 'type':'paper'または 'type':'black'、2種類のスキンを選べます。'paper'の背景は'paperBack.jpg'の繰り返し、'black'の背景は、MopSlider下より160pxまでが'monoBack.gif'、それより上は'#484848'の背景色です。 |
| 'itemMgn': | 各アイテムの間隔を設定します。 |
| 'shuffle': | 'shuffle': 'n' と設定するとシャッフルをしません。'shuffle': 'y' はデフォルトで、表示される度にシャッフルをします。 |
| 'auto': | 'y' auto でスタート。スライダーバー右の "auto/manual" ボタンで切り替えます。 'n' manual でスタート。 "auto/manual" ボタンで切り替えます。 'nn'manualでスタート。 "auto/manual" ボタンは表示されません。 'yn' auto でスタート。"auto/manual" ボタンは表示されません。 |
| 'move': | オートムーブ1回のタイムです。デフォルトは1000（1秒）です。 |
| 'interval': | オートムーブのインターバルの時間です。デフォルトは2000（2秒）です。 |
| DEMOページ | MopStudioのトップページ |
MopSlider is the slider box can contain any item that is set height & width. From 2.5, MopSlider can be put any number you want in the page. Auto move function is added.
See the sauce of DEMO page, and MopStudio's top page.
ver. 2.5.1 - May 1, 2010
Fixed problem of ie6 when you use more than one mopSlider in a page.
ver. 2.5.1 - April 30, 2010
Fixed problem of ie6 when you use more than one mopSlider in a page.
ver. 2.5 - Nobember 16, 2009
Auto move function is added. MopSlider can be put any number you want in a page. Option 'no' of ver. 2.4 is not necessary to be set. File name of images are changed.
ver. 2.4 - July 18, 2009
Fixed action of mouseout of the Back button.
ver. 2.3 - July 11, 2009
Fixed problem of tiny move. Fixed irresponsibly motion of the standards mode of IE8.
ver. 2.2 - July 10, 2009
MopSlider 2.2 get to be functionally with Jquery 1.3.2 & Jquery UI 1.7.2. Many tune up & bug fix was done. Tested & works with new browsers. From ver 2.2, this can be put 2 in the page.
From about line38 of mopSlider-2.3.jis, change path to images, if it's necessary. If set the html & the mopBox folder same directory, it isn't necessary to change.
Incluide necessary files to header
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.pngFix-1.2.js"></script>
<script type="text/javascript" src="js/ui.core-1.7.2.js"></script>
<script type="text/javascript" src="js/ui.draggable-1.7.2.js"></script>
<script type="text/javascript" src="mopSlider/mopSlider-2.2.js"></script>
</head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.pngFix-1.2.js"></script>
<script type="text/javascript" src="js/ui.core-1.7.2.js"></script>
<script type="text/javascript" src="js/ui.draggable-1.7.2.js"></script>
<script type="text/javascript" src="mopSlider/mopSlider-2.2.js"></script>
</head>
Set mopSlider contents into any DIV set "ID", Make space with DIV more higher than mopSlider's total hight. Set height & width to every mopSlider's contents.
<body>
<div class="makeSpace">
<div id="target">
contens...
</div>
</div>
</body>
<div class="makeSpace">
<div id="target">
contens...
</div>
</div>
</body>
logo.png
Change 'logo.png' of MopSlider folder, if you want to change size, or you don't want it, change about line 183.
$(mopSliderName+" .logo").css({...
$(mopSliderName+" .logoIn").css({...
$(mopSliderName+" .logoIn").css({...
Write like the following to <head>.
<head>
...
<script type="text/javascript">
$(document).ready(function(){
$("#slider").mopSlider({'w':700, 'h':172, 'sldW':500, 'btnW':200, 'indi':"MopSlider 2.5", 'shuffle':y, 'type':'paper', 'auto':'y'});
});
</script>
</head>
...
<script type="text/javascript">
$(document).ready(function(){
$("#slider").mopSlider({'w':700, 'h':172, 'sldW':500, 'btnW':200, 'indi':"MopSlider 2.5", 'shuffle':y, 'type':'paper', 'auto':'y'});
});
</script>
</head>
See the sauce of DEMO page, and MopStudio's top page.
| Riquired option | Other option |
| 'w': | Set MopSlider's width. |
| 'h': | Set height of showing content area. All height that include navigation bar is 'h'+28px. |
| 'sldW': | Length of the navigation button's movable area. |
| 'btnW': | Width of navigation button |
| 'indi': | Indication of the center of navigation button. It can be set nothing. |
| 'type': | Choose 1 of 2types.'type':'paper'or 'type':'black'. Back ground of 'paper' is repeat of 'paperBack.jpg'. Back ground of 'black' is monoBack.gif from bottom to 160px, more upper than 160px, back groung color is '#484848'. |
| 'itemMgn': | Set margin of each items. |
| 'shuffle': | If set 'shuffle': 0, no shuffle. 'shuffle': 1 is Default value & shuffle. |
| 'auto': | 'y' Start by auto. Change by "auto/manual" button (right side of slider bar). 'n' Start by manual. " Change by "auto/manual" button. 'nn'Start by manual. No "auto/manual" button. 'yn' Start by auto." No "auto/manual" button. |
| 'move': | Dulation of 1 time of auto move function. Default valueis 1000(1sec). |
| 'interval': | Interval of auto move function. Default value is 2000(2sec). |
| If you like it... |
