Avancée des Légendes avec bxslider

Cette question a déjà été posée, mais n'a pas de réponse - je le crois parce que pas assez de renseignements ont été fournis.

Je suis en utilisant le bxslider comme mon modèle. Voir ici:
http://bxslider.com/examples/image-slideshow-captions

Je peux créer très simplement de la légende à l'aide de l'attribut "title", mais je veux être en mesure de créer des sous-titres (avec des attributs différents, comme le texte plus petit) et je veux en faire un lien. J'ai essayé de mettre en œuvre une div à l'intérieur du conteneur, et peut-être de toute évidence, je ne peux le faire que pour la synchronisation avec le curseur, sans les mettre en œuvre avec jquery. J'ai aussi essayé en modifiant le CSS en vain.

Comment puis-je ajouter une légende plus que le titre de l'image? Comme un div de la superposition de l'image?

Votre violon ne fonctionne pas...
Je suis juste en utilisant que de partager la totalité du code. Il est tout à fait un peu. Je ne sais pas comment obtenir que le violon de travail. C'est de travailler sur mon site.
Ok, vérifier ma réponse.
Je crois à la fois les réponses doivent travailler. Essayez-les et laissez-nous savoir où vous êtes confrontés à des problèmes.

OriginalL'auteur RandomPleb | 2014-02-15

  1. 12

    Vous n'avez même pas besoin d'utiliser les sous-titres de l'option offerte par bxslider.
    Ajouter les sous-titres dans le cadre de la balise li que les formes de votre diapositive. C'est ce que les légendes:véritable option ne permet de toute façon, je.e ajoute la balise div avec bx-légende de la classe à votre diapositive.

    Pour exemple:

      <li>
      <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
      <div class="caption1"> 
        <span>Image 1</span>
        <div class="caption2"><a id="img1a" href="#">Visit Australia</a></div>
      </div>
 </li>

    De cette façon, en utilisant le css, vous pouvez jouer avec les tailles de police.

    Voici la le violon http://jsfiddle.net/s2L9P/

    Génial! Elle fonctionne. Maintenant, je peux vraiment personnaliser ce. Merci pour l'explication.
    heureux de vous aider 🙂
    vous pouvez également supprimer les légendes option dans l'appel d'api
    Avec les versions plus récentes de bxslider vous aurez besoin d'un élément span à l'intérieur d'un .bx-caption div: <li><img src="/img.png" /><div class="bx-caption"><span>My caption</span></div></li>

    OriginalL'auteur VJS

  2. 1

    Je pense que j'ai résolu votre problème, mais je ne peux pas le tester, parce que votre violon ne fonctionne pas comme vous l'avez créé.

    Modifier le code de Appends image captions to the DOM:

        /**
     * Appends image captions to the DOM
     * NETCreator enhancement (http://www.netcreator.ro)
     */
    var appendCaptions = function(){
        //cycle through each child
        slider.children.each(function(index){
            //get the image title attribute
            var title = $(this).find('img:first').attr('title');
            var nc_subtitle = $(this).find('img:first').attr('nc-subtitle');
            //append the caption
            if (title != undefined && ('' + title).length && nc_subtitle != undefined && ('' + nc_subtitle).length) {
                $(this).append('<div class="bx-caption"><span class="title">' + title + '</span><br/><span class="nc_subtitle">' + nc_subtitle + '</span></div>');
            }
        });
    }

    Maintenant, vous pouvez ajouter des sous-titres à vos titres:

    <a href ="page.php">
    <img src="http://calindragan.files.wordpress.com/2011/01/winter.jpg" title="title 1 here" nc-subtitle="The second title"/>
</a>

    Vous pouvez définir le style des sous-titres que vous souhaitez, à l'aide de la classe CSS nc_subtitle.

    Espère que cela aide!

    MODIFIER

    Modifier l'ensemble de JavaScript partagé par vous tripoter ce:

    http://pastebin.com/0fvUezg1

    Et le HTML:

    http://pastebin.com/T038drDV

    Il fonctionne.

    Hmm. Il ne fonctionne pas. Votre nouvelle addition m'aide vraiment à comprendre comment cela fonctionne bien.

    OriginalL'auteur NETCreator Hosting - WebDesign