Hai everybody,
i want toeach image group atleast 100px gap.
how can i do it.
plz help me.
function imgGroup()
{
var count = 0;
while(count<imgList.length)
{
var groupSize = Math.floor(Math.random() * (4 - 2 + 1)) + 2;
//var groupSize = 4;
var ele = new Array();
for(var i=0; i<groupSize && count<imgList.length ; i++,count++)
{
ele[i] = imgList[count];
}
if(groupSize==2)
{
//image A
var imgA = $('#'+ele[0]);
imgA.css('height','350');
imgA.css('width','350');
imgA.attr('rotate','0');
imgA.parent().css('height','350');
imgA.parent().css('width','350');
imgA.parent().css('transform','rotate(0deg)');
//image B
var imgB = $('#'+ele[1]);
imgB.css('height','350');
imgB.css('width','350');
imgB.attr('rotate','5');
imgB.parent().css('height','350');
imgB.parent().css('width','350');
imgB.parent().css('transform','rotate(5deg)');
imgB.parent().css('left',imgA.parent().css('left'));
imgA.parent().css('left',imgB.parent().css('left')-17);
imgA.parent().css('z-index','1');
}
else if(groupSize==3)
{
var imgA = $('#'+ele[0]);
imgA.css('height','280');
imgA.css('width','280');
imgA.attr('rotate','-5');
imgA.parent().css('height','280');
imgA.parent().css('width','280');
imgA.parent().css('transform','rotate(-5deg)');
//image B
var imgB = $('#'+ele[1]);
imgB.css('height','320');
imgB.css('width','320');
imgB.attr('rotate','15');
imgB.parent().css('height','320');
imgB.parent().css('width','320');
imgB.parent().css('transform','rotate(15deg)');
//image C
var imgC = $('#'+ele[2]);
imgC.css('height','215');
imgC.css('width','215');
imgC.attr('rotate','10');
imgC.parent().css('height','215');
imgC.parent().css('width','215');
imgC.parent().css('transform','rotate(10deg)');
//imgB.parent().css('left',imgA.parent().css('left'));
//imgA.parent().css('left',imgB.parent().css('left')-17);
//imgA.parent().css('z-index','1');
}
else if(groupSize==4)
{
//image A
var imgA = $('#'+ele[0]);
imgA.css('height','220');
imgA.css('width','220');
imgA.attr('rotate','5');
imgA.parent().css('height','220');
imgA.parent().css('width','220');
imgA.parent().css('transform','rotate(5deg)');
//image B
var imgB = $('#'+ele[1]);
imgB.css('height','190');
imgB.css('width','190');
imgB.attr('rotate','-8');
imgB.parent().css('height','190');
imgB.parent().css('width','190');
imgB.parent().css('transform','rotate(-8deg)');
//image C
var imgC = $('#'+ele[2]);
imgC.css('height','230');
imgC.css('width','230');
imgC.attr('rotate','-5');
imgC.parent().css('height','230');
imgC.parent().css('width','230');
imgC.parent().css('transform','rotate(-5deg)');
//image D
var imgD = $('#'+ele[2]);
imgD.css('height','225');
imgD.css('width','225');
imgD.attr('rotate','0');
imgD.parent().css('height','225');
imgD.parent().css('width','225');
imgD.parent().css('transform','rotate(0deg)');
}
}
}