Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje08-02-2013, 05:33 (UTC)    
Título del mensaje: [Resuelto] Slider/Galería problema

*Hola amigos, buscando por el foro encontre una buena galería de imagenes o slider como quieran llamarle,
pero el problema es que esta integrada junto a un diseño css.


Ver tema aqui

*¿Que le falta al codigo éste y donde iria?

Cita:
<ul class="slideshow">
<li class="show">
<a href="http://www.google.com">
<img src="http://img.webme.com/pic/d/darknet13/slidecsssampl1.jpg" style="width:700px; height:394px;" title="Slide 1" alt="Contenido de el primer mensaje."/></a></li>

<li><a href="http://www.yahoo.com">
<img src="http://img.webme.com/pic/d/darknet13/slidecsssampl2.jpg" style="width:700px; height:394px;" title="Slide 2" alt="Informacion de la segunda imagen"/></a></li>

<li><a href="http://www.msn.com">
<img src="http://img.webme.com/pic/d/darknet13/slidecsssampl3.jpg" style="width:700px; height:394px;" title="Slide 3" alt="Texto de la tercera imagen"/></a></li>

</ul>


PD: Me gustaría poder ponerlo como HTML así puedo elegir la página en donde ubicarlo.


Ultima edición por clanlaz el Vie Feb 08, 2013 1:20 pm; editado 1 vez
Mensaje08-02-2013, 14:18 (UTC)    
Título del mensaje: Re: Slider/Galería problema

clanlaz escribió:
*Hola amigos, buscando por el foro encontre una buena galería de imagenes o slider como quieran llamarle,
pero el problema es que esta integrada junto a un diseño css.


Ver tema aqui

*¿Que le falta al codigo éste y donde iria?

Cita:
<ul class="slideshow">
<li class="show">
<a href="http://www.google.com">
<img src="http://img.webme.com/pic/d/darknet13/slidecsssampl1.jpg" style="width:700px; height:394px;" title="Slide 1" alt="Contenido de el primer mensaje."/></a></li>

<li><a href="http://www.yahoo.com">
<img src="http://img.webme.com/pic/d/darknet13/slidecsssampl2.jpg" style="width:700px; height:394px;" title="Slide 2" alt="Informacion de la segunda imagen"/></a></li>

<li><a href="http://www.msn.com">
<img src="http://img.webme.com/pic/d/darknet13/slidecsssampl3.jpg" style="width:700px; height:394px;" title="Slide 3" alt="Texto de la tercera imagen"/></a></li>

</ul>


PD: Me gustaría poder ponerlo como HTML así puedo elegir la página en donde ubicarlo.


Hola,

Para agregarle el slide, hay muchos códigos que no van, aunque se incorpora junto al diseño + slide.

Puedes usar css design o sigues con tu diseño actual.

Código:
<style type="text/css">
#aside {
position:relative;
top:30px;
left:-5px;
float: left;
width: 200px;
background-color: white;
border:1px solid silver;
border-radius: 10px;
box-shadow: -5px 5px 10px 0px rgba(100, 100, 100, 1);
}

#aside h2.menu {
font-size: 20px;
text-align: center;
color: #5b5b5b;
font-family: 'Petit Formal Script', cursive;
}
#aside ul.menu {
padding: 0px;
list-style-type: none;
}
#aside ul.menu li a {
font-family: 'Nunito', sans-serif;
color: #999999;
text-decoration: none;
display: block;
padding-left:15px;
font-family: 'Inder', sans-serif;
}
#aside p.menu {
text-align: justify;
padding-right: 5px;
padding-left: 5px;
}

ul.slideshow {
font-family:arial;
font-size:12px;
list-style:none;
width:600px;
height:300px;
overflow:hidden;
position:relative;
margin: -30px auto 30px auto;
box-shadow: 0px 15px 10px 0px rgba(100, 100, 100, 0.5);
border-radius:10px;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:1;
}
ul img {
border:none;
}
#slideshow-caption {
width:700px;
height:100px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:1;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:2;
}
#slideshow-caption h3 {
padding:0;
font-size:14px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>


Código:
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Petit+Formal+Script|Inder|Oxygen+Mono" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <script type="text/javascript">
$(document).ready(function() {
//Tiempo de transicion en milisegundos
slideShow(3000);
});
function slideShow(speed) {
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');
//Aplica la transparencia de imagen a 0
$('ul.slideshow li').css({opacity: 0.0});
$('ul.slideshow li:first').css({opacity: 1.0}).addClass('show');
$('#slideshow-caption h3').html($('ul.slideshow li.show').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow li.show').find('img').attr('alt'));
//Muestra el titulo
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
var timer = setInterval('gallery()',speed);
//Pausa la animacion al poner el mouse encima
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
if(current.queue('fx').length == 0) {
//Toma la siguiente imagen, si se llego al final rota hasta el inicio
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
$('#slideshow-caption').slideToggle(300, function () {
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').slideToggle(500);
});
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
}
</script>


Cita:
<ul class="slideshow">
<li class="show"><a href="http://www.google.com"> <img alt="Contenido de el primer mensaje." title="Slide 1" style="width:700px; height:394px;" src="http://img.webme.com/pic/d/darknet13/slidecsssampl1.jpg" /></a></li>
<li><a href="http://www.yahoo.com"> <img alt="Informacion de la segunda imagen" title="Slide 2" style="width:700px; height:394px;" src="http://img.webme.com/pic/d/darknet13/slidecsssampl2.jpg" /></a></li>
<li><a href="http://www.msn.com"> <img alt="Texto de la tercera imagen" title="Slide 3" style="width:700px; height:394px;" src="http://img.webme.com/pic/d/darknet13/slidecsssampl3.jpg" /></a></li>
</ul>


Saludos.
______________
Mensaje08-02-2013, 17:20 (UTC)    
Título del mensaje: Re: Slider/Galería problema

master-nemesis escribió:
clanlaz escribió:
*Hola amigos, buscando por el foro encontre una buena galería de imagenes o slider como quieran llamarle,
pero el problema es que esta integrada junto a un diseño css.


Ver tema aqui

*¿Que le falta al codigo éste y donde iria?

Cita:
<ul class="slideshow">
<li class="show">
<a href="http://www.google.com">
<img src="http://img.webme.com/pic/d/darknet13/slidecsssampl1.jpg" style="width:700px; height:394px;" title="Slide 1" alt="Contenido de el primer mensaje."/></a></li>

<li><a href="http://www.yahoo.com">
<img src="http://img.webme.com/pic/d/darknet13/slidecsssampl2.jpg" style="width:700px; height:394px;" title="Slide 2" alt="Informacion de la segunda imagen"/></a></li>

<li><a href="http://www.msn.com">
<img src="http://img.webme.com/pic/d/darknet13/slidecsssampl3.jpg" style="width:700px; height:394px;" title="Slide 3" alt="Texto de la tercera imagen"/></a></li>

</ul>


PD: Me gustaría poder ponerlo como HTML así puedo elegir la página en donde ubicarlo.


Hola,

Para agregarle el slide, hay muchos códigos que no van, aunque se incorpora junto al diseño + slide.

Puedes usar css design o sigues con tu diseño actual.

Código:
<style type="text/css">
#aside {
position:relative;
top:30px;
left:-5px;
float: left;
width: 200px;
background-color: white;
border:1px solid silver;
border-radius: 10px;
box-shadow: -5px 5px 10px 0px rgba(100, 100, 100, 1);
}

#aside h2.menu {
font-size: 20px;
text-align: center;
color: #5b5b5b;
font-family: 'Petit Formal Script', cursive;
}
#aside ul.menu {
padding: 0px;
list-style-type: none;
}
#aside ul.menu li a {
font-family: 'Nunito', sans-serif;
color: #999999;
text-decoration: none;
display: block;
padding-left:15px;
font-family: 'Inder', sans-serif;
}
#aside p.menu {
text-align: justify;
padding-right: 5px;
padding-left: 5px;
}

ul.slideshow {
font-family:arial;
font-size:12px;
list-style:none;
width:600px;
height:300px;
overflow:hidden;
position:relative;
margin: -30px auto 30px auto;
box-shadow: 0px 15px 10px 0px rgba(100, 100, 100, 0.5);
border-radius:10px;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:1;
}
ul img {
border:none;
}
#slideshow-caption {
width:700px;
height:100px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:1;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:2;
}
#slideshow-caption h3 {
padding:0;
font-size:14px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>


Código:
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Petit+Formal+Script|Inder|Oxygen+Mono" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <script type="text/javascript">
$(document).ready(function() {
//Tiempo de transicion en milisegundos
slideShow(3000);
});
function slideShow(speed) {
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');
//Aplica la transparencia de imagen a 0
$('ul.slideshow li').css({opacity: 0.0});
$('ul.slideshow li:first').css({opacity: 1.0}).addClass('show');
$('#slideshow-caption h3').html($('ul.slideshow li.show').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow li.show').find('img').attr('alt'));
//Muestra el titulo
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
var timer = setInterval('gallery()',speed);
//Pausa la animacion al poner el mouse encima
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
if(current.queue('fx').length == 0) {
//Toma la siguiente imagen, si se llego al final rota hasta el inicio
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
$('#slideshow-caption').slideToggle(300, function () {
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').slideToggle(500);
});
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
}
</script>


Cita:
<ul class="slideshow">
<li class="show"><a href="http://www.google.com"> <img alt="Contenido de el primer mensaje." title="Slide 1" style="width:700px; height:394px;" src="http://img.webme.com/pic/d/darknet13/slidecsssampl1.jpg" /></a></li>
<li><a href="http://www.yahoo.com"> <img alt="Informacion de la segunda imagen" title="Slide 2" style="width:700px; height:394px;" src="http://img.webme.com/pic/d/darknet13/slidecsssampl2.jpg" /></a></li>
<li><a href="http://www.msn.com"> <img alt="Texto de la tercera imagen" title="Slide 3" style="width:700px; height:394px;" src="http://img.webme.com/pic/d/darknet13/slidecsssampl3.jpg" /></a></li>
</ul>


Saludos.


*Gracias amigo a probar entonces...la verdad master, un genio sos
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group