jqueryライトボックスを作成する

私は画像付きのリンクをクリックしたときにライトボックスを表示させるために3つの異なるjqueryプラグインを試しました。これは私が現在試みているものですhttp://balupton.github.com/jquery-lightbox/demo/プラグインのソースを頭に付け加えました。画像のリンクはrel = 'ライトボックス'ですが、画像をクリックするとブラウザが画像を開くようになります。jqueryライトボックスを作成する

これは、これは私がイメージが

<a rel="lightbox" href="someexternalimage.jpg"><img class="contentimg" style="display:block; max-width:100%;max-height:500px; padding-top:5px; margin-bottom:3px" src="someexternalimage.jpg"></a>

をリンクしている方法です、私は頭の中に持っているもの

<!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"> 
<meta name="description" content="sumthing"> 
<meta name="keywords" content="stuff"> 
<link rel="stylesheet" type="text/css" href="/site_media/css/peda.css"> 
<link rel="icon" href="favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="/site_media/favicon.ico" type="image/x-icon"> 
<script type="text/javascript" src="/site_media/js/jquery.js"></script> 
<script type="text/javascript" src="/site_media/jquery-lightbox/scripts/jquery.lightbox.min.js"></script> 
<script src="/site_media/js/imgscale.js"></script> 
<script type="text/javascript">

で誰かが私を助けることを願って、おかげで

出典

2011-07-31 madprops

スクリプトがページに追加され、ライトボックスが推奨するバージョンのjqueryを使用していることを確認してください。私はバイオリンで動作するようになったので、それはあなたのインストールとは何かを持っていると思う：

http://jsfiddle.net/jensbits/u6v98/

Installation instructions

出典

2011-07-31 20:06:51

私はあなたのフィドルを試してみましたjquery 1.6.1これは私が使用しているもので、動作しますが、ライトボックスjsが正しくロードされているので、ソースコード内をクリックして参照してください：/ – madprops

バイディングはうまく動作します。私はあなたのインストールやコードで何かが矛盾していると仮定することができます。エラーを複製するテストリンクがあれば、これで解決できます。そうでなければ、何も進まない。 –

また、ライトボックスjsを追加しなかったのですか？ – madprops

あなたがそれを置く場合<a>タグを使用する場合は、デフォルトのイベントハンドラが起動しないようにしてください。発射からデフォルトのイベントを防止することにより

$('a[rel=lightbox]').click(function(event){ 
    event.preventDefault(); 
});

、あなたはそれがリンクの内側だとき、それは通常どおりのようsomeexternalimage.jpgにリダイレクトしていないブラウザを語っています。

出典

2011-07-31 19:50:59 AlienWebguy

私はまだそれが正常に画像を開いて保持していることを追加しました：/ – madprops

jqueryライトボックスを作成する

答えて

関連する問題