Entrar

moving boxes plugin jquery

danieltra · · Solicitar retirada
otro.. más facil a priori, por favor ayuuuuda!!!!!!!

necesito centrarlo, que no lo esta y aumentar el tamaño del contenedor.. ya luego me preocuparía de centrar las fotos
es un slider tipo boxes como el anterior, pero este lo tengo casi ya, pero necesito lo anterior.

¿puede alguien que entienda decirme donde cambio esto?
(estoy desesperado)


este es el código CSS donde estoy intentando cambiar el tamaño del contenedor


codigo CSS:



body{padding:0px; margin:0px; background-image: url(../images/background.jpg);}

#logo{width:840px; margin:0 auto; text-align:center; margin-top:120px;}
#container
{
margin-top:20px;

}
#slider
{
margin: 0 auto;
text-align:center;
}

#slider div a{
font-size: 12px;
color: white;
font-weight: bold;
float:left;
padding:10px;
text-decoration:none;
}

#slider div a:hover{color:#F1D5CA;}

.image-slider
{
width: 834px;
height: 172px;
background:url(../images/bg.png) no-repeat;
padding: 14px 16px 0px 16px;
position: relative; /*overflow: hidden;*/
font-family:Helvetica, Arial, Tahoma, sans-serif;

}
.image-slider-back, .image-slider-forward
{
float: left;
width: 23px;
height: 98px; /*background-color: #121212;*/
color: White;
position: relative;
top:12px;
cursor: pointer;
}
.image-slider-back
{
background-image: url(../arrow-left.png);
background-repeat: no-repeat;
background-position: left;
}
.image-slider-forward
{
background-image: url(../arrow-right.png);
background-repeat: no-repeat;
background-position: right;
}
.image-slider-contents
{
width: 755px;
height: 154px;
float: left;
position: relative;
overflow: hidden;
}
/*.image-slider-contents .contents-wrapper > div*/
.image-slider-contents .contents-wrapper
{
position: absolute;
padding-top: 18px;
}
.image-slider-contents .outer
{
background-color: White;
float: left;
width: 156px;
height: 86px;
margin:0px 15px;
cursor:pointer;
}
.image-slider-contents .outer > div
{
width: 156px;
height: 86px;
}
.image-slider-contents .outer > div img
{
width: 152px;
height: 82px;
margin: 2px;
margin-top: -30px;
}
/*.image-slider-contents > div > div
{
position: relative;
float: left;
width: 156px;
height: 86px;
margin-left: 6px;
margin-right: 6px;
padding: 2px;
background-color: White;
}*/
.image-slider-contents img
{
width: 156px;
height: 86px;
}

.hidden
{
display: none;
}
.visible
{
display: block;
}
.thumbnail-active
{
filter: alpha(opacity=100);
opacity: 1.0;
cursor: pointer;
}
.thumbnail-inactive
{
filter: alpha(opacity=20);
opacity: 0.2;
cursor: pointer;
}

.preview
{
position: absolute;
width: 450px;
height: 260px;
background-color: White;
padding: 2px;
border: solid 1px black;
}
.preview .img-large
{
width: 450px; /*height: 216px;*/
z-index: 1000;
}
.preview .img-large .left
{
position: absolute;
left: 8px;
top: 100px;
width: 16px;
height: 24px;
z-index: 1000;
background: url(../arrow-left.png);
cursor:pointer;
}
.preview .img-large .right
{
position: absolute;
left: 428px;
top: 100px;
z-index: 1000;
width: 16px;
height: 24px;
background: url(../arrow-right.png);
cursor:pointer;
}
.preview .close
{
position: absolute;
left: 434px;
top: -16px;
width: 32px;
height: 34px;
background: url(../images/close.png);
float: right;
cursor: pointer;
z-index: 2000;
}
.preview .img-large img
{
width: 450px;
height: 260px;

}
.preview .label
{
width: 434px;
line-height: 30px;
float: left;
position: absolute;
top: 216px;
color: Black;
padding: 8px;
background-color: White;
text-align:left;
font-weight:bold;
font-size:13px;
}
.outer
{
border: solid 1px black;
}
.outer.active
{
border: solid 1px #B56161;
background-color: #F1D5CA;
}
.outer.active div span
{
color: #F1D5CA;
}

#footer{width:100%; margin:0 auto; text-align:center; line-height:50px;}
#footer a{color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
#footer a:hover{color:#B56161;}
danieltra · · Solicitar retirada
Buenos días, a todo el Foro CCTW..

a ver, voy a completar la información por si alguien me quiere echar un cable..
primero.- el plugin de jquery actual es este..

http://www.ajaxshake.com/plugin/ES/931/74b5d834/pasador-de-fotos-in…


hay que descargar unos archivos que son el plugin en sí.
de los que aparte de la carpeta de imagenes y los archivos .js que estan puestos en el sitio correcto.
te dan la hoja de estilos, que puse en el mensaje anterior, y un documento index.html, donde te dan el código completo a colocar entre head y entre body
que es este :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>gSlider - Interactive jQuery Image Slider</title>

<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>

<script src="js/image-slider.js" type="text/javascript"></script>

<link href="style/image-slider.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
$(document).ready(function() {
$('#slider').slider({ speed: 500 });

});

</script>

</head>
<body>
<div id="logo"><img src="images/interactive-image-slider-gslider.png" alt="Interactive Image Slider" /></div>
<div id="container">
<div id="slider">
<div>
<img alt="Open Source Vector Icons" src="images/open-source-vector-icons.png" />
<a href="http://www.greepit.com/2010/07/open-source-icons-for-ui-designers-w…" target="_blank">Open Source Vector Icons</a>
</div>
<div>
<img alt="Feedback Collection Polling Widget" src="images/Feedback-Collection-Polling-Widget.png" />
<a href="http://www.greepit.com/2010/11/feedback-collection-and-polling-widg…" target="_blank">Feedback Collection Polling Widget</a></div>
<div>
<img alt="Most Effective Link Building Strategies for Blogs" src="images/link-building-strategies-for-blogs.png" />
<a href="http://www.greepit.com/2010/11/most-effective-link-building-strateg…" target="_blank">Link Building Strategies for Blogs</a></div>
<div>
<img alt="First Complete CSS3 jQuery Tabs" src="images/jQuery-css3-tabs.png" />
<a href="http://www.greepit.com/2011/04/jquery-css3-tabs-with-breadcrumb-and…" target="_blank">First Complete CSS3 jQuery Tabs</a></div>
<div>
<img alt="Professional Creative Free Resume Template" src="images/professional-creative-resume-template.png" />
<a href="http://www.greepit.com/2010/06/creative-resume-template/" target="_blank">Professional Creative Free Resume Template</a></div>
<div>
<img alt="How to Design Accessible Websites and Web Applications
" src="images/how-to-design-accessible-websites-and-web-applications.png" />
<a href="http://www.greepit.com/2011/05/how-to-design-accessible-websites-an…" target="_blank">How to Design Accessible Websites</a></div>
<div>
<img alt="One-liner Login Control" src="images/one-line-login-control-singleline-login.png" />
<a href="http://www.greepit.com/2011/05/one-is-better-than-two-singleline-login" target="_blank">One-liner Login Control</a></div>
<div>
<img alt="Free Minimal Wordpress Theme" src="images/free-minimal-wordpress-theme.png" />
<a href="http://www.greepit.com/2010/12/free-minimal-wordpress-theme-ginimal…" target="_blank">Free Minimal Wordpress Theme</a></div>

<div>
<img alt="5 Web Design Trends to Watch & Follow in 2011" src="images/5-web-design-trends-to-watch-follow-in-2011.png" />
<a href="http://www.greepit.com/2011/04/5-web-design-trends-to-watch-follow-…" target="_blank">Web Design Trends to Watch & Follow</a></div>


</div>
</div>

<div id="footer"><a href="http://www.greepit.com/2011/06/gslider-lightweight-versatile-and-in…">Back to Post</a></div>
</body>
</html>

aparte tambien encontre este javascript para que he puesto a continuación
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-6579611-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

y no hay más.. el resultado es éste:

[contenido no disponible]

tengo que centrarlo y ponerlo mas ancho, ya que el tamaño de la galeria debe ser 798 x 431..
buscando en la hoja de estilos como cambiar el tamaño del cuadradito/contenedor, slider o como se llame no hay manera, macho!!

así que si algún lumbreras me quiere ayudar no creo que sea un gran problema para él, Gracias por si acaso.[:)]