Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/07/2013, 18:42
liberenatu
 
Fecha de Ingreso: agosto-2012
Mensajes: 54
Antigüedad: 11 años, 8 meses
Puntos: 1
Problema con tooltip en slider

buenas noches agradezco cualquier ayuda la cuestión es la siguiente deseo agregar uno tooltip a los bullets de mi slider la cuestión es que no e dado con el chiste muestro parte del código del slider correspondiente al bullet

if (settings.bullets) {
defaul.Bullet = $('<menu>');
$(defaul.Bullet).insertAfter($($this));
for (bull = 0; bull < defaul.bulls; bull += 1) {
defaul.Bullet.append('<a rel="' + bull + '"></a>');
}
}
if (settings.bullets) {
$('a:eq(' + defaul.slider + ')', defaul.Bullet).addClass('active');
$('a', defaul.Bullet).on('click', function () {
if (defaul.jumpsprev) {
return false;
}
if (defaul.jumpsnext) {
return false;
}
window.clearInterval(interval);
if (settings.autoSlider) {
interval = window.setInterval(function () {
init.go();
}, 6000);
}
img.attr('src', defaul.heir.attr('src'));
defaul.slider = $(this).attr('rel') - 1;
init.go(false);
return false;
});
}
y este seria su HTML

<figure>
<a href="http://www.sena.edu.co/" rel="nofollow" target="_blank">
<img alt="outsourcing" src="../../DRAWING/png/SlideShow/outsourcing.png" data-icon="../../DRAWING/png/SlideShow/einstein.png">
</a>
<a href="http://www.tigo.com.co/" rel="nofollow" target="_blank">
<img alt="archivo" src="../../DRAWING/png/SlideShow/archivo.png" data-icon="../../DRAWING/png/SlideShow/auditor.png">
</a>
</figure>


ahora muestro el del tooltip que e realizado


var $ts_preview_wrapper = $('.ts_preview_wrapper'), $ts_preview = $('.marco');

$('li').mouseenter(function() {
var idx = $(this).index();
$('.ts_thumbnails').show();
var new_left = $(this).position().left;
$('.ts_thumbnails').animate({left : new_left + 'px'}, { duration: 'slow', easing: 'linear' });
$ts_preview.animate({left : -idx * 100 + 'px'}, { duration: 'slow', easing: 'linear' });
var ts_preview_w = $ts_preview.width();
$ts_preview.css('width' , (ts_preview_w - 100 + 200) + 'px');
$ts_preview.children().eq(idx).find('img').stop(). animate({width : '200px',height : '300px'}, 2000);
}).mouseleave(function(){
var idx = $(this).index();
$ts_preview.children().eq(idx).find('img').stop(). css({width : '100px', height : '150px'});
$('.ts_thumbnails').hide();
});
y aquí esta su HTML

<figure>
<li><a href=""></a></li>
<li><a href=""></a></li>
<span class="ts_thumbnails">
<span class="ts_preview_wrapper">
<span class="marco">
<li><img src="images/thumbs3/1.jpg" alt="Thumb 1" /></li>
<li><img src="images/thumbs3/2.jpg" alt="Thumb 2" /></li>
</span>
</span>
</span>
</figure>

es claro que entraría en conflicto la cuestión es como poder arreglar este problema