Comunidad de diseño web y desarrollo en internet online

Problemas con un slide

Citar            
MensajeEscrito el 29 Abr 2012 07:55 pm
A ver si alguien me puede ayudar.
Tengo un slide que va cambiando de una imagen a otra según vas pulsando el botón correspondiente, pero yo quiero que el slide vaya cambiando de imagen solo cada X tiempo, que tendría que cambiar en esta parte del código?

$('#front-slides').slides({
preload: true,
generateNextPrev: true,
slideSpeed: 500,
animationStart: function(current){
$slideCaption = $(".slides_container div.slide:eq("+ (current-1) +") .caption").text();
$("#headline h6").text($slideCaption);

if($slideCaption != ''){
$("#headline").stop().hide().slideDown(600);
}else{
$("#headline").hide();
}
}
});

// default headline
$firstCaption = $(".slides_container div.slide:eq(0) .caption").text();
if($firstCaption != ''){
$("#headline h6").text($firstCaption);
}else{
$("#headline").hide();
}

Por arte

68 de clabLevel



 

safari
Citar            
MensajeEscrito el 29 Abr 2012 09:40 pm
Averigua sobre setInterval, que te permite ejecutar una función cada x milisegundos. Así puedes llamar a la función que cambia el slide en determinado tiempo

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 30 Abr 2012 12:35 am
Tendrías que mirar todo el código del slide para identificar que función o que lineas de codigo se encargar de realizar el movimiento y después como dice thefriky, ejecutarlas por medio de un setInterval.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 30 Abr 2012 08:28 am
Este es todo el código:

// Jquery with no conflict
jQuery(document).ready(function($) {


//##########################################
// Nav menu
//##########################################

$("ul.sf-menu").superfish({
animation: {height:'show'}, // slide-down effect without fade-in
delay: 400 , // 1.2 second delay on mouseout
autoArrows: false,
speed: 'normal'
});

//##########################################
// Header nav
//##########################################

$(document).mousemove(function(e){
if((e.pageY) < 200){
$("#headernav").fadeIn();
}else{
$("#headernav").fadeOut();
}
});


//##########################################
// Tool tips
//##########################################

$('.poshytip').poshytip({
className: 'tip-twitter',
showTimeout: 1,
alignTo: 'target',
alignX: 'center',
offsetY: 5,
allowTipHover: false
});

$('.form-poshytip').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'right',
alignY: 'center',
offsetX: 5
});

//##########################################
// Tweet feed
//##########################################

$("#tweets").tweet({
count: 3,
username: "ansimuz"
});


//##########################################
// Front slides
//##########################################

$('#front-slides').slides({
preload: true,
generateNextPrev: true,
slideSpeed: 500,
animationStart: function(current){
$slideCaption = $(".slides_container div.slide:eq("+ (current-1) +") .caption").text();
$("#headline h6").text($slideCaption);

if($slideCaption != ''){
$("#headline").stop().hide().slideDown(600);
}else{
$("#headline").hide();
}
}
});

// default headline
$firstCaption = $(".slides_container div.slide:eq(0) .caption").text();
if($firstCaption != ''){
$("#headline h6").text($firstCaption);
}else{
$("#headline").hide();
}

//##########################################
// Reel slides
//##########################################

$('#reel').slides({
preload: true,
generateNextPrev: false,
generatePagination: false,
next: 'next',
slideSpeed: 700
});


//##########################################
// Rollovers
//##########################################

$('.featured-posts .thumb, .gallery-thumbs a, .work-thumbs a').live("mouseover mouseout", function(event){

if ( event.type == "mouseover" ) {
thiImage = $(this).children('img');
thiImage.stop().animate({opacity:0.3},{queue:false,duration:200});
}else{
thiImage.stop().animate({opacity:1},{queue:false,duration:200});
}

});

//##########################################
// QUICKSAND FILTER
//##########################################

// get the initial (full) list

var $filterList = $('ul#portfolio-list');

// Unique id
for(var i=0; i<$('ul#portfolio-list li').length; i++){
$('ul#portfolio-list li:eq(' + i + ')').attr('id','unique_item' + i);
}

// clone list
var $data = $filterList.clone();

// Click
$('#portfolio-filter a').click(function(e) {

if($(this).attr('rel') == 'all') {
// get a group of all items
var $filteredData = $data.find('li');
} else {
// get a group of items of a particular class
var $filteredData = $data.find('li.' + $(this).attr('rel'));
}

// call Quicksand
$('ul#portfolio-list').quicksand($filteredData, {
duration: 500,
attribute: function(v) {
// this is the unique id attribute we created above
return $(v).attr('id');
}
}, function() {
// restart functions
galleryRestart();
});
// remove # link
e.preventDefault();

});


// Gallery restart
function galleryRestart(){

// prettyPhoto restart
$("a[rel^='prettyPhoto']").prettyPhoto();

// preserve the status of the description
$displayText = $(".gallery-filter .layout-notext").hasClass("active");
//console.log($displayText);

if($displayText){
$filterList.find(".thumb-description").slideUp(0);
}

}

galleryRestart();

//##########################################
// Gallery layout display
//##########################################

var $layout_text = $(".gallery-filter .layout-text");
var $layout_notext = $(".gallery-filter .layout-notext");
var $gallery = $filterList;

// text button
$layout_text.live('click', function(){
if(!$(this).hasClass("active")){
$(this).addClass("active");
$layout_notext.removeClass("active");
$gallery.find(".thumb-description").slideDown();
}
});

// no text button
$layout_notext.live('click', function(){
if(!$(this).hasClass("active")){
$(this).addClass("active");
$layout_text.removeClass("active");
$gallery.find(".thumb-description").slideUp();
}
});



//##########################################
// Comments switcher
//##########################################

var $comments_switcher = $(".show-comments");
var $comments_holder = $(".comments-switcher");

$comments_switcher.click(function(){
if($comments_holder.css("display") == "block"){
$comments_switcher.children("span").text("click to show");
}else{
$comments_switcher.children("span").text("click to hide");
}
$comments_holder.slideToggle();
});

});

// search clearance
function defaultInput(target){
if((target).value == 'Search...'){(target).value=''}
}

function clearInput(target){
if((target).value == ''){(target).value='Search...'}
}

Por arte

68 de clabLevel



 

safari
Citar            
MensajeEscrito el 01 May 2012 02:05 am

Por kristerger

21 de clabLevel



 

msie
Citar            
MensajeEscrito el 01 May 2012 09:31 am
Hola, bueno me gustaría mantener el slide que tengo, pero la verdad que no consigo implementar correctamente setInterval y no me funciona, a ver si alguien me puede ayudar, he puesto el código completo.
Gracias

Por arte

68 de clabLevel



 

safari
Citar            
MensajeEscrito el 01 May 2012 01:59 pm
No hace falta que leamos el código, tu pregunta es sencilla y te la respondió The Fricky, tienes que crear un setinterval (infórmate), que se ejecute cuando el DOM esté listo. Lo suyo sería que cuando hicieras over con el mouse sobre el slider parases el setInterval y cuando hicieras out con el mouse lo volvieras a activar. Con esta información y usando la búsqueda deberías ser capaz de hacerlo.

Un saludo.

Por Abducted

Claber

489 de clabLevel

3 tutoriales

Genero:Masculino  

Mentalidad Renovada

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.