Mostrar contenido de imágenes en diferentes divs con jQuery

  • 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, tengo creada una función en el function.php para que al hacer click sobre unas imágenes, su contenido me lo muestre en un div a través de ajax.

a través de este otro código jquery llamo a la función del function.php para que me muestre su contenido en el div #destino:

PHP:
function showFicha(id){
	  
	$("#destino").delay("slow").show(500).html("<div id='load'  ></div>");		
	
	jQuery.post(
		"/exytum/wp-admin/admin-ajax.php", 
		{
		    'action': 'mostrar_ficha',
		    'post_id':   id
		}, 
		
	    function(response){
            
			    $("#destino").html(response);
		
		        $("#aa2,#ocultar").on( "click", function() {
					
			         $(".owl-carousel .owl-item").removeClass("maimai0");
			  
			         $('#destino').slideUp(500); 
			
		             $("img#aa").removeClass("parrafo");
					 $("img#aa").removeClass("CC");
					 $("img#aa").removeClass("small");
					

					$("img#aa").mouseenter(function(event){
     	 $(" img#aa").removeClass("CC");
	 
   });
					  $(".owl-buttons").mouseenter(function(event){
      $("img#aa").removeClass("CC");
   });
   $(".owl-next, .owl-prev").mouseout(function(event){
      $("img#aa").removeClass("CC");
   });	
		        });
 
	
	    }
	);
}


Y mi pregunta es la siguiente, como hago para decirle a ese código, que si pincho en showFicha me mande a div #destino, pero si pincho en showFicha2, me mande a div #destino 2?.

Repito el código entero? xq necesito tener showFicha de 0 a 30 osea que necesito 30 div de #destino, repetir el código entero 30 veces no creo que sea necesario, de que forma lo hago entonces?

Gracias y perdón por el tocho.
 
[MENTION=155885]juanjofurtado[/MENTION] Como ejecutas la function, con Onclick.?
puedes pasar el valor o el numero por parametro.

Ejemplo:
PHP:
showFicha(1,2);

PHP:
function showFicha(id,x){ 
       
    $("#destino"+x).delay("slow").show(500).html("<div id='load'  ></div>");         
     
    jQuery.post( 
        "/exytum/wp-admin/admin-ajax.php",  
        { 
            'action': 'mostrar_ficha', 
            'post_id':   id 
        },  
         
        function(response){ 
             
                $("#destino"+x).html(response); 
         
                $("#aa2,#ocultar").on( "click", function() { 
                     
                     $(".owl-carousel .owl-item").removeClass("maimai0"); 
               
                     $('#destino'+x).slideUp(500);  
             
                     $("img#aa").removeClass("parrafo"); 
                     $("img#aa").removeClass("CC"); 
                     $("img#aa").removeClass("small"); 
                     

                    $("img#aa").mouseenter(function(event){ 
          $(" img#aa").removeClass("CC"); 
      
   }); 
                      $(".owl-buttons").mouseenter(function(event){ 
      $("img#aa").removeClass("CC"); 
   }); 
   $(".owl-next, .owl-prev").mouseout(function(event){ 
      $("img#aa").removeClass("CC"); 
   });     
                }); 
  
     
        } 
    ); 
}
 
Última edición:
Gracias, voy a probar a ver que tal

- - - Actualizado - - -

pues no consigo hacerlo funcionar.

este es el código que tengo en el function.php, por si puedes ayudarme

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
            ?>
		<div class="aue"></img></div>
	
<div id="cont-counter-head">
		<div id="modal-window"><div class="close-modal">X</div></div>	 
 <div id="counter-cont">
 
 <div id="ocultar">X</div>
 <div class="contenedor-1">
		
		
		
		
		<div id="general">
<a href="<?php the_permalink(); ?>">  <h1><?php the_title(); ?></h1></a>


<p>
<?php $origin = get_post_meta(get_the_id(), 'origin', TRUE);echo ''.$origin;?><br />
<span id="small-inf-1">
<span class="gen"><?php echo get_the_term_list( $post->ID, 'genero', '', ', ', ' ' );?></span>
<span class="age"><?php echo get_the_term_list( $post->ID, 'edad', '', ', ', ' ' );?></span>
<span class="tim"><?php $time = get_post_meta(get_the_id(), 'time', TRUE); echo ''.$time;?></span>
<span class="year"><?php echo get_the_term_list( $post->ID, 'year', ' ', ', ', ' ' );?></span> 
<br />
</span>
<span class="actr"><br /><?php echo get_the_term_list( $post->ID, 'actores_principales', '<strong>Actores Principales:</strong><br /> ', ', ', ' ' );?></span>
</p>
<p><?php $subtitle_post = get_post_meta(get_the_id(), 'subtitle_post', TRUE); echo ''.$subtitle_post; ?></p>
<p><a href="<?php the_permalink(); ?>"><i class="fa fa-info-circle"></i>  Ir a detalles</a></p>


</div>
		
		


</div>





    <div id="cont-head">


<div class="left"></div>
<div id="divi-cent"></div>

<div class="right">


<div id="cont-play">
<div class="pos-img"> <div id="play-1"class="play"><i class="fa fa-link"></i></div>  </div>


<?php $em_mtbx_img0 = get_post_meta( $post->ID, '_em_mtbx_img0', true ); if($em_mtbx_img0 != '') { // Si existe el valor ?> <img src="<?php echo $em_mtbx_img0; ?>" alt="" />  <?php } ?>


</div>
<div id="down">

<span>
<i class="fa fa-angle-down"></i>
<i class="fa fa-angle-up"></i>
</span>

</div>
</div>


    </div>

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

?>

- - - Actualizado - - -

Alguien me ayuda?

- - - Actualizado - - -

creo que la forma correcta seria asi

PHP:
 <script>
function realizaProceso(valorCaja1, valorCaja2){
        var parametros = {
                "valorCaja1" : valorCaja1,
                "valorCaja2" : valorCaja2
        };
        $.ajax({
                data:  parametros,
                url:   'ejemplo_ajax_proceso.php',
                type:  'post',
                beforeSend: function () {
                        $("#resultado").html("Procesando, espere por favor...");
                },
                success:  function (response) {
                        $("#resultado").html(response);
                }
        });
}
</script>

alguien con mas experiencia puede ayudarme?
 
Atrás
Arriba