Foro de soporte WordPress en español


Soporte WordPress en español Soporte gratuito para webs alojadas en Webempresa.com
Habilitado para todos los clientes con planes de Hosting Alto Rendimiento a partir de 3GB y planes XL.

No ofrecemos soporte a webs alojadas en servidores externos o localhost, ni soporte css o programación.

Te recomendamos que leas esta información sobre nuestro sistema de soporte en el foro, te ayudará a sacar el máximo partido de nuestro conocimiento: Cómo podemos ayudarte.


Encuentra la solución a tu problema, buscando en nuestro foro:
Bienvenido, Invitado
Nombre de Usuario: Contraseña: Recordarme
Expertos en WordPress resuelven los problemas y dudas con tu Web. Servicio gratuito incluido para clientes de Webempresa. Soporte WordPress en español 24 horas, todos los días del año.

TEMA: Problema javascript para añadir varios slideshow a plantilla para landing page

Problema javascript para añadir varios slideshow a plantilla para landing page 1 año 3 semanas antes #307870

Me gustaría que me dieseis una solución con el código para crear varias galerías una debajo de la otra de manera que cada una la pudiese ver como slideshow de izquierda a derecha.

A continuacion os dejo el codigo:


<?php
/*
*
* Template Name: Landing
*
*/
?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>

<div class="slideshow-container">

<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="jorgecarrillo.es/wp-content/uploads/2017/07/preboda_santiago_kevin_elvira_10.jpg" style="width:100%">
<div class="text">PREBODA - KEVIN & ELVIRA</div>
</div>

<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="jorgecarrillo.es/wp-content/uploads/2017/07/preboda_santiago_kevin_elvira_07.jpg" style="width:100%">
<div class="text">PREBODA - KEVIN & ELVIRA</div>
</div>

<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="jorgecarrillo.es/wp-content/uploads/2017/07/preboda_santiago_kevin_elvira_04.jpg" style="width:100%">
<div class="text">PREBODA - KEVIN & ELVIRA</div>
</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

</div>
<br>

<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides.style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>

</body>
</html>




Gracias

Un saludo



URL del sitio:
Contenido oculto para usuarios invitados. Por favor, inicie su sesión para poder verlo.
Adjuntos:
  • jorge
  • Avatar de jorge
  • DESCONECTADO
  • Navegador Iniciado
  • Mensajes: 5
  • Karma: 0
El administrador ha desactivado la escritura pública.
Mejora la velocidad de tu WordPress

Problema javascript para añadir varios slideshow a plantilla para landing page 1 año 3 semanas antes #307873

Hola Jorge,

Desconozco de donde has obtenido ese código pero no creo que sea la solución pegarlo en un widget o donde tengas pensado ponerlo (si usas un constructor) para que muestre diferentes galerías, principalmente por razones de mantenimiento del código, de las galerías y de que además sea responsive.

Si has copiado el código por ejemplo de alguna web es posible que esté supeditado a un tema concreto y por eso al llevártelo a otro tema presente errores por falta de librerías .js que lo soporten.

Además deberías considerar que los sliders en portada son "retardadores" y aumentan el tiempo de carga de la página.

Lo adecuado es hacerlo usando [shortcodes] que te facilite algún plugin de galerías donde puedas establecer comportamientos diferentes para cada slider (galería) mediante "parámetros" añadidos al shortcode.

¿Que plugins utilizas para tal tarea?

Saludos
  • Luis Mendez Alejo
  • Avatar de Luis Mendez Alejo
  • CONECTADO
  • Administrador
  • Mensajes: 23234
  • Gracias recibidas 2409
  • Karma: 514
Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.
El administrador ha desactivado la escritura pública.
trasladar web gratis

Problema javascript para añadir varios slideshow a plantilla para landing page 1 año 3 semanas antes #307876

He cogido el código de aquí.
www.w3schools.com/howto/howto_js_slideshow.asp

He creado una plantilla llamada landing.php para después crear en wordpress una página y asignarle dicha plantilla.

No utilizo ningún plugin.

Mi idea es hacer un texto de cabecera, 4 slideshow (uno debajo de otro para mostrar mi trabajo) y un formulario al final.

Agradecería tu ayuda.

Un saludo
  • jorge
  • Avatar de jorge
  • DESCONECTADO
  • Navegador Iniciado
  • Mensajes: 5
  • Karma: 0
El administrador ha desactivado la escritura pública.
solucionar problemas wordpress

Problema javascript para añadir varios slideshow a plantilla para landing page 1 año 3 semanas antes #307877

Hola

Tal como te comenta Alejo, es posible que el código que tienes de manera aislada si funcione, el problema es que en WordPress tiene una filosofía de trabajo un poco distinta, si quieres hacer que ese código funcione tienes que dividirlo en varios archivos, registrar un script, un css y poner el código html en alguna página o widget de texto, en conclusión sería más complejo

Lo normal en WordPress para este tipo de funcionalidad es usar plugins, hay muchos plugins para mostrar slides. Revisa por ejemplo : www.webempresa.com/blog/5-sliders-para-wordpress-gratuitos-que-deberias-probar.html

La otra opción es que insertes ese contenido, tal como esta como un iframe en alguna parte de tu sitio, usulamente será en una página.

Saludos.
Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.
El administrador ha desactivado la escritura pública.

Problema javascript para añadir varios slideshow a plantilla para landing page 1 año 3 semanas antes #307879

¿Me podríais explicar cómo se introduce ese código en un iframe? ¿De esta manera podría hacer varios slideshows uno debajo del otro? No controlo de javascript.

Gracias
  • jorge
  • Avatar de jorge
  • DESCONECTADO
  • Navegador Iniciado
  • Mensajes: 5
  • Karma: 0
El administrador ha desactivado la escritura pública.

Problema javascript para añadir varios slideshow a plantilla para landing page 1 año 3 semanas antes #307881

HOla

Puedes insertar un iframe en la vista de código de una página, el iframe son etiquetas html que hace referencia a una url, en tu caso la url de tu slide

Revisa:
www.w3schools.com/tags/tag_iframe.asp

Saludos.
Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.
El administrador ha desactivado la escritura pública.

¿Te ha resultado interesante esta entrada del foro?

Suscríbete para recibir consejos y trucos útiles para tu Web.

Problema javascript para añadir varios slideshow a plantilla para landing page 1 año 3 semanas antes #307893

Creo que voy a optar por la opción de plugins. ¿Sabéis si existe algún plugin para crear slideshow con galerias nativas de wordpress ya creadas?

Me gustaría aprovechar todas las galerías nativas de wordpress que ya tengo creadas. Son muchas fotos y la verdad es que volver a hacer todo de nuevo... es un jaleo.

Gracias

Un saludo
  • jorge
  • Avatar de jorge
  • DESCONECTADO
  • Navegador Iniciado
  • Mensajes: 5
  • Karma: 0
El administrador ha desactivado la escritura pública.

Problema javascript para añadir varios slideshow a plantilla para landing page 1 año 3 semanas antes #307896

Hola Jorge,

Si me permites la opinión, creo que usar ese código externo en WordPress es como intentar reinventar la rueda.

Ya existen cientos de plugins de sliders de todos los tamaños, formas y posibilidades para instalar en WordPress y mostrar sliders en portada, en una página, en un widget, dentro de un post o página, sin tener que reescribir de cero como se tiene que mostrar un slider con códigos como el que muestras que posiblemente no sea 100% interpretado dentro de WordPress.

Si WordPress, por medios de plugins, ya tiene esas funcionalidades ¿porque añadir algo externo? es como quitarte el fémur para ponerte uno de fibra de carbono ¿si ya tienes uno propio para que complicarte? :)

Por ejemplo:

- 5 sliders para WordPress gratuitos que deberías probar - www.webempresa.com/blog/5-sliders-para-wordpress-gratuitos-que-deberias-probar.html

Saludos
  • Luis Mendez Alejo
  • Avatar de Luis Mendez Alejo
  • CONECTADO
  • Administrador
  • Mensajes: 23234
  • Gracias recibidas 2409
  • Karma: 514
Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.
El administrador ha desactivado la escritura pública.

Temas Relacionados

1 Respuestas emo
Tema iniciado 2 años 3 semanas antes por CARLOS ALBERTO
1249 Visitas
4 Respuestas emo
Tema iniciado 4 años 6 meses antes por Sergio
7910 Visitas
5 Respuestas emo
Categoría: Plugins WordPress
Tema iniciado 5 meses 1 semana antes por Carolina
160 Visitas
1 Respuestas emo
Tema iniciado 2 años 1 mes antes por CARLOS ALBERTO
944 Visitas
1 Respuestas emo
Tema iniciado 8 meses 6 días antes por FRANCISCO
209 Visitas
3 Respuestas emo
Tema iniciado 4 años 9 meses antes por Lourdes Yagüe
2648 Visitas
1 Respuestas emo
Tema iniciado 8 meses 1 semana antes por RAMON ANTONIO
146 Visitas
1 Respuestas emo
Categoría: Plugins WordPress
Tema iniciado 1 año 11 meses antes por Viñas Selectas
657 Visitas
1 Respuestas emo
Tema iniciado 2 años 6 meses antes por Daniela
1177 Visitas
1 Respuestas emo
Tema iniciado 2 años 2 semanas antes por pepe
512 Visitas

Tiempo de carga de la página: 0.703 segundos