プロが教える店舗＆オフィスのセキュリティ対策術

クロースフェードとライトボックスの組み合わせ

解決済

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

プログラム初心者です。
jQueryで出来るクロスフェードと、同じくjQueryのライトボックスは組み合わせる事が可能でしょうか？
クロスフェードしている画像をクリックするとライトボックスが稼働するというものを作りたいのですが、組み合わせるとクロスフェードしなくなるので無理なのかと。

もし出来るとすればサンプルがあると大変ありがたいのですが。
いかがでしょうか。

通報する

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

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

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

＞組み合わせるとクロスフェードしなくなるので無理なのかと


ライトボックスは使ったことありませんが、おかしなことをやっているとは思えませんので、干渉しないようにしておきさえすれば動作するのではないでしょうか？

試しに、ごく簡単な例を。
画像を重ねているので、ほとんど見えていない状態でも上にある物をクリックしたことになります。

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen">
<style type="text/css">
<!--
#hoge, #hoge li { list-style-type:none; margin:0; padding:0; }
#hoge { postion:relative; }
#hoge li { position:absolute; top:0; left:0; display:none; }
#hoge img { width:300px; height:150px; }
//-->
</style>

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>

<script type="text/javascript">
<!--

$(function(){
　var pointer = 0, max = $("#hoge li").length;
　$("#hoge li:first-child").clone(true).appendTo($("#hoge")).show();

　var interval = setInterval(function(){
　　pointer = ++pointer % max;
　　var selector = "#hoge li:nth-child(" + (pointer+1) + ")";
　　$("#hoge li:visible").fadeOut(1500, function(){ $(this).remove(); });
　　$(selector).clone(true).appendTo($("#hoge")).fadeIn(2000);
　}, 2500);

　$('#hoge a').lightBox();
});

//-->
</script>
</head>
<body>

<ul id="hoge">
<li><a href="img/photo01.jpg" title="fuga1">
<img src="img/photo01.jpg" alt="fuga1">
</a></li>

<li><a href="img/photo02.jpg" title="fuga2">
<img src="img/photo02.jpg" alt="fuga2">
</a></li>

<li><a href="img/photo03.jpg" title="fuga3">
<img src="img/photo03.jpg" alt="fuga3">
</a></li>
</ul>

</body>
</html>

この回答への補足

ご回答ありがとうございます。
書き忘れて恐縮なのですが
jQueryではないライトボックス（Lightbox JS v2.0とか）は組み合わせる事が可能でしょうか？

よろしくお願いします。

補足日時：2012/04/18 17:18
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

スイマセン間違えてました。Lightbox JS v2.0はjQueryですね。

どうやら組み合わせが出来ました。

ありがとうございます。

通報する
お礼日時：2012/04/18 17:21

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

Q質問する（無料）

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

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

Q質問する（無料）

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

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

おすすめ情報