1

編集可能にする必要がある単純な静的 Web サイトを設計するために、Pulse CMS を使用しています。画像の強調表示と強化に FancyBox を使用しています。

私が望むのは、コードを手動で追加しなくても、すべての画像が FancyBox に自動的に関連付けられることです。

基本的にこのようなもの

<img src="image.jpg">

なるべき

<a class="fancybox" href="image.jpg"><img src="image.jpg"></a>

私が何を目指しているのかが明確になることを願っています。jQuery と PHP をいじってみましたが、よくわかりませんでした。これが可能かどうかはわかりませんが、そうでない場合は代替手段があるかもしれません。

JFK の提案に応えて -- ここで私が間違っていることを教えてください:

<html>
    <head>
        <link rel="stylesheet" href="includes/jquery.fancybox.css" type="text/css" media="screen"/>     
        <script type="text/javascript" src="includes/jquery-1.9.1.min.js" type="text/javascript"></script>  
        <script type="text/javascript" src="includes/jquery.fancybox.js" type="text/javascript"></script>       
        <script type="text/javascript">
            $("img").on("click", function(){
                $.fancybox($(this).attr("src"),{
                    // API options
                    padding : 0 // example
                });
            });
        </script>
    </head>

    <body>

        <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt=""/>

    </body>
</html>
4

5 に答える 5

1

が必要な場合はall the images to automatically be associated with FancyBox、ラップする必要さえないかもしれません.wrap()- それらをアンカーで囲みます。別のアプローチは、 like の fancybox に直接リンクすることclickです: 

$("img").on("click", function(){
    $.fancybox($(this).attr("src"),{
        // API options
        padding : 0 // example
    });
});

この方法では、実際の画像がクリックされるまで何も処理しません。これはパフォーマンスの点で優れています（ページの読み込みごとに100以上の画像がラップされることを考慮してください）

JSFIDDLEを参照してください

注：.on()jQuery v1.7+が必要です

編集：

詳細についてのUmair Abidのコメントは検討する価値があります。ページのすべての画像 (ロゴが含まれる) をファンシーボックスで開きたくない場合があるためです。ライン

$("img").on("click", function(){

...のようにうまくいくでしょう

$("#contentContainer img").on("click", function(){
于 2013-04-08T02:54:47.530 に答える
0

jQuery の .wrap() 関数を使用して、ページ内のすべての画像を、画像の場所を指すアンカー タグでラップします。

于 2013-04-08T01:02:57.253 に答える