Tentando deixar galeria responsiva
Então estou tentando deixa um galeria q achei na net responsiva, só que não intendo nada de javascript, acho que é aqui que esta o problema mais n tenho certeza.
segue código:
HTML:
<div id="games">
**<!--Link para Imaguem-->**
<a href="noticia4.html">
<!--Aqui colocar a imaguem 900x500-->
<img src="img/Imaguemsparadownload/NeedForSpeedPayback.png" width="900" height="500" alt="Need For Speed Payback" />
<!--Colocar o Texto!-->
<span>
<b><font face="Arial">Need For Speed Payback</font></b><br />
<i>Saiu analize de Need For Speed Payback, clique e confira.</i>
</span>
</a>
</div>
**<!--Aqui para configurar o tamanho e os efeitos Galeria-->**
<script> $('#games').coinslider({ width : 900 , height: 500 , navigation : false , delay : 5000 , navigation: true , effect: 'rain' } ) ; </script>
Entao nessa parte do script que começa a zuera.... se eu muda o "width:100%" ate funciona mais e como se ele n existi-se não consigo clikar na imagem, se eu colocar "height:100%" não funciona a imagem some....
vo coloca parte do codigo da galeira que eu acho que seja relevante:
**Javascript:**
(function($) {
var params = new Array;
var order = new Array;
var images = new Array;
var links = new Array;
var linksTarget = new Array;
var titles = new Array;
var interval = new Array;
var imagePos = new Array;
var appInterval = new Array;
var squarePos = new Array;
var reverse = new Array;
$.fn.coinslider= $.fn.CoinSlider = function(options){
init = function(el){
order[el.id] = new Array(); // order of square appereance
images[el.id] = new Array();
links[el.id] = new Array();
linksTarget[el.id] = new Array();
titles[el.id] = new Array();
imagePos[el.id] = 0;
squarePos[el.id] = 0;
reverse[el.id] = 1;
params[el.id] = $.extend({}, $.fn.coinslider.defaults, options);
// create images, links and titles arrays
$.each($('#'+el.id+' img'), function(i,item){
images[el.id]* = $(item).attr('src');*
*
links[el.id]** = $(item).parent().is('a') ? $(item).parent().attr('href') : '';*
*
linksTarget[el.id]** = $(item).parent().is('a') ? $(item).parent().attr('target') : '';*
*
titles[el.id]** = $(item).next().is('span') ? $(item).next().html() : '';*
*
$(item).hide();*
*
$(item).next().hide();*
*
});
*
*
**
*
// set panel
*
$(el).css({*
*
'background-image':'url('+images[el.id][0]+')',*
*
'width': params[el.id].width,*
*
'height': params[el.id].height,*
*
'position': 'relative',*
*
'background-position': 'top left'*
*
}).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />");
*
*
**
*
*
** // create title bar*
*
$('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>");
*
*
**
$.setFields(el);
*
*
**
if(params[el.id].navigation)*
*
$.setNavigation(el);
*
*
**
$.transition(el,0);*
*
$.transitionCall(el);
*
*
**
}
*
*
**
** // squares positions*
*
$.setFields = function(el){
*
*
**
tWidth = sWidth = parseInt(params[el.id].width/params[el.id].spw);*
*
tHeight = sHeight = parseInt(params[el.id].height/params[el.id].sph);
*
*
**
counter = sLeft = sTop = 0;*
*
tgapx = gapx = params[el.id].width - params[el.id].spwsWidth;
*
tgapy = gapy = params[el.id].height - params[el.id].sph*sHeight;
*
*
**
for(i=1;i <= params[el.id].sph;i++){*
*
gapx = tgapx;
*
*
**
if(gapy > 0){*
*
gapy--;*
*
sHeight = tHeight+1;*
*
} else {*
*
sHeight = tHeight;*
*
}
*
*
**
for(j=1; j <= params[el.id].spw; j++){
*
*
**
if(gapx > 0){*
*
gapx--;*
*
sWidth = tWidth+1;*
*
} else {*
*
sWidth = tWidth;*
*
}
*
*
**
order[el.id][counter] = i+''+j;*
*
counter++;
*
*
**
if(params[el.id].links)*
*
$('#'+el.id).append("<a href='"+links[el.id][0]+"' class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></a>");*
*
else*
*
$('#'+el.id).append("<div class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></div>");
*
*
**
** // positioning squares*
*
$("#cs-"+el.id+i+j).css({*
*
'background-position': -sLeft +'px '+(-sTop+'px'),*
*
'left' : sLeft ,*
*
'top': sTop*
*
});
*
*
**
sLeft += sWidth;*
*
}
*
*
**
sTop += sHeight;*
*
sLeft = 0;
*
*
**
}
*
*
**
*
*
$('.cs-'+el.id).mouseover(function(){*
*
$('#cs-navigation-'+el.id).show();*
*
});
*
*
**
$('.cs-'+el.id).mouseout(function(){*
*
$('#cs-navigation-'+el.id).hide();*
*
});
*
*
**
$('#cs-title-'+el.id).mouseover(function(){*
*
$('#cs-navigation-'+el.id).show();*
*
});
*
*
**
$('#cs-title-'+el.id).mouseout(function(){*
*
$('#cs-navigation-'+el.id).hide();*
*
});
*
*
**
if(params[el.id].hoverPause){*
*
$('.cs-'+el.id).mouseover(function(){*
*
params[el.id].pause = true;*
*
});
*
*
**
$('.cs-'+el.id).mouseout(function(){*
*
params[el.id].pause = false;*
*
});
*
*
**
$('#cs-title-'+el.id).mouseover(function(){*
*
params[el.id].pause = true;*
*
});
*
*
**
$('#cs-title-'+el.id).mouseout(function(){*
*
params[el.id].pause = false;*
*
});*
*
}
*
*
**
*
*
};
*
*
**
*
*
*
Discussão (0)
Carregando comentários...