アプリ版：「スタンプのみでお礼する」機能のリリースについて

スライドのJavaScriptを探しています。

解決済

  • 質問者：rossi46mail
  • 質問日時：
  • 回答数：1件

このページのトップページのflashの様なスライドのJavaScriptを探しています。
http://www.mcube.jp/

必要な条件は、３つあります。
●メインの画像の左右にも画像が表示されていている（このサイトの様に半透明なら尚良し）
●スライドして切り替わる（このサイトの様に光ったりする余計なエフェクトは必要なし）
●下にサムネイルがついている

これにとても近いスライド（Twilight Slideshow）は見つけたのですが、サムネイルがないため困っています。

上記の条件を満たすスライドのJavaScriptはありますでしょうか。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

あんまり、両サイドに前後の画像が見えているタイプは知らないのですが、ご提示のライブラリの配布サイトの説明に「twilight eventを受け取れる」みたいなことが書いてありますので、デモ用のソースを利用して試してみました。


http://love-media.net/twilight-show-en

スクリプトの内容はまったく見ていませんので、かなり適当ですがご参考までに。
細かなところは、逐次調整してください。
HTMLは配布のソースで、imgのwidth、heigthの指定部分だけCSS化しています。
（サムネイル画像でそのままソースを転用するためです）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="css/twilight.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/twilight.min.js"></script>
<style type="text/css">
<!--
.twilight-wrapper .twilight-box img { width:750px; height:500px; }
.twilight-wrapper .twilight-thumbnail { margin-left:10px; }
.twilight-wrapper .twilight-thumbnail div { float:left; padding:2px; }
.twilight-wrapper .twilight-thumbnail img { width:75px; height:50px; cursor:pointer; }
//-->
</style>

<script type="text/javascript">
<!--
$(document).ready(function() {

$('.twilight-wrapper').each(function(){
$('.twilight-box', this).clone().attr('class', 'twilight-thumbnail').appendTo($(this));
$('.twilight-thumbnail img', this).each(function(n){
$(this).click(function(){
$(document).trigger({ type: 'twilight', index: n});
});
});
});

$('.twilight-show').twilight();

});
//-->
</script>
</head>
<body>
<div class="twilight-wrapper">
<div class="slide-wrapper">
<div class="twilight-show">
<div class="twilight-box">
<div><img src="img/1.jpg" alt=""></div>
<div><img src="img/2.jpg" alt=""></div>
<div><img src="img/3.jpg" alt=""></div>
<div><img src="img/4.jpg" alt=""></div>
<div><img src="img/5.jpg" alt=""></div>
<div><img src="img/6.jpg" alt=""></div>
<div><img src="img/7.jpg" alt=""></div>
<div><img src="img/8.jpg" alt=""></div>
<div><img src="img/9.jpg" alt=""></div>
<div><img src="img/10.jpg" alt=""></div>
</div>
<div class="arrow-left"><img src="img/arrow-left.png" alt=""></div>
<div class="arrow-right"><img src="img/arrow-right.png" alt=""></div>
</div>
</div>
</div>
</body>
</html>

この回答への補足

確認いたしました。

素晴らしいです！！！
できました。

早速、使用させていただきます。

本当にありがとうございました。

補足日時：2012/02/24 10:28
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

返事が遅くなってしまい大変申し訳ございませんでした。
まだ確認しておりませんが、先にお礼をさせていただきます。

遅くなってしまって本当にすみませんでした。

通報する
お礼日時：2012/02/24 10:24

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報