Creación de carrusel con carga fluida de contenido

  • Autor Autor Juanjo87
  • Fecha de inicio Fecha de inicio
J

Juanjo87

Gamma
Diseñador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Muy buenas, estoy creando un carrusel, y necesito, que cuando pinche en una imagen de dicho carrusel, su contenido se me abra en la misma pagina en la que estoy, sin que me sobrecargue mucho la pagina. Estoy intentando hacer esto con iframes y funciona bien pero tarda demasiado en cargar el contenido, debería de ser mucho mas fluido, el tema de includes me parece que tampoco seria lo correcto, corrijan me si me equivoco. Como seria la forma correcta de hacerlo?

Gracias
 
Pues no se, pero yo hago eso con un plugin de wordpress. Me deja elegir entre abrir la foto en una ventana nueva, abrirla directamente donde estoy, sobreimpresionada sobre el fondo. O abrirla en la misma ventana donde estoy, se quita la que tenga para cargar la foto.

No se si me he explicado.
 
Gracias, pero estoy intentando evitar los plugins.
Hasta ahora se que con includes, la carga es mas rápida que con iframe pero como puedo decirle que me abra un enlace en un include? ejemplo, pongo un enlace "pincha aquí" y que se me abra en un include en vez de en un iframe, es posible esto? esta seria la forma correcta de hacer lo que pretendo?

EDITO*
Vale lo que necesito se hace con AJAX, voy a ver si encuentro algún buen tutorial, aun así si alguien puede aportar algo por favor no duden en comentar.

- - - Actualizado - - -

Vale ya tengo todo, este seria el codigo que e encontrado para realizar la funcion mediante ajax

en head

PHP:
<script>
$(document).ready(function() {
   $('#div-btn1').click(function(){
      $.ajax({
	    type: "POST",
	    url: "prueba.php",
	    success: function(a) {
                $('#div-results').html(a);
	    }
       });
   });
});
</script>

dentro del body:
PHP:
<a id="div-btn1" style="cursor:pointer;">Ver el archivo que contiene hola</a>
<div id="div-results"></div>

de esta forma consigo abrir una pagina dentro de otra sin recargar la pagina, pero, no consigo hacerlo funcionar de la manera que necesito.

Alguien me puede ayudar?

tengo creada sta funcion en el functio:

PHP:
 <?php 

//FUNCION ENTRADAS RELACIONADAS POR TAXONOMIAS CON IMAGENES------------------------------------------
function related_posts_juanjo(){
    global $post;
// get the custom post type's taxonomy terms
 
$custom_taxterms = wp_get_object_terms( $post->ID, 'genero', array('fields' => 'ids') );
// arguments
$args = array(
'post_type' => 'pelicula',
'post_status' => 'publish',
'posts_per_page' => 20, // you may edit this number
'orderby' => 'title',
'order'   => '',
'tax_query' => array(
    array(
        'taxonomy' => 'genero',
        'field' => 'id',
        'terms' => $custom_taxterms
    )
),
'post__not_in' => array ($post->ID),
);
$related_items = new WP_Query( $args );
// loop over query
if ($related_items->have_posts()) :
echo ' <div class="container-carousel">
          <div class="row">
            <div class="span12">
<div id="owl-demo" class="owl-carousel">';

while ( $related_items->have_posts() ) : $related_items->the_post();
?>

<div class="item">
			   <a target="related" href="<?php the_permalink(); ?>"><div id="capa"><i class="fa fa-play"></i></br><a target="related"id="tittle-panel"href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
			   
			   </div>
			   
			   <?php $images = get_custom_field('image_head:to_image_src'); foreach ($images as $img){printf('<img id="iu"class="lazyOwl" data-src="%s"/ alt="Lazy Owl Image" align="center">', $img);}?></a>
			   
			</div>

<?php

endwhile;
echo '</div></div></div></div>';
endif;
// Reset Post Data
wp_reset_postdata();
}
?>

que la muestro asi en el single:
PHP:
<?php related_posts_juanjo(); ?>

como ago para que cuando desde el single pinche sobre los enlaces que me genera la funcion, related_posts_juanjo
PHP:
<div class="item"> 
               <a target="related" href="<?php the_permalink(); ?>"><div id="capa"><i class="fa fa-play"></i></br><a target="related"id="tittle-panel"href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a> 
                
               </div> 
                
               <?php $images = get_custom_field('image_head:to_image_src'); foreach ($images as $img){printf('<img id="iu"class="lazyOwl" data-src="%s"/ alt="Lazy Owl Image" align="center">', $img);}?></a> 
                
            </div>

se me abra dentro de
Insertar CODE, HTML o PHP:
<div id="div-results"></div>
Me entienden?

Por favor alguna respuesta para no parecer que le escribo al viento.:stupid1:

Gracias.
 
Última edición:
gracias skrill3x pero no es eso lo que necesito exactamente


el código ajax anteriormente mencionado creo que no es útil para realizar lo que necesito creo que seria algo así:

PHP:
<html>
<head>
   <title>Ajax Simple</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>   
<script>
$(document).ready(function(){
   $("#enlaceajax").click(function(evento){
      evento.preventDefault();
      $("#destino").load("contenido-ajax.html");
   });
})
</script>
</head>
<body>

<a href="#" id="enlaceajax">Haz clic!</a>
<br>
<div id="destino"></div>

</body>
</html>

pero no se como configurarlo alguien me ayuda?

- - - Actualizado - - -

Pues sigo igual, llevo todo el día con lo mismo y no saco nada en claro, consigo cargar mediante ajax un pagina, pero no consigo que en la pagina se muestre el contenido de las entradas relacionadas.

que alguien me oriente un poco por favor.
 
Última edición:
Debes revisar: https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)

No se si entiendo exactamente que quieres hacer pero se define un hook para ajax en el functions.php:

PHP:
function mostrar_ralacionados() {
	f ( ! is_numeric( $_POST['post_id'] ) )
		die("Wrong ID!");
	$_POST['post_id'] = abs(intval($_POST['post_id']));
	if ( ! $_POST['post_id'] )
		die("Wrong ID!");
	if(isset($_POST['post_id'])){
		$custom_taxterms = wp_get_object_terms( $_POST['post_id'], 'genero', array('fields' => 'ids') );
		if (empty($custom_taxterms))
			die("No se encontraron relacionados. ");
		$args = array(
			'post_type' => 'pelicula',
			'post_status' => 'publish',
			'posts_per_page' => 20, // you may edit this number
			'orderby' => 'title',
			'order'   => '',
			'tax_query' => array(
			array(
				'taxonomy' => 'genero',
				'field' => 'id',
				'terms' => $custom_taxterms
			)
			),
			'post__not_in' => array ($_POST['post_id']),
		);
		$related_items = new WP_Query( $args );
		// loop over query
		if ($related_items->have_posts()) :
		echo ' <div class="container-carousel">
			<div class="row">
			<div class="span12">
		<div id="owl-demo" class="owl-carousel">';

		while ( $related_items->have_posts() ) : $related_items->the_post();
		?>
		<div class="item">
			<a target="related" href="<?php the_permalink(); ?>"><div id="capa"><i class="fa fa-play"></i></br><a target="related"id="tittle-panel"href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
			
			</div>
			
			<?php $images = get_custom_field('image_head:to_image_src'); foreach ($images as $img){printf('<img id="iu"class="lazyOwl" data-src="%s"/ alt="Lazy Owl Image" align="center">', $img);}?></a>
			
			</div>

		<?php

		endwhile;
		echo '</div></div></div></div>';
		endif;
		die();
	}
}
add_action('wp_ajax_show_related', 'mostrar_ralacionados');
add_action('wp_ajax_nopriv_show_related', 'mostrar_ralacionados');

Luego con javascript debes pasar el action definido en el hook ("show_related'"), junto con la data que necesitas para procesar, en este caso el post_id:

Insertar CODE, HTML o PHP:
function showRelated(id){
	$("#destino-"+id).show().html("Loading...");
	jQuery.post(
		"/wp-admin/admin-ajax.php", 
		{
		'action': 'show_related',
		'post_id':   id
		}, 
	function(response){
		$("#destino-"+id).html(response);
	});
}

Esto pone el resultado del ajax en un div ya existente con id="destino-XXXX" donde XXXX es el id del post a mostrar relacionados.

Luego para mostrar el/los botones podrían ser:

PHP:
<?php
echo '<a href="#" onclick="showRelated('.$post->ID.'); return false;" >Mostrar Relacionados</a>';
echo '<div id="destino-'.$post->ID.'"></div>';
?>
 
walaa, wetsa una vez mas estas que te sales, mil y una gracias por ayudarme xq la verdad ya no sabia que hacer, no pensaba que fuese tan complicado.

Estoy intentando analizar el código e introducirlo en mi sitio y me e dado cuenta que el código que me as proporcionado no es para ejecutar lo que necesito, aunque bastante útil, supongo que no me as terminado de entender. lo que pretendo es que al hacer click en las imágenes relacionadas, en vez de dirigirme a otra pagina donde se me muestre la ficha di la película, se me muestre en la misma pagina en la que estoy, le pongo un ejemplo con un dibujo.

EJM.webp
al hacer click en cada imagen relacionada, se cambiaría el contenido.

mediante iframe e conseguido hacerlo funcionar pero no me parece la mejor opción pues me tarda mucho en aparecer la pagina de la película pero prácticamente lo que necesito es lo mismo que se consigue con un iframe pero con ajax para que así la carga sea mas fuida . no se si ahora me entiendes mejor.
 
Última edición:
A ver, seria algo asi:

lo del functions.php:

PHP:
function mostrar_ficha() {
	if ( ! is_numeric( $_POST['post_id'] ) )
		die("Wrong ID!");
	$_POST['post_id'] = abs(intval($_POST['post_id']));
	if ( ! $_POST['post_id'] )
		die("Wrong ID!");
	if(isset($_POST['post_id'])){
		global $post;
		$post =  get_post($_POST['post_id']);
		if ($post!=null){
			setup_postdata($post);
			//aca lo que quieras mostrar en la ficha
			?>
			<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
			<?php
		}
	}
	die();
}
add_action('wp_ajax_mostrar_ficha', 'mostrar_ficha');
add_action('wp_ajax_nopriv_mostrar_ficha', 'mostrar_ficha');

Observar que donde puse "aca lo que quieras mostrar en la ficha", puedes poner lo quieres mostrar ahí, yo puse solo un link con el titlulo como ejemplo. Al llamar setup_postdata puedes llamar funciones como si estuvieses en el single.php (el ejemplo de the_title() ).

El codigo javascript:

Insertar CODE, HTML o PHP:
<script type="text/javascript">
function showFicha(id){
	$("#destino").show().html("Loading...");
	jQuery.post(
		"/wp-admin/admin-ajax.php", 
		{
		'action': 'mostrar_ficha',
		'post_id':   id
		}, 
	function(response){
		$("#destino").html(response);
	});
}
</script>

Ahora siempre se utilizara el div con id "destino" cualquiera sea la ficha a cargar.

Ya al mostrar la lista de relacionados podría ser:

Insertar CODE, HTML o PHP:
<a target="related" href="<?php the_permalink(); ?>"><div id="capa"><i class="fa fa-play"></i></br><a target="related" id="tittle-panel" href="#" onclick="showFicha('<?php echo $post->ID;?>'); return false;" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>

Observar el "showFicha('<?php echo $post->ID;?>'); return false;"

Esto seria en reemplazo de:

Insertar CODE, HTML o PHP:
<a target="related" href="<?php the_permalink(); ?>"><div id="capa"><i class="fa fa-play"></i></br><a target="related"id="tittle-panel"href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>

No olvides que debe existir el div destino (solo uno):

Insertar CODE, HTML o PHP:
<div id="destino"></div>
 
ahora si wetsa pero tengo un error y es que cuando le doy para que me aparezca el contenido, abajo me carga una barra de loading...que es perfecto pero no me abre nada, se queda en el loading..., a que se debe esto?

- - - Actualizado - - -

claro wetsa analizando un poco creo que ai algo que aun no esta bien, cuando en la imagen pongo "contenido" el contenido es el propio single de otra pelicula, quiero decir que la funcion que yo tengo creada, ya me lleva a la pagina de la película, lo que necesito es que esa misma pagina se me abra dentro de la que ya estoy.
te e mandado un mensaje privado con una direccion, es lo que tenia hace unos meses creado y necesite subirlo para algunas pruebas, nada que ver con lo que tengo ahora, pero puedes ver como en las peliculas relacionadas, si pinchas, automaticamente te lleva a otra pelicula, lo que deseo es que a la película que me lleva, se me abra en la misma pagina en la que estoy.

las peliculas
 
En el link que me enviaste no veo que este implementado lo que estamos hablando.. Puedes implementarlo y después enviarme el link.

Haz puesto el codigo en el functions.php?

PHP:
function mostrar_ficha() {
    if ( ! is_numeric( $_POST['post_id'] ) )
        die("Wrong ID!");
    $_POST['post_id'] = abs(intval($_POST['post_id']));
    if ( ! $_POST['post_id'] )
        die("Wrong ID!");
    if(isset($_POST['post_id'])){
        global $post;
        $post =  get_post($_POST['post_id']);
        if ($post!=null){
            setup_postdata($post);
            //aca lo que quieras mostrar en la ficha
            ?>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            <?php
        }
    }
    die();
}
add_action('wp_ajax_mostrar_ficha', 'mostrar_ficha');
add_action('wp_ajax_nopriv_mostrar_ficha', 'mostrar_ficha');

Un detalle, fijate que tiene dos tags <a>, uno dentro de otro:

PHP:
<a target="related" href="<?php the_permalink(); ?>"><div id="capa"><i class="fa fa-play"></i></br><a target="related"id="tittle-panel"href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>

Esto no es correcto según los standars HTML.
Intenta reemplazarlo por uno solo <a> y agregale onclick="showFicha('<?php echo $post->ID;?>'); return false;". Algo así:

PHP:
<a target="related" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" onclick="showFicha('<?php echo $post->ID;?>'); return false;"><div id="capa"><i class="fa fa-play"></i></br><span id="tittle-panel"><?php the_title(); ?></span>

De todas formas, que quede en "loading..." no es por esto, hay algún problema, si pegaste mi código debería cargar el nombre de la peli con link. quizá algún problema con jQuery.. No lo se, tendría que verlo..

llevandome por el link que me enviaste, para que cargue la entrada entera el div "destino" puede ser "content_principal" y donde puse:

Insertar CODE, HTML o PHP:
//aca lo que quieras mostrar en la ficha

Pones el codigo que esta dentro del div "content_principal" en el single.php. Y en el js modificas el id del div:

Insertar CODE, HTML o PHP:
<script type="text/javascript">
function showFicha(id){
	$("#content_principal").show().html("Loading...");
	jQuery.post(
		"/wp-admin/admin-ajax.php", 
		{
		'action': 'mostrar_ficha',
		'post_id':   id
		}, 
	function(response){
		$("#content_principal").html(response);
	});
}
</script>

Si no encuentras el error subelo y lo veo, a ciegas es muy difícil y trabajoso..
 
vale perfecto ahora si, el fallo era mio que no lo estaba configurando correctamente, lo que no termina de ir fluido, aparece mucho tiempo el loading... y como puedo añadirle una funcion para que me cierre el div destino despues de abrir una pelicula? dandole estilo al div destino o seria mas corrrecto añadirle en el function la funcion para volver a la pelicula anterior e ir a la siguiente o cerrar? ai forma de controlar el tiempo de carga cuando pasa de una pelicula a otra?

Gracias

- - - Actualizado - - -

vale creo q lo correcto seria hacerlo en jquery y estoy probando para reducir el tiempo de carga pero no lo consigo, puede ser por que este alojado en local? o la funcion en si necesita tomarse su tiempo de carga?

por si influye, pongo el código completo del function a ver si puede ser por algo de esto

PHP:
 <?php//FUNCION ENTRADAS RELACIONADAS POR TAXONOMIAS CON IMAGENES------------------------------------------
function related_posts_juanjo(){
    global $post;
// get the custom post type's taxonomy terms
 
$custom_taxterms = wp_get_object_terms( $post->ID, 'genero', array('fields' => 'ids') );
// arguments
$args = array(
'post_type' => 'pelicula',
'post_status' => 'publish',
'posts_per_page' => 20, // you may edit this number
'orderby' => 'title',
'order'   => '',
'tax_query' => array(
    array(
        'taxonomy' => 'genero',
        'field' => 'id',
        'terms' => $custom_taxterms
    )
),
'post__not_in' => array ($post->ID),
);
$related_items = new WP_Query( $args );
// loop over query
if ($related_items->have_posts()) :
echo ' <div class="container-carousel">
          <div class="row">
            <div class="span12">
<div id="owl-demo" class="owl-carousel">';

while ( $related_items->have_posts() ) : $related_items->the_post();
?>



<div class="item">
			  
			  <a target="related" href="<?php the_permalink(); ?>">  
			   
			   <?php $images = get_custom_field('image_head:to_image_src'); foreach ($images as $img){printf('<img id="iu"class="lazyOwl" data-src="%s"/ alt="Lazy Owl Image" align="center">', $img);}?>
			   
			   </a>
			   
			  
			   
			 <a target="related" href="<?php the_permalink(); ?>"><a target="related" id="tittle-panel" href="#" onclick="showFicha('<?php echo $post->ID;?>'); return false;" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
			   
			</div>
          

<?php

endwhile;
echo '</div></div></div></div>';
endif;
// Reset Post Data
wp_reset_postdata();
}

?>




<?php
function mostrar_ficha() {
    if ( ! is_numeric( $_POST['post_id']))
        die("Wrong ID!");
    $_POST['post_id'] = abs(intval($_POST['post_id']));
    if ( ! $_POST['post_id'] )
        die("Wrong ID!");
    if(isset($_POST['post_id'])){
        global $post;
        $post =  get_post($_POST['post_id']);
        if ($post!=null){
            setup_postdata($post);
            //aca lo que quieras mostrar en la ficha
            ?>
			<div id="sinop-head">
<h1><?php the_title(); ?></h1>
 <?php if(function_exists('ec_stars_rating')){ec_stars_rating();}?><div class="date-top"><div class="year"><?php echo get_the_term_list( $post->ID, 'año'); ?></div><div class="age"><?php echo get_the_term_list( $post->ID, 'edad'); ?></div><?php print_custom_field('duracion'); ?></div>

<p class="sinops"><?php print_custom_field('sinopsis'); ?></p>

<span class="director"><?php echo get_the_term_list( $post->ID, 'director', '<i class="fa fa-ticket"></i> ', ', ', ''); ?></span>
<div id="mytool" class="mytool"><?php $images = get_custom_field('director_image:to_image_src'); foreach ($images as $img){printf('<img id="img-director" class="img-director" src="%s"/ align="center">', $img);}?></div>

<p class="actor">Reparto:<?php echo get_the_term_list( $post->ID, 'actor', ' ', ', ', ''); ?></p>

<p class="view-fm"><a href="#dialog" name="modal">Ver online</a> <a href="#dialog" name="modal">Descargar</a></p>

</div>

<div id="colum-img"></div><?php $images = get_custom_field('image_head:to_image_src'); foreach ($images as $img){printf('<img  id="image-head" src="%s"/ align="center">', $img);}?>
          

            <?php
        }
    }
    die();
}
add_action('wp_ajax_mostrar_ficha', 'mostrar_ficha');
add_action('wp_ajax_nopriv_mostrar_ficha', 'mostrar_ficha');
?>

- - - Actualizado - - -

Pues no se, pero yo hago eso con un plugin de wordpress. Me deja elegir entre abrir la foto en una ventana nueva, abrirla directamente donde estoy, sobreimpresionada sobre el fondo. O abrirla en la misma ventana donde estoy, se quita la que tenga para cargar la foto.

No se si me he explicado.

Claro, quiero conseguir algo así, pero con una relación de películas, aunque la función que necesito crear es algo así, pero mas personalizado por eso creo que un plugin no solucionaría mi problema, pues no es una galería de imágenes lo que pretendo mostrar. Aun así gracias por aportar.:encouragement:
 
Última edición:
Oye y si agilizas la carga del web entero ? que cascada tiene? el FTB es superior a 200ms?
 

Temas similares

escalante97
Respuestas
11
Visitas
316
Angélica Gómez Martínez
Angélica Gómez Martínez
Atrás
Arriba