aqui les dejo el codigo del nivo para q me digan si ven algun problema:
nivoslider.css:
Código:
default.css:/*
* jQuery Nivo Slider v2.7.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
float:right;
}
.nivoSlider img {
position:relative;
width:299px;
height:246px;
top:auto;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
width:299px;
height:246px;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:299px;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
Código:
js:/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Description: The default skin for the Nivo Slider.
Version: 1.3
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
Supports Thumbs: true
*/
.theme-default .nivoSlider {
width: 299px; /* agregamos esta línea */
position:relative;
background:#fff url(../nivoimages/loading.gif) no-repeat 50% 50%; /* lo modificamos por background:#fff url(../images/loading.gif) no-repeat 50% 50%;*/
margin:auto;/* lo modificamos por margin: 0 auto; para centrarlo*/
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
position:absolute;
width:299px;
height:246px;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}
.theme-default .nivo-controlNav {
position:absolute;
left:50%;
bottom:-42px;
margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(../nivoimages/bullets.png) no-repeat; /* lo modificamos por background:url(../images/bullets.png) no-repeat;*/
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.theme-default .nivo-controlNav a.active {
background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(../nivoimages/arrows.png) no-repeat; /*lo modificamos por background:url(../images/arrows.png) no-repeat;*/
text-indent:-9999px;
border:0;
}
.theme-default a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
}
.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
color:#fff;
}
@media screen and (max-width: 1280px){
.theme-default .nivoSlider {
position:relative;
background:#fff url(../nivoimages/loading.gif) no-repeat 50% 50%;
margin: auto;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
}
@media screen and (max-width: 1024px){
.theme-default .nivoSlider {
position:relative;
background:#fff url(../nivoimages/loading.gif) no-repeat 50% 50%;
margin: auto;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
}
@media screen and (max-width: 800px){
.theme-default .nivoSlider {
position:relative;
background:#fff url(../nivoimages/loading.gif) no-repeat 50% 50%;
margin: auto;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
}
Código:
gracias de ante mano. <link rel="stylesheet" href="nivostyles/nivo-slider.css" type="text/css" media="screen"> <!-- carga estilo nivo-slider.css -->
<link rel="stylesheet" href="nivostyles/default.css" type="text/css" media="screen"> <!-- carga estilo theme default.css -->
<style>
#galeria {
margin:0 auto 0 auto;
width:299px;
height:246px;
/*Sombra*/
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
</style>
<script src="js/jquery-1.8.1.min.js" type="text/javascript"></script> <!-- carga jQuery -->
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script> <!-- carga plugin jquery.nivo.slider.pack.js -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider(); // Carga de NivoSlider
});
</script><!-- carga el slider cuando el navegador est dispuesto-->
