Partager Ce plugin ne fonctionne pas dans le titre de FancyBox

Je suis plutôt nouveau pour toutes les choses, JavaScript, alors, supportez-moi 🙂 J'essaie d'ajouter ShareThis plugin au titre de FancyBox afin que les utilisateurs puissent partager une certaine image. Il se présente bien, mais rien ne se produit lorsque je clique sur les boutons "partager". Le même plugin fonctionne sur une page régulière, alors je suppose que c'est un script conflictuel (script de plugin dans le script FancyBox). Malheureusement, je ne connais pas JavaScript assez bien pour le résoudre seul, mais j'ai vraiment besoin de ça pour fonctionner …

Si quelqu'un sait comment le résoudre, je l'apprécierai vraiment! Voici ce que j'ai jusqu'à présent codé par code:

Script pour FancyBox (y compris l' affichage des éléments dans le titre de Fancybox ):

$(document).ready(function() { $(".wrap").fancybox({ closeClick : false, nextEffect: 'fade', prevEffect: 'fade', beforeLoad: function() { var el, id = $(this.element).data('title-id'); if (id) { el = $('#' + id); if (el.length) { this.title = el.html(); } } }, helpers : { title: { type: 'inside' }} }); });

Voici ce que je dois montrer dans le titre:

 <div id="title1" class="hidden"> <div class='share'> <span class='st_facebook_hcount' displayText='Facebook'></span> <span class='st_twitter_hcount' displayText='Tweet'></span> <span class='st_pinterest_hcount' displayText='Pinterest'></span> <span class='st_email_hcount' displayText='Email'></span> </div> <p>Some description</p> </div>

J'ai inclus le script ShareThis de leur site Web.

Aucune suggestion?

En entrant dans le problème, il semble que les boutons ShareThis ne fonctionnent pas vraiment sur les appels Ajax qui renvoient le HTML, ce qui signifie que le bouton ShareThis est défini dans les données synchrones. Parce que le déplacement / copie du contenu de <div id="title1"> dans le title de fancybox ne fonctionnera pas indépendamment du fait que le bouton html de ShareThis est parfaitement rendu.

La solution de contournement consiste à construire les boutons dynamiquement tout en ouvrant Fancybox et en invitant le script ShareThis à remettre ces boutons à nouveau (dans le title ) à l'aide de leur fonction stButtons.locateElements(); Lire mroe ICI . Bien sûr, nous devons utiliser les rappels de fancybox pour synchroniser la tâche.

Tout d'abord, puisque ce que nous voulons partager est spécifiquement le contenu à l'intérieur de fancybox (je suppose) et non pas la page entière, nous devons créer la fonction qui crée les boutons ShareThis et passer l'URL à partager ainsi

 function buildShareThis(url){ var customShareThis = "<div class='share'>"; // class for styling maybe customShareThis += "<span class='st_facebook_hcount' displayText='Facebook' st_url='"+url+"'></span> "; customShareThis += "<span class='st_twitter_hcount' displayText='Tweet' st_url='"+url+"'></span>"; customShareThis += "<span class='st_pinterest_hcount' displayText='Pinterest' st_url='"+url+"' st_img='"+url+"' ></span>"; customShareThis += "<span class='st_email_hcount' displayText='Email' st_url='"+url+"'></span>"; customShareThis += "</div>"; return customShareThis; }

… la fonction ci-dessus crée fondamentalement la même structure html que dans le code que vous souhaitez afficher dans le title . Notez que j'ai ajouté certains attributs ShareThis (st_url et st_img dans le cas de … Voir la documentation ShareThis sur les propriétés et les informations de partage)

Ensuite, le html peut être quelque chose comme ça

 <a href="images/01.jpg" class="fancybox" data-fancybox-group="gallery" data-caption="some description 01"><img src="images/01t.jpg" alt="thumb 01" /></a> <a href="images/07.jpg" class="fancybox" data-fancybox-group="gallery" data-caption="description two" ><img src="images/07t.jpg" alt="thumb 02" /></a> <a href="images/08.jpg" class="fancybox" data-fancybox-group="gallery" data-caption="third description 03" ><img src="images/08t.jpg" alt="thumb 03" /></a>

Notez les attributs data-* définis pour chaque ancre afin que nous puissions transmettre des informations supplémentaires à fancybox.

Ensuite, les rappels de fancybox:

1) Utilisez beforeShow pour créer le title appelant buildShareThis(url) et ajoutez la légende à partir de l'attribut de data-caption (le cas échéant):

  beforeShow: function() { var caption = $(this.element).data("caption") ? $(this.element).data("caption") : ""; this.title = this.title ? this.title + buildShareThis(this.href) + caption : buildShareThis(this.href) + caption; }

2) appelez ShareThis ' stButtons.locateElements() utilisant afterShow :

  afterShow: function(){ stButtons.locateElements(); }

…. Cela devrait faire l'affaire.

REMARQUE : Vous devez toujours lier les scripts ShareThis dans votre document comme

 <script type="text/javascript">var switchTo5x=true;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript">stLight.options({publisher: "ur-7957af2-87a7-2408-5269-db75628d3a14"});</script>

(Utilisez votre propre identifiant d' publisher )

Cela a été testé à l'aide de la dernière version de fancybox à ce jour (v2.1.2), voir DEMO DE TRAVAIL ICI . N'hésitez pas à vérifier le code source et à le modifier en fonction de vos besoins.

Je suppose que cela ne fonctionne pas pour cette raison.

Vous chargez le code de la boîte de fantaisie lorsque le document est prêt à utiliser $ (document) .ready (ce qui est bien). Le code qui initialise les éléments de sharethis a probablement déjà été exécuté (il n'est pas clair de votre exemple de code lorsque vous le chargez). Donc, lorsque vous créez un nouvel ensemble d'éléments Shareth à l'aide de $ (document) .ready, ils ne sont pas traités par le même code.

Essaye ça:

 $(document).ready(function() { $(".wrap").fancybox({ ## no change to your code above ## }); // put your publisher code in below stLight.options({publisher:'12345'}); });