Slider agregar información a cada imagen

[Maru77]

Hola!

Tengo un slider, que llama las imágenes del siguiente modo:

Código HTML:

slides:  	[			// Slideshow Images
{image : 'img/1.jpg', title : '', thumb : '', url : ''},
{image : 'img/2.jpg', title : '', thumb : '', url : ''},
{image : 'img/3.jpg', title : '', thumb : '', url : ''},
{image : 'img/4.jpg', title : '', thumb : '', url : ''}
],

Y automáticamente muestra las imágenes como fondo, pero quisiera poder agregarle a cada slide algún div con información.

Mi pregunta es si es como se puede agregar en esa parte del código o si hay que desarrollarla de otra forma.

Espero me puedan ayudar, gracias!

[Maru77]

Intenté algo así, pero no funciona :(

Código HTML:

{image : 'materiales/hojas/1.jpg', title : '<div style="position:absolute; float:left; margin-top:180px; width:100px; height:50px; color:#ffffff; z-index:30;">algo de contenido</div>', thumb : '', url : ''},

Alguien podría indicarme si esto es posible? porque asumo que de algun modo se podría insertar un DIV con algún contenido.


El jquery es de http://www.buildinternet.com/project/supersized/

Código HTML:

 <script type="text/javascript">
			
			jQuery(function($){
				
				$.supersized({
				
					// Functionality
					slideshow               :   1,			// Slideshow on/off
					autoplay				:	0,			// Slideshow starts playing automatically
					start_slide             :   1,			// Start slide (0 is random)
					stop_loop				:	0,			// Pauses slideshow on last slide
					random					: 	0,			// Randomize slide order (Ignores start slide)
					slide_interval          :   3000,		// Length between transitions
					transition              :   6, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
					transition_speed		:	1000,		// Speed of transition
					new_window				:	1,			// Image links open in new window/tab
					pause_hover             :   1,			// Pause slideshow on hover
					keyboard_nav            :   1,			// Keyboard navigation on/off
					performance				:	1,			// 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
					image_protect			:	1,			// Disables image dragging and right click with Javascript
															   
					// Size & Position						   
					min_width		        :   0,			// Min width allowed (in pixels)
					min_height		        :   0,			// Min height allowed (in pixels)
					vertical_center         :   1,			// Vertically center background
					horizontal_center       :   1,			// Horizontally center background
					fit_always				:	0,			// Image will never exceed browser width or height (Ignores min. dimensions)
					fit_portrait         	:   1,			// Portrait images will not exceed browser height
					fit_landscape			:   0,			// Landscape images will not exceed browser width
															   
					// Components							
					slide_links				:	'blank',	// Individual links for each slide (Options: false, 'num', 'name', 'blank')
					thumb_links				:	1,			// Individual thumb links for each slide
					thumbnail_navigation    :   0,			// Thumbnail navigation
					slides 					:  	[			// Slideshow Images
														{image : 'materiales/hojas/1.jpg', title : '<div style="position:absolute; float:left; margin-top:180px; width:100px; height:50px; color:#ffffff; z-index:30;">asdasdasdasdasdasdasdasdasdasdsadlgo</div>', thumb : '', url : ''},
														{image : 'materiales/hojas/2.jpg', title : 'asdasdasdasdasdasd', thumb : '', url : ''},  
														{image : 'materiales/hojas/3.jpg', title : '', thumb : '', url : ''},
														{image : 'materiales/hojas/4.jpg', title : '', thumb : '', url : ''},
														{image : 'materiales/hojas/5.jpg', title : '', thumb : '', url : ''}														
												],
												
					// Theme Options			   
					progress_bar			:	1,			// Timer for each slide							
					mouse_scrub				:	0
					
				});
		    });
		    
		</script> 

[Maru77]

Funciona de esta manera:

Código HTML:

{image : 'image/1.jpg', title : '<div id="btinfo"></div>', thumb : '', url : ''},

y lo muestra en:

Código HTML:

<!--Slide counter-->
			<div id="slidecounter">
				<span class="slidenumber"></span> / <span class="totalslides"></span>
			</div>
			
			<!--Slide captions displayed here-->
			<div id="slidecaption"></div> 

Me gustaría poder entonces hacer click sobre ese DIV que agregué y que se despliegue información.

Este código lo hace, pero con el DIV fuera de este ejemplo, no se como llamar a la función desde ahí.

Código HTML:

<script type="text/javascript">
	jQuery(function($) {
		
		var open = false;
		$('#btinfo').click(function () {
			if(open === false) {							
				$('#datos1').css('visibility', 'visible');				
				open = true;
			} else {				
				$('#datos1').css('visibility', 'hidden');	
				open = false;
			}
		});		
});  
</script> 

Les agradecería la ayuda.