Wat moet ik doen? Ik kom er echt niet meer uit... Eerst mijn css en dan de Jquery. Ik hoop dat iemand mij hiermee kan helpen. Het is een grote post maar ik ben echt blij als iemand mij kan helpen. Dit is de link waar de slider moet komen (product foto's).
http://www.gotchabv.com/tablets/meerinfo1.html.. Css en Jquery kan je natuurlijk ook in de broncode vinden...
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
var totWidth=0;
var positions = new Array();
$('#slides .slide').each(function(i){
/* Traverse through all the slides and store their accumulative widths in totWidth */
positions= totWidth;
totWidth += $(this).width();
/* The positions array contains each slide's commulutative offset from the left part of the container */
if(!$(this).width() .height())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});
$('#slides').width(3600);
/* Change the cotnainer div's width to the exact width of all the slides combined */
$('#menu ul li a').click(function(e,keepScroll){
/* On a thumbnail click */
$('li.menuItem').removeClass('act').addClass('inact');
$(this).parent().addClass('act');
var pos = $(this).parent().prevAll('.menuItem').length;
$('#slides').stop().animate({marginLeft
ositions[pos]+'px'},450);
/* Start the sliding animation */
e.preventDefault();
/* Prevent the default action of the link */
// Stopping the auto-advance if an icon has been clicked:
if(!keepScroll) clearInterval(itvl);
});
$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
/* On page load, mark the first thumbnail as active */
/*****
*
* Enabling auto-advance.
*
****/
var current=1;
function autoAdvance()
{
if(current==-1) return false;
$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]); // [true] will be passed as the keepScroll parameter of the click function on line 28
current++;
}
// The number of seconds that the slider will auto-advance in:
var changeEvery = 10;
var itvl = setInterval(function(){autoAdvance()},changeEvery*200);
/* End of customizations */
});
http://www.gotchabv.com/tablets/meerinfo1.html.. Css en Jquery kan je natuurlijk ook in de broncode vinden...
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
var totWidth=0;
var positions = new Array();
$('#slides .slide').each(function(i){
/* Traverse through all the slides and store their accumulative widths in totWidth */
positions= totWidth;
totWidth += $(this).width();
/* The positions array contains each slide's commulutative offset from the left part of the container */
if(!$(this).width() .height())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});
$('#slides').width(3600);
/* Change the cotnainer div's width to the exact width of all the slides combined */
$('#menu ul li a').click(function(e,keepScroll){
/* On a thumbnail click */
$('li.menuItem').removeClass('act').addClass('inact');
$(this).parent().addClass('act');
var pos = $(this).parent().prevAll('.menuItem').length;
$('#slides').stop().animate({marginLeft
ositions[pos]+'px'},450);/* Start the sliding animation */
e.preventDefault();
/* Prevent the default action of the link */
// Stopping the auto-advance if an icon has been clicked:
if(!keepScroll) clearInterval(itvl);
});
$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
/* On page load, mark the first thumbnail as active */
/*****
*
* Enabling auto-advance.
*
****/
var current=1;
function autoAdvance()
{
if(current==-1) return false;
$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]); // [true] will be passed as the keepScroll parameter of the click function on line 28
current++;
}
// The number of seconds that the slider will auto-advance in:
var changeEvery = 10;
var itvl = setInterval(function(){autoAdvance()},changeEvery*200);
/* End of customizations */
});
Laatst bewerkt:
