Foros del Web » Programando para Internet » Jquery »

Problema con tooltip en slider

Estas en el tema de Problema con tooltip en slider en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/07/2013, 18:42
 
Fecha de Ingreso: agosto-2012
Mensajes: 54
Antigüedad: 12 años, 3 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
  #2 (permalink)  
Antiguo 17/07/2013, 16:27
 
Fecha de Ingreso: agosto-2012
Mensajes: 54
Antigüedad: 12 años, 3 meses
Puntos: 1
Respuesta: Problema con tooltip en slider

hola nuevamente bueno tengo casi solucionado el problema el código es este

if (settings.bullets) {
defaul.Bullet = $('<menu>');
$(defaul.Bullet).insertAfter($($this));
for (bull = 0; bull < defaul.bulls; bull += 1) {
prewto = offspring.eq(bull);
if (!prewto.is('img')) {
prewto = prewto.find('img:first');
}
defaul.Bullet.append('<a rel="' + bull + '"><span class="mounting"><span class="tooltip"><img src="' + prewto.attr('data-icon') + '" ></span></span></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;
});
}
if (settings.tooltips) {
$('a', defaul.Bullet).mouseenter(function () {
$('.mounting').show();
$('.mounting').css({left: '35% ', opacity: 1});
$('.tooltip').animate({left: '0'}, {easing: 'swing'});
$('.tooltip').find('img:first').stop().animate({wi dth: '160px', height: '240px'}, {duration: 2000, easing: 'swing'});
}).mouseleave(function () {
$('.tooltip').find('img:first').stop().css({width: '80px', height: '120px'});
$('.mounting').hide();
});
}
tengo los tooltip según el bullet pero resulta que no importa en cul bullet me posicione se muestran todos los tooltip en cada bullet como puedo corregir esto
agradezco la ayuda

Etiquetas: html, javascript, slider, tooltip
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:33.