web-dev-qa-db-ja.com

カラーボックスを使用して、ハードコーディングせずにページに非表示のdivを表示するにはどうすればよいですか？

Colorboxを使用して、ページに非表示のdivのhtmlコンテンツを表示しています。私はこれを以下で完全に機能させることができます：

$("a.colorbox").colorbox({width:"600px", inline:true, href:"#344"});

これにより、IDが344のdivが表示されます。

ただし、WordPressを使用してスケーラブルで動的なページを構築しようとしているため、jquery呼び出しでdivをハードコーディングするのではなく、関数を介してdivのIDを取得できるようにしたいと考えています。

JackMooreの例を変更しました。

$("a[rel='example']").colorbox({title: function(){
    var url = $(this).attr('href');
    return '<a href="'+url+'" target="_blank">Open In New Window</a>';
}});

次のようになります。

$(".colorbox").colorbox({width:"600px", inline:true, href:function(){
    var elementID = $(this).attr('id');
    return elementID;
}});

これに伴う問題は、colorbox関数のhrefプロパティが、IDの前に＃マークが付いた文字列を探していることです。 ＃を関数の前に連結するさまざまな方法を試しました。これには、戻り値の＃や、＃をelementID変数に連結する方法が含まれます。運がない。

また、Jackの例の構文を（運がなくても）使用して、returnステートメントが次のようになるようにしました。

return "#'+elementID+'";

私の基本的な質問は、カラーボックスを使用して、すべてをハードコーディングせずにページに非表示のdivを表示するにはどうすればよいですか？

あなたの助けをありがとう、Jiert

javascriptjquerywordpresscolorbox
14
Jiert
return "#" + elementID;

デビッドが言うように、望ましい効果があります。

4
Liam Bailey

私は上記の答えのどれも本当に好きではありませんでした。これは私がそれをした方法です（似ていますが、まったく同じではありません）。また、Javascriptとカラーボックスプラグインに少し慣れていない人のために、完全にコメントしました。

$(document).ready(function() { //waits until the DOM has finished loading
    if ($('a.lightboxTrigger').length){ //checks to see if there is a lightbox trigger on the page
        $('a.lightboxTrigger').each(function(){ //for every lightbox trigger on the page...
            var url = $(this).attr("href"); // sets the link url as the target div of the lightbox
            $(url).hide(); //hides the lightbox content div
            $(this).colorbox({
                 inline:true, // so it knows that it's looking for an internal href
                 href:url, // tells it which content to show
                 width:"70%",
                 onOpen:function(){ //triggers a callback when the lightbox opens
                    $(url).show(); //when the lightbox opens, show the content div
                 },
                 onCleanup:function(){
                    $(url).hide(); //hides the content div when the lightbox closes
                 }
            }).attr("href","javascript:void(0)"); //swaps the href out with a javascript:void(0) after it's saved the href to the url variable to stop the browser doing anything with the link other than launching the lightbox when clicked
              //you could also use "return false" for the same effect but I proffered that way
        })
     }
});

そしてこれはhtmlです：

<a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a>
<div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page -->
     <p>Lightbox content goes here</p>
</div>

1ページの複数のライトボックスで機能すると思いますが、テストはしていません。

7
Daniel Tonon

私は同じ問題に直面しています。あなたのhtmlはどのように見えますか？つまり、「div」をどのように構成しましたか

私のは次のようになります：Javascript：

<script>
    $(document).ready(function () {
    $("a.colorbox").colorbox({ width: "50%", inline: true, href: function () {
          var elementID = $(this).attr('id');
          return "#" + elementID;
       } 
      }); 
    });
</script>

そして、htmlは次のようになります（display：noneを変更してみました）：

<a class='colorbox' href="#">Inline HTML</a>
   <div style="display:none">
       <div id="pop">
          This data is to be displayed in colorbox
       </div>
   </div>
6
Ash

これは私がそれを機能させる方法です

HTML :(回答の1つの例から取得）

<a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a>
<div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page -->
     <p>Lightbox content goes here</p>
</div>

Javascript：

$('a.lightboxTrigger').click(function(){ 
    var ref = $(this).attr("href");
    $.colorbox({ html: $(ref).html() });
    $.colorbox.resize();
 });
1
Ricky G