［JS覚書］右サイドに小さめ画像とテキストがハイライトされるスライダーカスタマイズメモ

今まで何度か使わせてもらってる、メイン画像に説明テキスト＆リンクが入り、右サイドに小さめ画像とテキストがハイライトされるスライダーのカスタマイズメモです。

参考

jQueryでかっこいいイメージスライダー！ | うぇぶこん-Web Concourse-

設置サンプル

Create Featured Content Slider Using jQuery UI

設置方法

以下をの直前へ。head中でもよいですが。

?
1
2
3
4
5
6
7
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
</script>

以下をお手元のCSS内に記述します。それか専用のCSSを一つ作っちゃうか。
画像の大きさや設定などはよきにはからってください。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
#featured{
    width:710px;
    padding-right:250px;
    position:relative;
    height:250px;
    background:#fff;
    margin-bottom: 30px;
}
#featured ul.ui-tabs-nav{
    position:absolute;
    top:0;
    list-style:none;
    padding:0;
    margin:0;
    width:350px;
    left: 610px;
}
#featured ul.ui-tabs-nav li{
    padding:1px 0; padding-left:13px; 
    font-size:12px;
    color:#666;
}
#featured ul.ui-tabs-nav li img{
    float:left; margin:2px 5px;
    background:#fff;
    padding:2px;
    border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
    font-size:11px; font-family:Verdana;
    line-height:18px;
}
#featured li.ui-tabs-nav-item a{
    display:block;
    height:60px;
    color:#333;  background:#fff;
    line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
    background:#f2f2f2;
}
#featured li.ui-tabs-selected{
    background:url('images/selected-item.gif') top left no-repeat; 
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#ccc;
}
#featured .ui-tabs-panel{
    width:600px;
    height:250px;
    background:#999;
    position:relative;
}
#featured .ui-tabs-panel .info{
    position:absolute;
    top:180px; left:0;
    height:70px;
    background: url('../images/transparent-bg.png');
}
#featured .info h2{
    font-size:18px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color:#fff;
    padding:5px;
    margin:0;
    overflow:hidden;
}
#featured .info p{
    margin:0 5px;
    font-family:Verdana; font-size:11px;
    line-height:15px; color:#f0f0f0;
}
#featured .info a{
    text-decoration:none;
    color:#fff;
}
#featured .info a:hover{
    text-decoration:underline;
}
#featured .ui-tabs-hide{
    display:none;
}

javascript

Posted by ponnao