Ajoutant du texte html à la glissade d'image jquery surdimensionnée

Avez-vous un exemple de la page sur laquelle vous travaillez ou un exemple en direct?

Pour spécifier un texte différent pour chaque image, vous devrez ajouter un attribut de titre dans votre 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 une superposition de texte pour toutes les images:

Essayez de créer une div dans votre corps principal –

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

Ensuite, donnez à la div un style –

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

L'index z devrait s'assurer que le div apparaît sur l'image d'arrière-plan trop importante.

Merci aux chiens pour la réponse, j'améliore le script de cette façon:

Dans la première ligne de supersized.shutter.js, ajoutez ceci

 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(){ 

Ajoutez ceci pour charger la description de la première image

 desctext; 

Après ligne

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

ajouter

  desctext; 

Maintenant le même script de chien, inclure le numéro d'identification 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éez une page nommée slide_return.php avec un code comme celui-ci:

 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; 

}

Finalement mettre un div divisé #brief_holder dans la même page de la diapositive.

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

J'ai eu le même problème et je suis venu avec cette solution très mauvaise … ça fonctionne, mais peut être amélioré considérablement.

J'ai changé le script pour chaque diapositive pour inclure le numéro d'identification du projet comme ceci:

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

(Gardez à l'esprit que ce n'est qu'un exemple … j'utilise asp pour localiser dynamiquement la liste des diapositives)

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 une division vide et project_brief.asp tire la description de la source.