Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje07-06-2016, 02:13 (UTC)    
Título del mensaje: [Ice-Blue] Header Rotatorio (Slider Show)

Hola!

Bueno sin dudas este es un aporte que a muchos les servira y les sera de agrado. Se trata de un Header Slider Show el cual cada X segundos cambia a otra imagen.

Vista Previa:

http://i.picasion.com/pic82/003b8b05389eb37eee08c611b1372975.gif

El codigo en si es muy facil de editar... y solo se puede editar la primera parte que dijare marcado en Negrita y en Color Azul que es el tiempo para cambiar la imagen (esta en 7 segundos) pueden editarlo pero recuerden que usa MILISEGUNDOS.

Cita:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var miHTML = '<div id="slideshow">' +
'<div>' +
'<img class="imagen" src="http://paradigmmedia.co.uk/wp-content/uploads/header-b88d930b520c523ef8a53abfb86d7523.png">' +
'</div>' +
'<div>' +
'<img class="imagen" src="http://theme.webme.com/designs/iceblue/images/header.jpg">' +
'</div>' +
'</div>';
jQuery('body').append(miHTML);
jQuery("#slideshow").appendTo(".edit_header_full");
});
</script>

<script>
jQuery(document).ready(function() {
$("#slideshow > div:gt(0)").hide();

setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 7000);
});
</script>

<style>
table{margin-left:auto;margin-right:auto;} /*CENTRA LA WEB*/
.edit_header_sub_left { display:none;}
.edit_header_sub_right {display:none;}
.edit_header_over_headline {display:none;}
.headline {display: none;}
.edit_header_full {background: none;}
.edit_rechts_sbg {background: none;}


.imagen {
height: 104px;
width: 921px;
}
#slideshow {
position: relative;
right: 10px;
bottom: 10px;
}

#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}</style>


Esten atentos de no borrar ninguna comilla dado que el codigo dejara de funcionar y deberan editarlo de nuevo..

Para agregar mas imagenes solo deben copiar este codigo:
Código:
   '<div>' +
     '<img class="imagen" src="http://theme.webme.com/designs/iceblue/images/header.jpg">' +
   '</div>' +

y pegarlo antes del ultimo "div" (en este caso lo marcare en rojo).
Ejemplo:
Cita:
<script>
jQuery(document).ready(function() {
var miHTML = '<div id="slideshow">' +
'<div>' +
'<img class="imagen" src="http://paradigmmedia.co.uk/wp-content/uploads/header-b88d930b520c523ef8a53abfb86d7523.png">' +
'</div>' +
'<div>' +
'<img class="imagen" src="http://theme.webme.com/designs/iceblue/images/header.jpg">' +
'</div>' +
'<div>' +
'<img class="imagen" src="http://theme.webme.com/designs/iceblue/images/header.jpg">' +
'</div>' +

'</div>';
jQuery('body').append(miHTML);
jQuery("#slideshow").appendTo(".edit_header_full");
});
</script>


Saludos!
Moderador Design-PWG.
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com


Ultima edición por design-pwg el Lun Jun 06, 2016 10:19 pm; editado 3 veces
Mensaje07-06-2016, 02:16 (UTC)    
Título del mensaje:

De verdad que le da un mejor efecto a ese banner estático que todos conocemos
Mensaje07-06-2016, 02:21 (UTC)    
Título del mensaje:

pwgpro escribió:
De verdad que le da un mejor efecto a ese banner estático que todos conocemos


Gracias compañero! me alegra que te guste y si le da un mejor estilo a las webs!
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com
Mensaje07-06-2016, 13:23 (UTC)    
Título del mensaje:

Esto mejora significativamente la plantilla IceBlue!!! me gusta mucho porque le da dinamismo y en lo visual también. Gracias por el aporte, se que a los usuarios nuevos les vendrá muy bien!!!
______________


https://radiovijaer.es.tl/
Mensaje07-06-2016, 13:46 (UTC)    
Título del mensaje:

radiovijaer escribió:
Esto mejora significativamente la plantilla IceBlue!!! me gusta mucho porque le da dinamismo y en lo visual también. Gracias por el aporte, se que a los usuarios nuevos les vendrá muy bien!!!

Si obvio le da otro enfoque visual a la web! llevaba dias queriendo hacer este aporte y ayer me sente y bueno quedo echo

Saludos y Gracias por tu comentario.
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group