l'ajout de texte html à supersized jquery image de la diapositive

je veux juste ajouter du texte html à la célèbre image slider supersized.

C'est leur page de démonstration :
http://buildinternet.com/project/supersized/slideshow/3.2/demo.html.

Le code html peut être juste à l'endroit de la "media temple (ve) serveur de texte" dans la démo.

Je suis aussi en train d'essayer d'ajouter quelques jolies de l'animation dans le texte.

Mais je ne vois pas où écrire le html et comment l'ajouter au diaporama, de sorte que chaque image a sa propre html attaché à elle.

Leur API semble aussi obscur pour moi dans la mise en œuvre de ce que j'ai dit.

Tout un là-bas?

OriginalL'auteur Istiaque Ahmed | 2011-10-31

  1. 2

    Vous avez un exemple de la page, vous travaillez sur un code ou un exemple vivant?

    Pour spécifier un texte différent pour chaque image, vous devez ajouter l'attribut de titre dans votre code javascript, l'exemple de la démo est -

     [ //Slideshow Images
{image : 'http://example.com/example.jpg', title : 'ADD A CAPTION HERE', thumb : 'http://example.com/example.jpg', url : 'http://www.example.com'}
]

    Pour ajouter du texte en superposition pour toutes les images:

    Essayez de créer une div à l'intérieur de votre corps principal -

    <div id="message-box">Hi, this is my text.</div>

    Puis donner la div style -

    #message-box {
  z-index: 9999;
  float: left;
  margin-left: 30px;
}

    Le z-index devrait veiller à ce que la div s'affiche au-dessus de la supersized image d'arrière-plan.

    la page de démonstration du curseur est mon exemple. Comment puis-je ajouter un texte différent pour chaque image dans le diaporama ? Ce qui va ur code ne plz? même texte pour toutes les images>
    Découvrez la version révisée de la réponse sur un texte différent pour chaque image.
    le titre est déjà là, et ces différentes titl pour les différentes images apparaissent bien sur la démo de diaporama. Je n'ai pas trouver de solution à mon problème.... comment puis-je créer un autre texte pour chaque image à afficher sur l'image elle-même dans une chanson ?

    OriginalL'auteur Tom

  2. 1

    Grâce chiens pour la réponse, j'ai améliorer le script de cette façon:

    dans la première ligne de supersized.shutter.js ajouter cette

    desctext = function() {
    var projID = api.getField('proj_id');
        var url = "slide_return.php?id="+projID;
        $('#brief_holder').load(url);
};

    puis, après la ligne

     _init : function(){

    ajouter à la charge de la description de la première image

    desctext;

    après la ligne

     if (vars.slide_current.length){
            $(vars.slide_current).html(vars.current_slide + 1);
        }

    ajouter

     desctext;

    maintenant même des chiens de script, veuillez indiquer le numéro de la description comme ceci :

    slides:[//Slideshow Images
            {image : 'images/index_1.jpg', proj_id : '1'},
            {image : 'images/index_2.jpg', proj_id : '2'},
            {image : 'images/index_3.jpg', proj_id : '3'}

    ]

    créer une page nommée slide_return.php avec ce code:

    switch($_GET['id']){
case "1":
    echo "<h1><a href='#'>Text Link for slide 1</a></h1>";
break;
case "2":
    echo "<h1><a href='#'>Text Link for slide 2</a></h1>";
break;
case "3":
    echo "<h1><a href='#'>Text Link for slide 3</a></h1>";
break;

    }

    enfin mettre un vide div #brief_holder dans la même page de la diapositive.

    permettez-moi de tester le code .

    OriginalL'auteur Manuel Fasano

  3. 0

    Vous pouvez écrire ce que vous voulez sur la page d' <ul id="demo-block">....</ul> si vous avez d'origine demo.html cette page ul bloc est-ther..

    un texte différent pour chaque image. comment faire alors?

    OriginalL'auteur Sonal Khunt

  4. 0

    j'ai eu le même problème et est venu avec cette très mauvaise qualité de la solution...
    il fonctionne, mais peut-être améliorée considérablement.

    j'ai modifié le script pour chaque diapositive pour inclure le numéro d'identification du projet comme celui-ci :

    {image : 'content/pic1.jpg', title : 'title here', url : '', proj_id : '#projectID#'},

    (gardez à l'esprit, c'est juste un exemple... je utiliser asp pour remplir dynamiquement les diapositives de la liste)

    puis dans supersized.shutter.js j'ai ajouté après la ligne 

    afterAnimation : function(){

    ce 

    var projID = api.getField('proj_id');
var url = "project_brief.asp?id="+projID;
$('#brief_holder').load(url);

    où #brief_holder est un div vide et project_brief.asp tire la description de la source.

    OriginalL'auteur Dog