Comment puis-je utiliser colorbox pour afficher les divs sur ma page sans le coder en dur?

Je suis en utilisant Colorbox pour afficher le contenu html de caché divs sur ma page. Je peux obtenir que cela fonctionne parfaitement avec les éléments suivants:

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

Affiche le div avec l'ID de 344.

Cependant, parce que je suis en train de construire une solution évolutive et dynamique de la page avec WordPress, je veux être en mesure de saisir l'ID de mes divs au travers d'une fonction, plutôt que de coder en dur dans le jquery appel.

J'ai modifié Jack Moore exemple:

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

de sorte qu'il ressemble à ceci:

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

Le problème, c'est que le href propriété de la colorbox fonction est à la recherche d'une chaîne de caractères avec une # marque en face de l'ID. J'ai essayé différentes façons de la concaténation de la # sur le devant de la fonction, y compris le n ° de la valeur de retour, et la concaténation de la # pour le elementID variable. Pas de chance.

J'ai aussi essayé d'utiliser la syntaxe de Jack l'exemple (avec pas de chance), de sorte que mon instruction return ressemblait à ceci:

return "#'+elementID+'";

Je pense que ma question de base est: Comment puis-je utiliser colorbox pour afficher les divs sur ma page sans le coder en dur tout?

Merci pour votre aide,
Jiert

  • Ma première pensée est que ce ne serait pas return "#'+elementID+'" retourner une chaîne de caractères? Peut-être return "#" + elementID; serait plus proche.
InformationsquelleAutor Jiert | 2010-09-24
  1. 4
    return "#" + elementID;

    aura l'effet désiré, comme David le dit.

    • Regardez: stackoverflow.com/editing-help pour plus de conseils sur la façon de formater vos réponses, de sorte que le code regarde comme le code, par exemple. +1, par le chemin (dans une honteuse loi de l'auto-célébration...) =)
    • Génial, merci les gens! Qui ne fonctionne en effet. L'apprécier 😀
    • Pouvez-vous partager votre css/html, qui est allé avec le jQuery? Je vais avoir un problème similaire...à quoi ressemblait-il?
    InformationsquelleAutor Liam Bailey
  2. 7

    Je n'ai pas vraiment comme l'une des réponses données ci-dessus. Voilà comment j'ai fait (similaire mais pas tout à fait la même).
    J'ai aussi entièrement commentée pour les gens un peu nouveau à Javascript et à la colorbox brancher.

    $(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
        })
     }
});

    Et c'est le 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>

    Je pense qu'il serait de travailler avec plusieurs caissons lumineux sur une page, mais je ne l'ai pas testé avec qui.

    • Il a été très utile qui vous a documenté la 'inline' option! Je voudrais ajouter que si vous mettez votre cible à l'intérieur d'un div caché vous pouvez renoncer à la onOpen et onCleanup les étapes indiquées ici.
    • Bon point. 🙂 J'ai écrit ça quand j'étais encore un peu inexpérimenté.
    InformationsquelleAutor Daniel Tonon
  3. 6

    Je suis confronté à la même question. Quel est votre code html ressemble? sens, comment avez-vous la structure de votre "divs"

    Le mien ressemble à ça:
    Javascript:

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

    Et le code html ressemble (j'ai essayé de changer le 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>
    • Vous devez définir le href de votre .colorbox lien vers #la pop comme:
    • <pre><a class='colorbox' href="#pop">Inline HTML</a> <div style="display:none"> <div id="pop"> ces données sont affichées dans colorbox </div> </div></pre>
    InformationsquelleAutor Ash
  4. 1

    C'est la façon dont je l'ai eu à travailler

    HTML: (prises à partir de l'exemple dans l'une des réponses)

    <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();
 });
    InformationsquelleAutor Ricky G