Mostrar conteúdo de imagens em diferentes divs com jQuery

Juanjo87 · 26/02/2016

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.

YeltsinReyes · 26/02/2016

[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"); 
   });     
                }); 
  
     
        } 
    ); 
}

Juanjo87 · 26/02/2016

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?

Mostrar conteúdo de imagens em diferentes divs com jQuery

Juanjo87

YeltsinReyes

Juanjo87