2

ポップアップウィンドウで製品をプレビューするためにカラーボックスを使用していますが、カラーボックス内でクラウドズームも使用したいと思います。なんらかの理由で、cloudzoomはカラーボックス内では機能せず、通常のブラウザウィンドウで呼び出された場合は正常に機能します。投稿する前に少し検索しましたが、これら2つのスクリプトを一緒に使用することはあまりありません。PERHAPS、colorboxの呼び出し後にonComplete：function（）を使用する必要がありますが、その方法がわかりません。

これは、クラウドズームがページ上で正常に機能するが、カラーボックスにロードされた場合は機能しない、作成したテストページのコードです。自分で試してみたい場合に備えて、すべてのファイル（js、css）へのリンクを次に示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="./js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="./js/cloud-zoom.1.0.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('a.items').colorbox({ width:"80%", height:"90%", href:function(){ return this.href + " #prodpreview"; }});
});
</script>
<link rel="stylesheet" type="text/css" href="./css/cloud-zoom.css" />
<link rel="stylesheet" type="text/css" href="./css/colorbox.css" />
</head>
<body>

<a href="test.php" class="items">Test</a>

<div id="prodpreview" style="margin-top:20px;">
<a href="https://www.google.com/images/srpr/logo3w.png" class="cloud-zoom" id="zoom1" rel="position:'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position:relative; display:block;">
<img src="https://www.google.com/images/srpr/logo3w.png" width="150"/>
</a>
</div>
</body>
</html>
4

2 に答える 2

1

これを試して：

HTMLでアンカータグを次のように置き換えます

<a href="#" class="items">Test</a>

スクリプトでは、次のようなjqueryカラーボックスコードを記述します

$(document).ready(function() {
    $('a.items').colorbox({ 
         width:"80%", 
         height:"90%", 
         href:"#prodpreview",
         inline:true,
         onComplete:function(){
            $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
         }
    });
});

これで問題が解決することを願っています。

于 2012-06-28T16:32:46.560 に答える
0

別のアプローチは、基本的に ColorBox で新しい html 環境を開く ColorBox の iFrame オプションを使用することです。物事はそこでうまくいくはずです。

この方法では、適切な画像を iframe コンテンツ、サイズなどに取り込む方法を考える必要があることに注意してください。

考えるべきこと。

よろしく、 KJM

于 2012-06-29T15:42:22.013 に答える